* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #02040a; color: #cfe3f5; font: 11px Verdana, Tahoma, sans-serif; user-select: none; }
.hidden { display: none !important; }
input { font: inherit; }
button { font: inherit; cursor: pointer; }

/* ---------- panels (metal-and-glass HUD look) ---------- */
.panel {
  background: linear-gradient(180deg, rgba(22,38,58,.88), rgba(8,16,28,.9));
  border: 1px solid #3c5f80; border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), inset 0 1px 0 rgba(160,210,255,.15), 0 4px 14px rgba(0,0,0,.5);
}
.btn {
  background: linear-gradient(180deg, #3b6b95, #1d3a58); color: #e8f4ff; border: 1px solid #6ea3cf;
  border-radius: 3px; padding: 5px 12px; text-shadow: 0 1px 0 #000; font-weight: bold;
}
.btn:hover { background: linear-gradient(180deg, #4d86b8, #25496d); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.big { font-size: 15px; padding: 9px 20px; width: 100%; margin-top: 10px; letter-spacing: 2px; }
.btn.green { background: linear-gradient(180deg, #3f8f4f, #1e4f28); border-color: #7fcf8a; }
.btn.red { background: linear-gradient(180deg, #9a3b32, #561c17); border-color: #d9776c; }
.btn.small { padding: 2px 7px; font-size: 10px; }
.dim { color: #7f9ab3; }
.small { font-size: 10px; }
.cr { color: #ffd76a; }
.uri { color: #d68cff; }

/* ---------- login ---------- */
#login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; }
#loginBg { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-box { position: relative; width: 460px; padding: 26px 28px; background: rgba(6,12,24,.82); border: 1px solid #365a7c; border-radius: 6px; box-shadow: 0 0 40px rgba(40,120,255,.25); }
.logo { font: 900 44px/1 'Trebuchet MS', Verdana, sans-serif; letter-spacing: 6px; text-align: center; color: #e9f4ff; text-shadow: 0 0 18px #2a8cff, 0 2px 0 #000; }
.logo span { color: #56b4ff; }
.tagline { text-align: center; color: #7f9ab3; margin: 6px 0 18px; letter-spacing: 1px; }
.tabs { display: flex; gap: 4px; margin-bottom: 10px; }
.tabs button { flex: 1; padding: 6px; background: #0f1d2e; border: 1px solid #2c4966; color: #8fb0cf; }
.tabs button.on { background: #1f3b5a; color: #fff; border-color: #5d8fbd; }
.login-box input { width: 100%; padding: 8px 10px; margin: 4px 0; background: #050b14; color: #fff; border: 1px solid #2f4d6b; border-radius: 3px; font-size: 13px; }
.login-box input:focus { outline: none; border-color: #5fa8ec; }
#lgErr { color: #ff6a5a; min-height: 16px; margin-top: 8px; text-align: center; }
.login-foot { margin-top: 10px; text-align: center; color: #5c7690; }
.fp-title { margin: 10px 0 6px; color: #9fc2e3; }
.fp-row { display: flex; gap: 6px; }
.fp { flex: 1; padding: 8px; border: 1px solid #243e58; background: #0a1522; border-radius: 4px; cursor: pointer; text-align: center; }
.fp b { display: block; font-size: 10px; margin-top: 5px; color: #dbe9f7; }
.fp small { color: #6c86a0; font-size: 9px; }
.fp.on { border-color: #9fd0ff; background: #132943; box-shadow: 0 0 10px rgba(80,160,255,.4); }
.fp-emblem { width: 48px; height: 48px; margin: 0 auto; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #fff;
  background: radial-gradient(circle at 35% 30%, var(--c), #000 90%); border: 2px solid var(--c); text-shadow: 0 1px 2px #000; }

/* ---------- game ---------- */
#game { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }
#view3d, #ovl { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hud { position: absolute; padding: 6px 8px; }
.hud-head { display: flex; justify-content: space-between; font-weight: bold; color: #fff; margin-bottom: 4px; }
.tag { padding: 0 4px; border-radius: 2px; font-size: 10px; }
.row { display: flex; justify-content: space-between; line-height: 16px; }
.bar { position: relative; height: 13px; background: #050b12; border: 1px solid #22384e; margin: 3px 0; border-radius: 2px; overflow: hidden; }
.bar > div { position: absolute; inset: 0 auto 0 0; width: 0; transition: width .15s; }
.bar > span { position: relative; display: block; text-align: center; font-size: 9px; line-height: 12px; color: #fff; text-shadow: 0 1px 1px #000; }
.bar.hp > div { background: linear-gradient(180deg, #7ef07a, #2b9a2a); }
.bar.sh > div { background: linear-gradient(180deg, #7ed0ff, #1e70c0); }
.bar.cg > div { background: linear-gradient(180deg, #f5c86a, #a8701c); }
.bar.exp > div { background: linear-gradient(180deg, #ffe58a, #c08b12); }

#topbar { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; z-index: 5; }
#topbar button { background: linear-gradient(180deg, rgba(40,70,100,.92), rgba(14,28,44,.92)); color: #d6e9fb; border: 1px solid #3f6689; padding: 5px 12px; font-weight: bold; }
#topbar button:hover { background: linear-gradient(180deg, #4b7fb0, #1b3653); }

#hudUser { left: 8px; top: 8px; width: 210px; }
#hudShip { left: 8px; top: 138px; width: 210px; }
#hudTarget { left: 50%; top: 44px; transform: translateX(-50%); width: 240px; text-align: center; }
#tName { font-weight: bold; margin-bottom: 2px; }
#hudMini { right: 8px; bottom: 8px; width: 254px; }
#minimap { display: block; background: rgba(0,0,0,.45); border: 1px solid #22384e; cursor: pointer; }

#actionbar { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; padding: 4px; }
.slot { width: 54px; height: 54px; position: relative; background: linear-gradient(180deg, rgba(34,56,82,.95), rgba(10,18,30,.95)); border: 1px solid #3a5b7c; border-radius: 3px; cursor: pointer; }
.slot.on { border-color: #ffd24a; box-shadow: 0 0 8px rgba(255,210,74,.7); }
.slot .k { position: absolute; left: 3px; top: 1px; font-size: 9px; color: #9ab; }
.slot .n { position: absolute; right: 3px; bottom: 1px; font-size: 9px; color: #fff; text-shadow: 0 1px 1px #000; }
.slot .lbl { position: absolute; left: 0; right: 0; top: 28px; text-align: center; font-size: 8px; color: #bcd; }
.slot canvas { position: absolute; left: 15px; top: 5px; }
.slot.sep { margin-left: 10px; }
.slot .cd { position: absolute; inset: 0; background: rgba(0,0,0,.55); transform-origin: bottom; transform: scaleY(0); }
#actionHint { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); color: #6f8ba6; font-size: 10px; text-shadow: 0 1px 1px #000; }

#chat { left: 8px; bottom: 8px; width: 360px; height: 190px; display: flex; flex-direction: column; }
#chatLog { flex: 1; overflow-y: auto; font-size: 11px; line-height: 15px; user-select: text; word-wrap: break-word; }
#chatLog .sys { color: #ffcf5a; }
#chatIn { margin-top: 4px; background: rgba(0,0,0,.5); color: #fff; border: 1px solid #2c4966; padding: 4px 6px; }
#chatIn:focus { outline: none; border-color: #5fa8ec; }

#log { position: absolute; left: 50%; top: 110px; transform: translateX(-50%); width: 560px; text-align: center; pointer-events: none; }
#log div { font-size: 12px; font-weight: bold; text-shadow: 0 1px 2px #000, 0 0 4px #000; margin: 2px 0; transition: opacity .6s; }
#log .good { color: #b4ff9a; } #log .err { color: #ff8a7a; } #log .sys { color: #9ad4ff; } #log .lvl { color: #ffe066; font-size: 16px; }
#center-msg { position: absolute; left: 50%; top: 38%; transform: translate(-50%,-50%); font: bold 28px Verdana, Tahoma, sans-serif; color: #fff; text-shadow: 0 0 12px #3af, 0 2px 2px #000; pointer-events: none; opacity: 0; transition: opacity .4s; }
#collectBar { position: absolute; left: 50%; top: 58%; transform: translateX(-50%); width: 120px; height: 8px; border: 1px solid #fff8; background: #0008; }
#collectBar div { height: 100%; width: 0; background: #ffd24a; }

#deathScreen { position: absolute; inset: 0; background: rgba(40,0,0,.35); display: flex; align-items: center; justify-content: center; z-index: 20; }
.death-box { padding: 20px 30px; text-align: center; width: 360px; }
.death-box h2 { color: #ff7a6a; margin: 0 0 8px; }
.death-box .btn { display: block; width: 100%; margin-top: 8px; }

/* ---------- windows ---------- */
.win { position: absolute; z-index: 10; display: flex; flex-direction: column; background: linear-gradient(180deg, rgba(18,32,50,.97), rgba(7,13,22,.97)); border: 1px solid #4b739a; border-radius: 4px; box-shadow: 0 8px 30px rgba(0,0,0,.7); }
.win-title { padding: 6px 10px; font-weight: bold; font-size: 12px; background: linear-gradient(180deg, #2f5378, #152a42); border-bottom: 1px solid #4b739a; cursor: move; color: #fff; letter-spacing: 1px; }
.win-title .x { float: right; cursor: pointer; color: #ccd; font-size: 14px; line-height: 12px; }
.win-title .x:hover { color: #fff; }
.win-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid #2b4661; }
.win-tabs button { background: #0e1c2c; border: 1px solid #2b4661; border-bottom: none; color: #8fb0cf; padding: 5px 12px; }
.win-tabs button.on { background: #22415f; color: #fff; }
.win-body { flex: 1; overflow-y: auto; padding: 10px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.card { background: rgba(10,22,36,.9); border: 1px solid #2b4661; border-radius: 4px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.card:hover { border-color: #5a89b5; }
.card .t { font-weight: bold; color: #fff; }
.card canvas { align-self: center; margin: 2px 0; }
.card .s { color: #8fb0cf; font-size: 10px; min-height: 26px; }
.card .p { font-weight: bold; }
.card .buy { display: flex; gap: 4px; margin-top: 4px; }
.card .buy input { width: 64px; background: #050b14; color: #fff; border: 1px solid #2f4d6b; padding: 2px 4px; }
.card .owned { color: #7fe07a; font-weight: bold; }
.shipcard.on { border-color: #ffd24a; }
.help table { width: 100%; border-collapse: collapse; }
.help td { padding: 3px 4px; border-bottom: 1px solid #1c3046; }
.help td:first-child { color: #ffd76a; width: 40%; }
.help h3 { color: #9fd0ff; margin: 8px 0 6px; }
.help p { line-height: 16px; color: #b8cde0; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.kv b { color: #fff; text-align: right; }

/* ---------- staff: chat ---------- */
#chatLog .cl { position: relative; padding-right: 12px; }
#chatLog .cn { cursor: pointer; }
#chatLog .cn:hover { text-decoration: underline; }
#chatLog .ctag, .preview .ctag { display: inline-block; font-size: 8px; font-weight: bold; line-height: 11px; padding: 0 3px; margin-right: 3px; border-radius: 2px;
  color: #000; background: var(--rc); vertical-align: 1px; letter-spacing: .5px; }
#chatLog .staffmsg { background: linear-gradient(90deg, rgba(255,255,255,.05), transparent); }
#chatLog .staffline, #chatLog .staffsys { color: #e2b8ff; }
#chatLog .staffline .chan { color: #c38bff; font-weight: bold; }
#chatLog .deleted, .chrow.deleted { color: #5f7890; }
#chatLog .cdel { position: absolute; right: 0; top: 0; color: #ff8a7a; cursor: pointer; display: none; font-weight: bold; }
#chatLog .cl:hover .cdel { display: inline; }
.ctxmenu { position: fixed; z-index: 100; min-width: 170px; padding: 3px 0; }
.ctxmenu .ctxhead { padding: 4px 10px; font-weight: bold; color: #fff; border-bottom: 1px solid #2b4661; }
.ctxmenu div:not(.ctxhead) { padding: 5px 10px; cursor: pointer; }
.ctxmenu div:not(.ctxhead):hover { background: #24476a; }

#announce { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); z-index: 30; min-width: 360px; max-width: 640px; padding: 10px 18px; text-align: center;
  font-size: 14px; color: #fff; border-color: #ffd24a; box-shadow: 0 0 24px rgba(255,210,74,.35); transition: opacity .6s; pointer-events: none; }
#announce .an-t { color: #ffd24a; font-weight: bold; font-size: 10px; letter-spacing: 3px; margin-bottom: 4px; }
#announce .an-f { color: #9ab; font-size: 10px; margin-top: 4px; }
#warnBox { position: absolute; inset: 0; background: rgba(40,20,0,.45); display: flex; align-items: center; justify-content: center; z-index: 60; }
.warn-box { width: 400px; padding: 18px 24px; text-align: center; border-color: #ffb23a; }
.warn-box h2 { color: #ffc24a; margin: 0 0 10px; font-size: 16px; }
.warn-box p { font-size: 13px; color: #fff; }
.warn-box .btn { margin-top: 12px; }
#topbar .staffbtn { color: #ffd98a; }

/* ---------- staff: panels ---------- */
.staffwin .win-body { font-size: 11px; }
.staffwin input:not([type=checkbox]):not([type=color]), .staffwin select, .staffwin textarea {
  background: #06101b; color: #e4f0fb; border: 1px solid #2c4966; padding: 4px 6px; border-radius: 2px; font: inherit; }
.staffwin input:focus, .staffwin select:focus, .staffwin textarea:focus { outline: none; border-color: #5fa8ec; }
.staffwin input:disabled, .staffwin select:disabled { opacity: .5; }
.staffwin textarea { resize: vertical; user-select: text; }
.staffwin input[type=color] { width: 40px; height: 22px; padding: 0; border: 1px solid #2c4966; background: none; }
.staffwin h4 { margin: 0 0 6px; color: #fff; font-size: 11px; }
.split { display: flex; gap: 10px; height: 100%; }
.split-l { width: 240px; flex: none; display: flex; flex-direction: column; min-height: 0; }
.split-r { flex: 1; overflow-y: auto; min-height: 0; padding-right: 4px; }
.pad { padding: 10px 0; }
.ps-bar { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ps-q { flex: 1; min-width: 0; }
.ps-on { white-space: nowrap; color: #9ab; }
.ps-list, .rolelist { flex: 1; overflow-y: auto; border: 1px solid #1d3348; background: rgba(0,0,0,.25); }
.ps-row { display: flex; gap: 6px; align-items: center; padding: 4px 6px; cursor: pointer; border-bottom: 1px solid #13263a; }
.ps-row:hover { background: #142b43; }
.ps-row.on { background: #22415f; }
.ps-row b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #3c4d5e; flex: none; display: inline-block; }
.dot.online { background: #45e06a; box-shadow: 0 0 5px #45e06a; }
.pill { font-size: 9px; padding: 0 5px; border-radius: 7px; background: #2a3e52; color: #cfe3f5; white-space: nowrap; }
.pill.red { background: #7a2620; } .pill.amber { background: #7a5a14; }
.pill.cat-mod { background: #1f4f6e; } .pill.cat-chat { background: #3a3a6e; } .pill.cat-admin { background: #6e3a1f; } .pill.cat-staff { background: #5a2a6e; }
.rbadge { font-size: 10px; font-weight: bold; padding: 1px 6px; border-radius: 2px; color: #000; background: var(--rc); }
.pd-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.pd-name { font-size: 15px; }
.kv3 { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: 3px 10px; margin-bottom: 8px; }
.kv3 span { color: #7f9ab3; } .kv3 b { color: #fff; }
.box { border: 1px solid #1d3348; background: rgba(0,0,0,.22); border-radius: 3px; padding: 8px 10px; margin-bottom: 8px; }
.alert { padding: 6px 10px; border-radius: 3px; margin-bottom: 8px; }
.alert.red { background: rgba(160,40,30,.35); border: 1px solid #a33; }
.alert.amber { background: rgba(160,110,20,.3); border: 1px solid #a82; }
.arow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 5px 0; }
.arow .lbl { width: 36px; color: #9ab; }
.arow label { color: #bcd; white-space: nowrap; }
.grow { flex: 1; min-width: 120px; }
.w100 { width: 100%; }
.li { padding: 2px 0; border-bottom: 1px dotted #1d3348; }
.plink { color: #8fd0ff; cursor: pointer; }
.plink:hover { text-decoration: underline; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; color: #7f9ab3; font-weight: normal; border-bottom: 1px solid #2b4661; padding: 3px 5px; }
.tbl td { padding: 3px 5px; border-bottom: 1px solid #13263a; vertical-align: top; }
.nowrap { white-space: nowrap; }
.wrap { word-break: break-word; }
.chlist { border: 1px solid #1d3348; background: rgba(0,0,0,.25); }
.chrow { display: flex; gap: 8px; align-items: baseline; padding: 3px 6px; border-bottom: 1px solid #13263a; user-select: text; }
.report.closed { opacity: .65; }
.quote { border-left: 2px solid #3c5f80; padding: 3px 8px; margin: 4px 0; color: #bcd; background: rgba(0,0,0,.25); }
.swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.form { display: grid; grid-template-columns: 90px 1fr; gap: 5px 10px; align-items: center; }
.form > label { color: #9ab; }
.preview { margin-top: 8px; padding: 6px 8px; background: rgba(0,0,0,.4); border: 1px solid #1d3348; }
.pcat { color: #ffd98a; font-weight: bold; margin: 8px 0 3px; }
.perm { display: grid; grid-template-columns: 18px 130px 1fr; gap: 6px; align-items: center; padding: 2px 0; cursor: pointer; }
.perm code { color: #8fd0ff; font-size: 10px; }
.perm.dis { opacity: .55; cursor: default; }

/* ---------- chat channels ---------- */
#chat { height: 214px; }
#chatTabs { display: flex; gap: 2px; margin: -2px 0 4px; border-bottom: 1px solid #2b4661; }
#chatTabs button { position: relative; background: #0e1c2c; border: 1px solid #2b4661; border-bottom: none; color: #8fb0cf; padding: 2px 7px; font-size: 10px; border-radius: 2px 2px 0 0; }
#chatTabs button.on { background: #22415f; color: #fff; }
#chatTabs button:hover { color: #fff; }
#chatTabs .unr:not(:empty) { margin-left: 4px; background: #d0442f; color: #fff; border-radius: 6px; padding: 0 4px; font-size: 9px; }
#chatLog .hid, #chatLog .ign { display: none; }
#chatLog .chn { display: inline-block; font-size: 8px; font-weight: bold; line-height: 11px; padding: 0 3px; margin-right: 3px; border-radius: 2px; vertical-align: 1px;
  border: 1px solid; background: rgba(0,0,0,.35); }
#chatLog .chn.c { color: var(--cc); border-color: var(--cc); }
#chatLog .chn.m { color: #9fe0a0; border-color: #4f8f55; }
#chatLog .chn.p { color: #e9b3ff; border-color: #9a5fc0; }
#chatLog .chn.s { color: #c38bff; border-color: #7f4fb0; }
#chatLog:not(.tab-all) .chn.c, #chatLog:not(.tab-all) .chn.m, #chatLog.tab-s .chn.s { display: none; }
#chatLog .ch-p .cm { color: #f0d6ff; }
#chatLog .ch-s .cm { color: #e2c6ff; }
#chatTo { font-size: 10px; color: #cbb0e0; margin-top: 3px; }
#chatTo .x { cursor: pointer; color: #f99; margin-left: 4px; }
.pill.chp-c { background: #2a4a2a; } .pill.chp-m { background: #24503a; } .pill.chp-p { background: #5a2a6e; } .pill.chp-s { background: #3e2a6e; }

/* ---------- shop & hangar (v0.4) ---------- */
.win-tabs .wallet { margin-left: auto; align-self: center; font-weight: bold; padding-bottom: 4px; }
.win-tabs .wallet span { margin-left: 8px; }
.grid.ships { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.card .role { font-weight: normal; color: #8fb0cf; font-size: 10px; margin-left: 4px; }
.card .lvl, .lvl { float: right; font-size: 9px; font-weight: bold; padding: 0 5px; border-radius: 6px; background: #1f3d5a; color: #bfe0ff; }
.lvl.locked { background: #5a2626; color: #ffb4a8; }
.card.locked { opacity: .6; }
.card.own { border-color: #3f7f4a; }
.card .stats { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 1px 6px; font-size: 10px; }
.card .stats span { color: #7f9ab3; } .card .stats b { color: #fff; }
.perk { color: #ffd98a; font-size: 10px; min-height: 13px; }
.card .p { margin-top: auto; }
.card .qty { display: flex; gap: 3px; align-items: center; }
.card .qty .q { background: #0e1c2c; border: 1px solid #2b4661; color: #9fc2e3; font-size: 9px; padding: 1px 5px; border-radius: 2px; }
.card .qty .q:hover { color: #fff; border-color: #5a89b5; }
.card .qty input, .card .buy input { width: 64px; background: #050b14; color: #fff; border: 1px solid #2f4d6b; padding: 2px 4px; }
.card .buy { align-items: center; }
.card .buy .total { flex: 1; font-size: 10px; }
.up { color: #7fe07a; } .down { color: #ff8a7a; }
h4.grp { margin: 10px 0 6px; color: #9fc2e3; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
h4.grp:first-child { margin-top: 0; }
h4.grp .dim { text-transform: none; letter-spacing: 0; font-weight: normal; margin-left: 6px; }
.btn.warn { background: linear-gradient(180deg, #b0842a, #6a4a10); border-color: #ffd24a; }
.hangar { display: flex; gap: 12px; height: 100%; }
.hangar .col { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.hangar .left { flex: 1.25; } .hangar .mid { flex: .8; } .hangar .right { flex: 1.1; }
.hangar .right .inv { overflow-y: auto; flex: 1; }
.hangar h4 { margin: 4px 0; color: #9fc2e3; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.hangar h4 .dim { text-transform: none; letter-spacing: 0; font-weight: normal; }
.hg-name { font-size: 14px; font-weight: bold; color: #fff; }
.hg-name .role { font-size: 10px; font-weight: normal; color: #8fb0cf; }
.slothead { display: flex; justify-content: space-between; color: #9fc2e3; font-size: 10px; margin-top: 4px; }
.slots { display: flex; flex-wrap: wrap; gap: 3px; }
.eslot { width: 34px; height: 34px; border: 1px dashed #36597a; border-radius: 3px; display: flex; align-items: center; justify-content: center; }
.eslot.full { border-style: solid; background: #17324e; cursor: pointer; }
.eslot.full:hover { border-color: #ff8a7a; background: #3a1f24; }
.arow2 { display: flex; gap: 6px; margin-top: 6px; }
.inv { display: flex; flex-direction: column; gap: 3px; }
.inv .it { display: flex; gap: 6px; align-items: center; background: #0c1a2a; border: 1px solid #22384e; padding: 4px 6px; border-radius: 3px; }
.inv .it .nm { flex: 1; min-width: 0; line-height: 13px; }
.inv .it .acts { display: flex; gap: 3px; }
.inv .it .ii canvas { display: block; }
.shiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.shipcard { border: 1px solid #2b4661; border-radius: 4px; padding: 4px; text-align: center; cursor: pointer; width: 88px; background: #0a1522; }
.shipcard.nodock { opacity: .6; cursor: not-allowed; }
#topbar button { white-space: nowrap; }

.drones { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-bottom: 6px; }
.drone { display: flex; align-items: center; gap: 3px; }
.drone .dn { width: 58px; font-size: 10px; color: #9fc2e3; }