*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0a0e1a;
  --bg2:#111827;
  --bg3:#1a2340;
  --card:#1e293b;
  --card2:#243050;
  --gold:#f0b429;
  --gold2:#d4941a;
  --teal:#14b8a6;
  --teal2:#0d9488;
  --red:#ef4444;
  --green:#22c55e;
  --blue:#3b82f6;
  --text:#e2e8f0;
  --text2:#94a3b8;
  --text3:#64748b;
  --border:#334155;
  --radius:10px;
  --radius-sm:6px;
  --shadow:0 4px 20px rgba(0,0,0,.4);
  --font:'Segoe UI',system-ui,-apple-system,sans-serif;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --tap-hl:rgba(20,184,166,.2);
  --header-start:#0f1929;
  --header-end:#1a2340;
  --nav-bg:#111827;
}
@media(prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#e8ecf2;
    --bg2:#dce1e8;
    --bg3:#cbd1da;
    --card:#ffffff;
    --card2:#f8fafc;
    --gold:#b8860b;
    --gold2:#a0740a;
    --teal:#0d9488;
    --teal2:#0f766e;
    --red:#dc2626;
    --green:#16a34a;
    --blue:#2563eb;
    --text:#0f172a;
    --text2:#334155;
    --text3:#64748b;
    --border:#8f9ba8;
    --shadow:0 4px 20px rgba(0,0,0,.12);
    --tap-hl:rgba(13,148,136,.15);
    --header-start:#dce1e8;
    --header-end:#cbd1da;
    --nav-bg:#dce1e8;
  }
}
[data-theme="light"]{
  --bg:#e8ecf2;
  --bg2:#dce1e8;
  --bg3:#cbd1da;
  --card:#ffffff;
  --card2:#f8fafc;
  --gold:#b8860b;
  --gold2:#a0740a;
  --teal:#0d9488;
  --teal2:#0f766e;
  --red:#dc2626;
  --green:#16a34a;
  --blue:#2563eb;
  --text:#0f172a;
  --text2:#334155;
  --text3:#64748b;
  --border:#8f9ba8;
  --shadow:0 4px 20px rgba(0,0,0,.12);
  --tap-hl:rgba(13,148,136,.15);
  --header-start:#dce1e8;
  --header-end:#cbd1da;
  --nav-bg:#dce1e8;
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
html,body{height:100%;overflow:hidden;font-family:var(--font);background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body{display:flex;flex-direction:column}
input,button,select,textarea{font-family:inherit;font-size:inherit}

.alloc-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;user-select:none}
.alloc-toggle input{display:none}
.alloc-slider{
  width:30px;height:16px;background:var(--bg3);border-radius:8px;position:relative;
  transition:background .2s;flex-shrink:0;border:1px solid var(--border)
}
.alloc-slider::after{
  content:'';position:absolute;top:1px;left:2px;width:12px;height:12px;
  background:var(--text3);border-radius:50%;transition:all .2s
}
.alloc-toggle input:checked+.alloc-slider{background:var(--teal)}
.alloc-toggle input:checked+.alloc-slider::after{transform:translateX(14px);background:#fff}
.alloc-label{font-size:10px;color:var(--text2);font-weight:500;white-space:nowrap}
.alloc-toggle input:checked~.alloc-label{color:var(--teal)}

header{
  background:linear-gradient(135deg,var(--header-start),var(--header-end));padding:10px 16px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--gold);flex-shrink:0;z-index:10;
  min-height:52px
}
header h1{font-size:18px;font-weight:700;color:var(--gold);letter-spacing:.5px;white-space:nowrap}
header h1 span{color:var(--text);font-weight:400}
#save-status{font-size:11px;color:var(--text2);display:flex;align-items:center;gap:4px;white-space:nowrap;width:110px;flex-shrink:0}
#save-status.saved{color:var(--teal)}
#save-status.dirty{color:var(--gold)}
#save-status.error{color:var(--red)}

#tab-nav{
  display:flex;background:var(--nav-bg);border-bottom:1px solid var(--border);
  flex-shrink:0;overflow-x:auto;position:relative
}
#tab-nav::-webkit-scrollbar{display:none}
.tab-btn{
  flex:1;min-width:0;padding:12px 8px;border:none;background:transparent;
  color:var(--text2);font-size:12px;font-weight:600;text-align:center;
  cursor:pointer;position:relative;transition:color .2s;white-space:nowrap;
  letter-spacing:.3px;border-bottom:2px solid transparent
}
.tab-btn:active{background:var(--tap-hl)}
.tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.tab-btn .badge{
  display:inline-block;background:var(--red);color:#fff;font-size:9px;
  padding:1px 5px;border-radius:8px;margin-left:3px;vertical-align:top;line-height:14px
}
.tab-btn .badge.green{background:var(--green)}

main{
  flex:1;overflow-y:auto;padding:12px 12px calc(12px + var(--safe-bottom))
}
.tab-content{display:none}
.tab-content.active{display:block}

.card{
  background:var(--card);border-radius:var(--radius);padding:14px;
  margin-bottom:12px;border:1px solid var(--border);transition:border-color .2s
}
.card-title{
  font-size:13px;font-weight:600;color:var(--text2);text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between
}

/* Utility */
.flex{display:flex}
.flex-center{display:flex;align-items:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.gap4{gap:4px}
.gap8{gap:8px}
.gap10{gap:10px}
.wrap{flex-wrap:wrap}
.f1{flex:1}
.fs9{font-size:9px}
.fs10{font-size:10px}
.fs11{font-size:11px}
.fs12{font-size:12px}
.fs13{font-size:13px}
.mt2{margin-top:2px}
.mt4{margin-top:4px}
.mt6{margin-top:6px}
.mt8{margin-top:8px}
.mb4{margin-bottom:4px}
.mb6{margin-bottom:6px}
.mb8{margin-bottom:8px}
.mb10{margin-bottom:10px}
.p4{padding:4px}
.p6{padding:6px}
.p8{padding:8px}
.p10{padding:10px}
.c-pointer{cursor:pointer}
.c-text2{color:var(--text2)}
.c-text3{color:var(--text3)}
.c-red{color:var(--red)}
.c-teal{color:var(--teal)}
.c-gold{color:var(--gold)}
.bg-transparent{background:transparent}
.b-none{border:none}
.shrink0{flex-shrink:0}
.ws-nowrap{white-space:nowrap}
.t-r{text-align:right}
.lh18{line-height:1.8}

/* Buttons */
.icon-btn{
  background:none;border:1px solid var(--border);color:var(--text2);
  border-radius:4px;padding:4px 6px;font-size:14px;cursor:pointer;line-height:1;
  display:flex;align-items:center;gap:4px
}
.action-btn{
  padding:8px 16px;border-radius:var(--radius-sm);font-size:12px;
  font-weight:600;cursor:pointer;flex:1;background:transparent
}
.action-btn.danger{border-color:var(--red);color:var(--red)}
.action-btn.teal{border-color:var(--teal);color:var(--teal)}
.action-btn.primary{border-color:var(--blue);color:var(--blue)}
.action-btn.gold{border-color:var(--gold);color:var(--gold)}
.tool-btn{
  padding:6px 14px;border:1px solid var(--border);background:transparent;
  color:var(--text3);border-radius:var(--radius-sm);font-size:11px;font-weight:600;cursor:pointer
}
.craft-btn{
  padding:7px 16px;border:1px solid var(--gold);background:transparent;
  color:var(--gold);border-radius:var(--radius-sm);font-size:12px;font-weight:600;cursor:pointer
}
.compare-main-btn{
  margin-left:auto;padding:5px 12px;border:1px solid var(--gold);
  background:var(--gold);color:var(--bg);border-radius:4px;font-size:11px;font-weight:600;cursor:pointer
}
.compare-clear-btn{
  padding:5px 12px;border:1px solid var(--border);background:transparent;
  color:var(--text2);border-radius:4px;font-size:11px;cursor:pointer
}

/* Form controls */
.form-input{
  flex:1;min-width:120px;padding:7px 10px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text);border-radius:var(--radius-sm);font-size:12px
}
.form-input-num{
  width:90px;padding:7px 10px;border:1px solid var(--border);background:var(--bg2);
  color:var(--text);border-radius:var(--radius-sm);font-size:12px
}
.paste-textarea{
  width:100%;height:160px;padding:10px;border:1px solid var(--border);
  background:var(--bg2);color:var(--text);border-radius:var(--radius-sm);
  font-size:12px;font-family:monospace;resize:vertical
}
.discount-select{
  font-size:11px;color:var(--text2);background:var(--bg2);
  border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 6px
}
.craft-controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}

/* Text */
.desc{font-size:12px;color:var(--text3);margin-bottom:10px}

/* Bars */
.bar-row{display:flex;align-items:center;gap:4px;margin-top:4px}
.bar-label{white-space:nowrap;width:72px;text-align:left;font-size:9px;color:var(--text2);flex-shrink:0}
.bar-track{
  flex:1;height:14px;background:#b1b1b1;border-radius:4px;overflow:hidden;
  border:1px solid var(--border);position:relative
}
.bar-fill{height:100%;border-radius:4px;transition:width .3s}
.bar-text{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  font-size:9px;color:#000;font-weight:600;white-space:nowrap
}
.bar-fill-green{background:var(--green)}
.bar-fill-gold{background:var(--gold)}

/* Tiny bars (XP, quick) */
.bar-thin{flex:1;height:4px;background:var(--bg);border-radius:2px;overflow:hidden}
.bar-thin-fill{height:100%;border-radius:2px;transition:width .3s}

/* Completion bar (modal) */
.comp-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;margin:4px 0}
.comp-fill{height:100%;border-radius:4px;transition:width .3s}

/* Modal XP input */
.modal-xp-input{
  flex:1;padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--bg);color:var(--text);font-size:13px;width:80px
}

/* Shopping list */
.shop-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px}
.shop-name{width:120px;flex-shrink:0;color:var(--text2);font-weight:500}
.shop-bar{flex:1;height:8px;background:var(--bg);border-radius:4px;overflow:hidden;min-width:60px}
.shop-fill{height:100%;border-radius:4px}
.shop-have{width:80px;text-align:right;flex-shrink:0;font-weight:600}
.shop-need{width:70px;text-align:right;flex-shrink:0;font-weight:600}
.shop-foot{margin-top:8px;font-size:10px;color:var(--text3);text-align:right}

/* Craft plan output */
.cp-row{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border)}
.cp-head{font-weight:600;color:var(--gold);margin-bottom:6px}
.cp-foot{margin-top:8px;font-size:11px;color:var(--text3)}

/* Compare bar container */
.compare-bar{
  margin-bottom:8px;padding:8px 10px;background:var(--bg3);
  border-radius:var(--radius-sm);font-size:12px;align-items:center;gap:8px;flex-wrap:wrap
}

/* Progress card title row */
.pc-title-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}

/* Empty state small */
.empty-state{padding:24px;text-align:center;color:var(--text3);font-size:13px;line-height:1.6}
.empty-state .icon{font-size:32px;margin-bottom:8px;display:block}

.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.res-item{
  background:var(--bg2);border-radius:var(--radius-sm);padding:10px 10px 8px;
  display:flex;flex-direction:column;gap:6px
}
.res-item .res-name{font-size:11px;color:var(--text2);font-weight:500;text-transform:uppercase;letter-spacing:.3px}
.res-item .res-value{font-size:20px;font-weight:700;color:var(--text);line-height:1}
.res-item .res-controls{display:flex;gap:4px;flex-wrap:wrap}
.res-item .res-controls button{
  flex:1;min-width:40px;padding:5px 4px;border:1px solid var(--border);
  background:var(--bg3);color:var(--text);border-radius:4px;font-size:11px;
  font-weight:600;cursor:pointer;text-align:center;transition:all .15s
}
.res-item .res-controls button:active{transform:scale(.95)}
.res-item .res-controls button.add{color:var(--green);border-color:var(--green)}
.res-item .res-controls button.add:active{background:var(--green);color:#fff}
.res-item .res-controls button.sub{color:var(--red);border-color:var(--red)}
.res-item .res-controls button.sub:active{background:var(--red);color:#fff}
.res-item input{
  width:100px;padding:4px;border:1px solid var(--border);background:var(--bg);
  color:var(--text);border-radius:4px;text-align:right;font-size:20px;font-weight:600
}
.res-item.raw .res-name{color:var(--teal)}
.res-item.crafted .res-name{color:var(--gold)}
.res-item.special .res-name{color:var(--blue)}
.res-section.collapsed .res-grid{display:none}
.res-pct-bar{
  height:4px;background:var(--bg);border-radius:2px;overflow:hidden;margin-top:2px
}
.res-pct-bar .fill{
  height:100%;border-radius:2px;transition:width .3s;background:var(--teal)
}

.section-label{
  font-size:12px;font-weight:600;color:var(--text3);text-transform:uppercase;
  letter-spacing:.5px;padding:8px 0 6px;display:flex;align-items:center;gap:6px
}
.section-label::after{content:'';flex:1;height:1px;background:var(--border)}

.craft-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.craft-item{
  background:var(--bg2);border-radius:var(--radius-sm);padding:12px;
  border:1px solid var(--border);display:flex;flex-direction:column;gap:6px
}
.craft-item .craft-name{font-size:14px;font-weight:700;color:var(--gold)}
.craft-item .craft-inputs{font-size:11px;color:var(--text2);line-height:1.5}
.craft-item .craft-inputs .yes{color:var(--green)}
.craft-item .craft-inputs .no{color:var(--red)}
.craft-item .craft-btns{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.craft-item .craft-btns button{
  padding:6px 10px;border:1px solid var(--gold);background:transparent;
  color:var(--gold);border-radius:4px;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;min-width:36px;text-align:center
}
.craft-item .craft-btns button:active{background:var(--gold);color:var(--bg)}
.craft-item .craft-btns button:disabled{opacity:.3;cursor:default}

.filters{
  display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap;align-items:center
}
.filters input,.filters select{
  padding:7px 10px;border:1px solid var(--border);background:var(--bg2);
  color:var(--text);border-radius:var(--radius-sm);font-size:12px
}
.filters input{flex:1;min-width:120px}
.filters select{min-width:80px}
.filters .filter-count{font-size:11px;color:var(--text2);white-space:nowrap}

.ship-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.ship-card{
  background:var(--bg2);border-radius:var(--radius-sm);padding:10px;
  border:1px solid var(--border);cursor:pointer;transition:all .15s;
  display:flex;flex-direction:column;gap:4px;position:relative;user-select:none
}
.ship-card.ignored{background:var(--bg3);opacity:.6}
.ship-card.tracked{background:rgba(244,180,41,.15);border-color:var(--gold)}
.ship-card:active{transform:scale(.98)}
.ship-card .ship-name{font-size:13px;font-weight:600;color:var(--text)}
.ship-card .ship-meta{font-size:10px;color:var(--text3);display:flex;gap:8px;flex-wrap:wrap}
.ship-card .ship-status{font-size:10px;font-weight:600;padding:2px 6px;border-radius:4px;display:inline-block;margin-top:2px;align-self:flex-start}
.ship-card .ship-status.can{background:rgba(34,197,94,.2);color:var(--green)}
.ship-card .ship-status.partial{background:rgba(244,180,41,.2);color:var(--gold)}
.ship-card .ship-status.no{background:rgba(239,68,68,.2);color:var(--red)}
.ship-card .ship-pct-bar{
  height:3px;background:var(--bg);border-radius:2px;overflow:hidden;margin-top:2px
}
.ship-card .ship-pct-bar .fill{
  height:100%;border-radius:2px;transition:width .3s
}
.ship-card .ship-pct-bar .fill.can{background:var(--green)}
.ship-card .ship-pct-bar .fill.partial{background:var(--gold)}
.ship-card .ship-pct-bar .fill.no{background:var(--red)}
.ship-card .ship-check{position:absolute;top:6px;right:6px;width:22px;height:22px;
  border:2px solid var(--border);border-radius:4px;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;transition:all .15s;cursor:pointer;z-index:2
}
.ship-card .ship-check.selected{border-color:var(--gold);background:var(--gold);color:var(--bg)}
.ship-card.tracked .ship-check{border-color:var(--gold)}
.ship-track-actions{
  display:flex;align-items:center;gap:6px;margin-top:6px;padding-top:6px;
  border-top:1px solid var(--border)
}
.ship-track-actions button{
  background:var(--bg3);border:1px solid var(--border);color:var(--text2);
  border-radius:3px;padding:1px 8px;font-size:14px;font-weight:600;cursor:pointer;line-height:1.5
}
.ship-track-actions button:active{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.ship-track-actions .track-count{font-size:10px;color:var(--text3);flex:1;text-align:center}

.modal-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:100;
  justify-content:center;align-items:center;padding:16px;
  backdrop-filter:blur(4px)
}
.modal-overlay.open{display:flex}
.modal{
  background:var(--card);border-radius:var(--radius);max-width:400px;
  width:100%;max-height:85vh;overflow-y:auto;padding:20px;border:1px solid var(--border);
  box-shadow:var(--shadow);position:relative
}
.modal .close{
  position:absolute;top:12px;right:12px;width:32px;height:32px;
  border:none;background:var(--bg2);color:var(--text2);border-radius:50%;
  font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  line-height:1
}
.modal .close:active{background:var(--bg3)}
.modal h2{font-size:20px;font-weight:700;color:var(--gold);margin-bottom:4px}
.modal .sub{font-size:12px;color:var(--text2);margin-bottom:12px}
.modal .req-table{width:100%;border-collapse:collapse;font-size:13px;margin:8px 0}
.modal .req-table th{text-align:left;padding:6px 8px;color:var(--text3);font-size:11px;font-weight:500;border-bottom:1px solid var(--border)}
.modal .req-table td{padding:6px 8px;border-bottom:1px solid var(--border)}
.modal .req-table .have{color:var(--green)}
.modal .req-table .need{color:var(--red)}
.modal .req-table .met{color:var(--text)}
.modal .modal-actions{display:flex;gap:8px;margin-top:14px}
.modal .modal-actions button{
  flex:1;padding:10px;border:none;border-radius:var(--radius-sm);font-size:13px;
  font-weight:600;cursor:pointer;transition:all .15s
}
.modal .modal-actions button:active{transform:scale(.97)}
.modal .modal-actions .track-btn{background:var(--gold);color:var(--bg)}
.modal .modal-actions .track-btn.active{background:var(--red);color:#fff}
.modal .modal-actions .close-btn{background:var(--bg3);color:var(--text2)}

.progress-grid{display:grid;grid-template-columns:1fr;gap:8px}
.progress-card{
  background:var(--bg2);border-radius:var(--radius-sm);padding:12px;
  border:1px solid var(--border);position:relative;cursor:pointer;user-select:none
}
.progress-card .p-name{font-size:13px;font-weight:600;color:var(--text);margin-bottom:4px}
.progress-card .p-pct{font-size:24px;font-weight:700;color:var(--gold)}
.progress-card .p-bar{height:6px;background:var(--bg);border-radius:3px;overflow:hidden;margin:6px 0}
.progress-card .p-bar .fill{height:100%;border-radius:3px;transition:width .5s;background:linear-gradient(90deg,var(--gold),var(--teal))}
.progress-card .p-bar .fill.done{background:var(--green)}
.progress-card .p-detail{font-size:11px;color:var(--text2);line-height:1.5}
.progress-card .p-actions{position:absolute;top:8px;right:8px;display:flex;gap:3px;align-items:center}
.progress-card .p-remove{
  width:24px;height:24px;border:none;background:rgba(239,68,68,.2);color:var(--red);border-radius:50%;
  font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center
}
.progress-card .p-reorder{display:flex;gap:2px}
.progress-card .p-reorder button{
  width:22px;height:22px;border:none;background:var(--bg3);color:var(--text2);
  border-radius:50%;font-size:10px;cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:all .15s;padding:0
}
.progress-card .p-reorder button:active{background:var(--teal);color:#fff}
.progress-card .p-reorder button:disabled{opacity:.3;cursor:default}
.progress-card .p-rank{
  font-size:10px;font-weight:600;color:var(--text3);
  background:var(--bg3);border-radius:4px;padding:1px 6px;line-height:1.6;flex-shrink:0
}
.progress-card.dragging{opacity:.4;border-style:dashed}
.progress-card.drag-over{border-color:var(--teal);border-style:dashed}

.compare-panel{
  background:var(--bg2);border-radius:var(--radius);padding:12px;margin-top:10px;
  border:1px solid var(--border);overflow-x:auto
}
.compare-panel table{width:100%;border-collapse:collapse;font-size:12px;min-width:400px}
.compare-panel th,.compare-panel td{padding:6px 8px;text-align:left;border-bottom:1px solid var(--border)}
.compare-panel th{color:var(--text3);font-weight:500;font-size:11px}
.compare-panel .highlight{color:var(--gold);font-weight:600}

/* Share modal */
.share-modal{max-width:500px}
.share-actions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}
.share-btn{
  padding:8px 14px;border:1px solid var(--border);background:var(--bg2);
  color:var(--text2);border-radius:var(--radius-sm);font-size:12px;font-weight:600;
  cursor:pointer;flex:1;min-width:0;text-align:center;transition:all .15s
}
.share-btn:active{transform:scale(.97)}
.share-btn.share-native{background:var(--gold);color:var(--bg);border-color:var(--gold)}
.share-preview{
  background:var(--bg);border-radius:var(--radius-sm);padding:12px;
  font-size:11px;color:var(--text2);line-height:1.6;max-height:300px;
  overflow-y:auto;white-space:pre-wrap;font-family:monospace;user-select:text
}

#alert-container{
  position:fixed;top:60px;right:12px;z-index:200;display:flex;flex-direction:column;gap:6px;
  max-width:300px;pointer-events:none
}
.alert-toast{
  background:var(--card);border:1px solid var(--gold);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:12px;color:var(--text);box-shadow:var(--shadow);
  animation:slideIn .3s ease;pointer-events:auto;display:flex;align-items:center;gap:8px
}
.alert-toast .a-icon{font-size:16px}
.alert-toast .a-close{
  margin-left:auto;background:none;border:none;color:var(--text3);cursor:pointer;font-size:14px;padding:2px
}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

.action-flash{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(0,0,0,.85);color:#fff;padding:16px 24px;border-radius:var(--radius);
  font-size:16px;font-weight:600;z-index:300;pointer-events:none;
  animation:fadeOut .8s ease forwards
}
@keyframes fadeOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(.9)}}

.sort-group{display:flex;gap:4px}
.sort-btn{
  padding:4px 8px;border:1px solid var(--border);background:var(--bg2);
  color:var(--text2);border-radius:4px;font-size:10px;cursor:pointer;
  transition:all .15s;font-weight:500
}
.sort-btn.active{background:var(--gold);color:var(--bg);border-color:var(--gold)}

main::-webkit-scrollbar{width:4px}
main::-webkit-scrollbar-track{background:transparent}
main::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

@media(min-width:768px){
  .ship-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .craft-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  main{padding:16px 24px calc(16px + var(--safe-bottom))}
}
@media(min-width:1024px){
  .ship-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
}