:root{
  --bg:#0b0f1a; --panel:#121a2c; --panel2:#0f1729; --panel3:#0b1326;
  --text:#e6ecff; --muted:#9fb0d8; --accent:#4aa3ff; --accent2:#7fff9f;
  --warn:#ffb84a; --bad:#ff6b6b; --good:#6bffda; --line:#243150;
  --chip:#1d2740; --chip2:#111a2f; --shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body{
  margin:0; overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, #18254a, transparent),
    radial-gradient(900px 500px at 110% -20%, #1b2b58, transparent),
    var(--bg);
  color:var(--text); font:14px/1.35 system-ui, -apple-system, Segoe UI, Roboto, Arial;
  padding-bottom:94px;
}
canvas{max-width:100% !important; height:auto !important;}

/* REMOVE inner number spinners */
input[type=number]{appearance:textfield; -moz-appearance:textfield;}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none; margin:0;
}

/* TOP BAR */
.topbar{
  position:sticky; top:0; z-index:50;
  display:grid; grid-template-columns:auto minmax(260px,1fr) auto; gap:12px;
  align-items:center; padding:10px 14px;
  background:linear-gradient(180deg,#0c1428,#0a1022);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:10px;}
.brand-logo{width:34px;height:34px;object-fit:contain;}
.brand-title{font-weight:900; letter-spacing:.4px;}
.brand-sub{font-size:12px;color:var(--muted); margin-top:1px;}

.player-search{display:flex; justify-content:flex-end; gap:8px; align-items:center;}
.search-wrap{position:relative; max-width:520px; width:100%; display:flex; gap:6px;}
#playerSearchInput{
  flex:1; padding:9px 10px; border-radius:10px; border:1px solid var(--line);
  background:#0c142b; color:var(--text); outline:none;
}
.search-results{
  position:absolute; top:42px; left:0; right:0; z-index:100;
  background:#0a1430; border:1px solid #3557a8; border-radius:10px;
  display:none; max-height:300px; overflow:auto;
}
.search-item{
  display:grid; grid-template-columns:42px 1fr auto; gap:10px; align-items:center;
  padding:8px; cursor:pointer; border-bottom:1px dashed #243255;
}
.search-item:last-child{border-bottom:none;}
.search-item:hover{background:#12214a}
.search-thumb{
  width:42px;height:42px;border-radius:8px;overflow:hidden;border:1px solid var(--line);
  background:#0c142b;
}
.search-thumb img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.search-meta{font-size:12px;color:var(--muted);}

/* hamburger visible on desktop too */
.mobile-hamburger{display:inline-flex; font-size:16px; line-height:1; padding:6px 9px;}

/* toolbar desktop only */
.toolbar{
  display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  background:#0b1430; border:1px solid var(--line); padding:6px; border-radius:12px;
}
.toolbar-sep{width:1px; height:26px; background:var(--line); margin:0 2px;}

/* APP GRID */
.app{
  display:grid; grid-template-columns:minmax(320px,420px) 1fr; gap:16px;
  padding:14px; min-height:calc(100vh - 60px);
}



.app.editor-collapsed{
  grid-template-columns:1fr;
}
.app.editor-collapsed .left{
  display:none;
}
.app.editor-collapsed .right{
  grid-column:1 / -1;
}

/* Hide editor button inside stepper grid */
.hide-editor-btn{
  justify-self:end;
  align-self:stretch;
  white-space:nowrap;
}

/* Side editor toggle (desktop only, when collapsed) */

.side-editor-toggle{
  position:fixed;
  top:50%;
  left:0;
  transform:translate(-40%, -50%) rotate(-90deg);
  transform-origin:left center;
  padding:6px 16px;
  font-size:14px;
  font-weight:600;
  font-family:Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
  border-radius:12px;
  z-index:80;
  display:none;
  cursor:pointer;
}
.app.editor-collapsed + .side-editor-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:768px){
  .side-editor-toggle{
    display:none !important;
  }
}

/* Card edit button on player card */
.card-edit-btn-wrap{
  position:absolute;
    top: 10px;
    left: 145px;
    width: 80px;
  transform:translateX(-50%);
  z-index:6;
}
.card-edit-btn{
  font-size:12px;
  padding:5px 16px;
  border-radius:999px;
}
.app.new-player-fade{
  animation:newPlayerFade 0.35s ease-out;
}

@keyframes newPlayerFade{
  from{opacity:0; transform:translateY(6px);}
  to{opacity:1; transform:translateY(0);}
}
.left,.right{
  background:linear-gradient(180deg, var(--panel), var(--panel3));
  border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow);
  padding:12px; min-width:0;
}
.right{display:grid; grid-template-rows:auto 1fr; gap:10px;}

/* STEPPER — 3 top, 2 bottom */
.stepper{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-bottom:8px;
}
.step{
  padding:7px 8px; border-radius:10px;
  background:var(--chip2); border:1px solid var(--line); color:var(--muted);
  display:flex; gap:7px; align-items:center; cursor:pointer; user-select:none;
  transition:.15s ease; font-weight:800; min-width:0;
}
.step.active{background:#162446; color:var(--text); border-color:#2f4b8c;}
.step.done{color:#bfe9ff; border-color:#2a7fbf;}
.step .dot{
  width:20px;height:20px;border-radius:999px; display:grid; place-items:center;
  background:#0e1630;border:1px solid var(--line); font-size:11px;
}
.step.active .dot{background:var(--accent); color:#041327; border-color:transparent;}
.step.done .dot{background:var(--accent2); color:#041327; border-color:transparent;}

.progress{
  height:8px; width:100%; background:#0c142b; border-radius:999px; border:1px solid var(--line);
  overflow:hidden; margin-bottom:8px;
}
.progress>div{height:100%; width:0%; background:linear-gradient(90deg, var(--accent), #7bc2ff); transition:.2s ease;}

.section{display:none; animation:fade .18s ease;}
.section.active{display:block;}
@keyframes fade{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
h2{font-size:18px;margin:8px 0 6px;} h3{font-size:15px;margin:6px 0;color:#d9e2ff;}
.mini{font-size:12px;color:var(--muted);}

.row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.row-3{grid-template-columns:1fr 1fr 1fr;}
.row-3-slimstars{grid-template-columns:.7fr .7fr 1.6fr;}
.subrow{display:flex; gap:6px; align-items:center;}
.subrow input, .subrow select{flex:1;}
.subsep{font-size:12px;color:var(--muted); padding:0 2px;}

.workrate-subrow{display:flex; gap:6px;}
@media (max-width:1200px){
  .workrate-subrow{display:grid; grid-template-columns:1fr 1fr; gap:6px;}
}

label{display:block; font-size:12px; color:var(--muted); margin:8px 0 4px;}
input[type="text"], input[type="number"], select, textarea{
  width:100%; padding:9px 10px; border-radius:9px; border:1px solid var(--line);
  background:#0c142b; color:var(--text); outline:none; transition:.12s ease;
}
textarea{min-height:90px; resize:vertical}
input:focus, select:focus, textarea:focus{border-color:#3a63c9; box-shadow:0 0 0 2px rgba(74,163,255,.15)}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:6px;}
.chip{
  background:var(--chip); border:1px solid var(--line); padding:5px 8px;
  border-radius:999px; font-size:12px; cursor:pointer; transition:.12s ease; white-space:nowrap;
}
.chip.active{background:#1a3566; border-color:#3a63c9; color:white;}
.chip.primary{outline:2px solid #7fff9f;}

/* attributes */
.attr-block{
  background:var(--panel2); border:1px solid var(--line); border-radius:12px;
  padding:10px; margin-top:8px;
}
.group-title{
  display:flex; justify-content:space-between; align-items:center; margin-bottom:6px;
  font-weight:900; letter-spacing:.2px;
}
.pill{
  background:#0b1430; border:1px solid var(--line); padding:3px 7px; border-radius:999px;
  font-size:11px; color:#cbd6ff;
}
.attr-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:8px;}
.attr-item{
  background:var(--chip2); border:1px solid var(--line); border-radius:10px; padding:8px;
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:6px;
  transition:.12s ease;
}
.attr-item:hover{border-color:#3557a8; transform:translateY(-1px);}
.attr-item .name{font-size:12px;color:#cbd6ff; display:flex; align-items:center; gap:6px;}
.num-wrap{display:flex; align-items:center; gap:6px;}
.num-wrap input{
  width:56px; text-align:center; padding:6px 6px; font-weight:900;
  background:#0a1227;
}
.pm-col{display:grid; gap:4px;}
.pm{
  width:26px; height:22px; border-radius:7px; border:1px solid var(--line);
  background:#0b1430; color:#e6ecff; cursor:pointer; font-weight:900;
  display:grid; place-items:center; transition:.12s ease; line-height:1;
}
.pm:hover{border-color:#3a63c9; transform:translateY(-1px);}

/* nav buttons */
.nav{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
.btn{
  padding:9px 12px; background:#111b33; border:1px solid var(--line); color:var(--text);
  border-radius:10px; cursor:pointer; font-weight:700; letter-spacing:.2px;
  transition:.12s ease; display:inline-flex; align-items:center; gap:6px;
}
.btn:hover{transform:translateY(-1px); border-color:#3557a8}
.btn.primary{background:linear-gradient(180deg,#2a66ff,#1f4bd8); border-color:#2a66ff;}
.btn.good{background:linear-gradient(180deg,#1ea86a,#167f52); border-color:#1ea86a;}
.btn.warn{background:linear-gradient(180deg,#ffb84a,#d88a18); border-color:#ffb84a; color:#2a1b00;}
.btn.ghost{background:transparent}
.btn.small{padding:6px 8px; font-size:12px;}

/* RIGHT tabs */
.tabs{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  -ms-overflow-style:none;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{
  display:none;
}

.tab{
  padding:7px 10px; border-radius:10px; border:1px solid var(--line);
  background:#0d1630; color:var(--text); font-weight:800; cursor:pointer;
  white-space:nowrap; flex:0 0 auto;
}
.tab.active{background:#1a3566; border-color:#3a63c9;}
.tabpane{display:none;}
.tabpane.active{display:block;}

/* panels */
.panel{
  background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:10px;
}

/* Center skill map panel on wide screens */
.skill-map-panel{ text-align:center; }
.skill-map-panel canvas{ display:block; margin:0 auto; }
.skill-map-panel .radar-legend{
  max-width:340px; margin:6px auto 0;
}

/* profile layout */
.profile-grid{
  display:grid; grid-template-columns:340px 1fr; gap:10px; align-items:start;
}
.card-wrap{
  display:flex; flex-direction:column; gap:10px;
  justify-content:flex-start; align-items:center; padding-top:4px;
}
.player-card{
  position:relative;
  width:320px; aspect-ratio:2.7/4;
  border-radius:18px; border:1px solid #2a3760;
  background:var(--card-bg, linear-gradient(160deg, #1a2341, #0c1225));
  overflow:hidden;
}
.player-card svg{position:absolute; inset:0; opacity:var(--card-pattern-opacity,.25)}
.card-rating{position:absolute; top:16px; left:16px; font-weight:900; text-shadow:0 4px 10px rgba(0,0,0,.7); z-index:5;}
.card-rating .ovr{font-size:44px; line-height:1;}
.card-rating .pos{font-size:15px; margin-top:2px;}
.card-badges{position:absolute; top:16px; right:12px; display:grid; gap:6px; justify-items:end; z-index:5;}
.badge{background:#0b1430; border:1px solid var(--line); padding:4px 6px; border-radius:8px; font-size:11px;}

.card-photo{
  position:absolute; left:50%; bottom:232px; transform:translateX(-50%);
  width:175px; height:175px; border-radius:14px; overflow:hidden;
  border:2px solid rgba(255,255,255,.12); background:#0c142b; z-index:3;
}
.card-photo img{
  width:100%; height:100%; object-fit:cover;
  object-position:top center; display:block;
}

.card-core{
  position:absolute; left:50%; bottom:122px; transform:translateX(-50%);
  width:96%; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; z-index:2;
}
.core-pill{
  background:rgba(10,18,39,.92); border:1px solid var(--line);
  padding:6px 7px; border-radius:10px; text-align:center; font-weight:900;
  display:grid; gap:2px;
}
.core-pill small{font-size:10px;color:#cbd6ff;font-weight:800;letter-spacing:.6px}

.card-name{
  position:absolute; bottom:70px; width:100%; text-align:center;
  font-size:18px; font-weight:900; color:white; text-shadow:0 2px 8px rgba(0,0,0,.7);
}
.card-meta{
  position:absolute; bottom:16px; width:100%; display:flex; justify-content:center;
  gap:8px; font-size:12px; color:#d4deff; flex-wrap:wrap;
}
.meta-pill{background:rgba(15,25,52,.9); border:1px solid var(--line); padding:4px 8px; border-radius:999px;}

.card-under{width:100%;}
.card-under .under-group{margin-bottom:8px;}
.under-title{
  font-weight:900; font-size:12px; letter-spacing:.4px; text-transform:uppercase;
  color:#d9e2ff; margin-bottom:4px;
}
.under-list{display:flex; flex-wrap:wrap; gap:6px;}
.under-list .tag{
  background:#0b1430; border:1px solid var(--line); padding:3px 6px; border-radius:999px;
  font-size:11px; font-weight:800; color:#cbd6ff;
}

/* radar legend */
.radar-legend{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:6px;
}
.legend-item{
  background:#0b1430; border:1px solid var(--line); padding:6px 8px; border-radius:10px;
  display:flex; justify-content:space-between; font-weight:900;
}

/* heat panel */
.heat-panel svg{
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.35));
  max-width:360px;
  width:100%;
  height:auto;
  margin:0 auto;
  display:block;
}
.zone{cursor:pointer;}
.zone:hover{stroke:#fff; stroke-width:2;}

/* profile top row */
.profile-side{display:grid; gap:10px;}
.profile-toprow{
  display:grid; grid-template-columns:repeat(3,minmax(220px,1fr)); gap:10px;
}
.summary{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.sum{
  background:var(--chip2); border:1px solid var(--line); border-radius:10px; padding:8px;
  display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center;
}
.sum .abbr{font-weight:900; letter-spacing:.5px; color:#cfe1ff;}
.sum .val{font-size:18px; font-weight:900;}
.bar{grid-column:1 / -1; height:6px; background:#0a1430; border:1px solid var(--line); border-radius:999px; overflow:hidden;}
.bar>div{height:100%; width:0%; background:linear-gradient(90deg,#2eccff,#7bffa6);}

/* Detailed Breakdown */
.details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(240px,1fr));
  gap:10px;
}
.detail-group{
  background:linear-gradient(180deg,#0f1833,#0b1326);
  border:1px solid #2a3760;
  border-radius:14px;
  padding:10px 10px 8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
}
.detail-group .group-title{
  padding:6px 8px;
  border-radius:10px;
  background:#0b1430;
  border:1px solid var(--line);
  margin-bottom:8px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
  font-size:12px;
}
.detail-row{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border-bottom:1px solid rgba(36,49,80,0.9);
  border-radius:8px;
}
.detail-row:nth-child(even){ background:rgba(10,18,39,0.5); }
.detail-row:last-child{border-bottom:none}
.detail-row .n{color:#cbd6ff; font-size:12.5px;}
.detail-row .v{font-weight:900; font-size:13.5px; color:#e6ecff;}

/* compare cards */
.compare-panel{display:grid; gap:10px;}
.compare-header{display:flex; justify-content:space-between; align-items:center;}

.compare-cards{
  display:grid;
  grid-template-columns:repeat(4,minmax(170px,1fr));
  gap:12px;
  overflow-x:auto;
  padding-bottom:4px;
  align-items:stretch;
}

/* Mini compare cards */
.compare-mini-card-wrap{position:relative;}
.compare-mini-card{
  background:linear-gradient(180deg,#111b33,#0c142b);
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px;
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
  min-height:240px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.02);
}
.cmc-head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:8px;
  align-items:center;
}
.cmc-ovr{
  font-size:28px;
  font-weight:900;
  line-height:1;
  background:#0b1430;
  border:1px solid var(--line);
  padding:6px 8px;
  border-radius:10px;
  min-width:52px;
  text-align:center;
}
.cmc-name{font-weight:900;}
.cmc-sub{font-size:11px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmc-badges{display:flex;gap:6px;justify-content:flex-end;align-items:center;}
.cmc-badge{
  background:#0b1430;border:1px solid var(--line);
  padding:3px 6px;border-radius:999px;font-size:10px;font-weight:800;color:#cbd6ff;
}

.cmc-photo{
  width:100%;
  display:grid;
  place-items:center;
}
.cmc-photo img{
  width:120px;height:120px;border-radius:12px;object-fit:cover;object-position:top center;
  border:1px solid var(--line); background:#0c142b;
}

.cmc-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:6px;
  margin-top:auto;
}
.cmc-stat{
  background:#0b1430;border:1px solid var(--line);
  padding:6px 4px;border-radius:10px;text-align:center;
  display:grid;gap:2px;
}
.cmc-stat b{font-size:14px;font-weight:900;}
.cmc-stat span{font-size:10px;color:#cbd6ff;font-weight:800;letter-spacing:.5px;}

.cmc-remove{
  position:absolute;
  top:8px; right:8px;
  width:26px; height:26px;
  border-radius:8px;
  background:#0b1430; border:1px solid var(--line);
  color:var(--text); cursor:pointer; font-weight:900;
  display:grid; place-items:center;
}
.cmc-remove:hover{border-color:#3a63c9; transform:translateY(-1px);}

/* compare radar centered */
.compare-radar-panel{ text-align:center; }
.compare-radar-panel canvas{
  display:block; margin:0 auto;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.4));
}
.compare-diffs .diff-pos{color:#7fff9f; font-weight:900;}
.compare-diffs .diff-neg{color:#ff6b6b; font-weight:900;}
.compare-diffs .diff-zero{color:#cbd6ff; font-weight:800;}

/* Modal (library) */
.modal{
  position:fixed; inset:0; z-index:1000;
  background:rgba(2,6,14,.7);
  display:none; place-items:center; padding:18px;
}
.modal[aria-hidden="false"]{display:grid;}
.modal-card{
  width:min(980px, 96vw);
  max-height:86vh;
  background:linear-gradient(180deg,#0e1730,#0a1227);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  display:grid; grid-template-rows:auto auto 1fr;
  overflow:hidden;
}
.modal-header{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 12px; border-bottom:1px solid var(--line);
}
.modal-filters{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  padding:10px 12px; border-bottom:1px solid var(--line);
  background:#0b1430;
}
.modal-list{
  overflow:auto; padding:8px 12px; display:grid; gap:8px;
}
.library-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:10px; align-items:center;
  background:var(--chip2); border:1px solid var(--line); border-radius:12px; padding:8px;
  cursor:pointer; transition:.12s ease;
  position:relative;
}
.library-item:hover{border-color:#3a63c9; transform:translateY(-1px);}
.library-item img{
  width:56px;height:56px;border-radius:10px;object-fit:cover;object-position:top center;border:1px solid var(--line);
}

/* mobile menu modal */
.mobile-menu-card{width:min(520px, 94vw);}
.mobile-menu-list{display:grid; gap:8px; padding:10px 12px;}

/* toast */
.toast{
  position:fixed; left:50%; bottom:110px; transform:translateX(-50%);
  background:#0a1430; border:1px solid #3557a8; color:#e6ecff; padding:8px 10px;
  border-radius:10px; font-size:12px; z-index:9999; display:none;
  box-shadow:0 10px 20px rgba(0,0,0,.6);
}

/* mobile sticky */
.mobile-bar{
  display:block; position:fixed; left:0; right:0; bottom:0; z-index:999;
  background:linear-gradient(180deg,#00000099,#00000099); border-top:1px solid var(--line);
  padding:8px 10px;
  width:100%; max-width:100%; overflow:hidden;
}
.mobile-bar .mb-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  max-width:100%;
}
.mb-photo{
  width:52px; height:52px; border-radius:10px; overflow:hidden; border:1px solid var(--line);
  background:#0c142b; display:grid; place-items:center;
}
.mb-photo img{width:100%; height:100%; object-fit:cover; object-position:top center;}
.mb-core{display:flex; gap:6px; flex-wrap:wrap; font-size:12px;}
.mb-pill{background:#0b1430; border:1px solid var(--line); padding:3px 6px; border-radius:999px; font-weight:800;}
.mb-right{text-align:right; font-size:11px; color:#cbd6ff; display:grid; gap:2px; white-space:nowrap;}

/* responsive */
@media (max-width:1200px){
  .app{grid-template-columns:1fr;}
  .profile-grid{grid-template-columns:1fr;}
  .profile-toprow{grid-template-columns:1fr;}
  .details-grid{grid-template-columns:1fr;}
  .mobile-bar{display:block;}
  .search-wrap{max-width:100%;}
  .search-results{max-height:220px;}
  .toolbar-wrap{display:none;}
  .compare-cards{grid-template-columns:repeat(2,minmax(160px,1fr));}
}

@media (max-width:640px){
  .left .row{grid-template-columns:1fr 1fr;}
  .left .row-3{grid-template-columns:.8fr .8fr 1.4fr;}
  .summary{grid-template-columns:repeat(2,1fr);}
  .modal-filters{grid-template-columns:1fr 1fr;}
  .brand-title, .brand-sub{display:none !important;}
  .modal{padding:10px;}
  .modal-card{width:98vw;}
}

@media (max-width:360px){
  .left .row{grid-template-columns:1fr;}
  .left .row-3{grid-template-columns:1fr;}
}

@media (max-width:420px){
  .modal-filters{grid-template-columns:1fr;}
}



/* v16: Compare mini-card mobile layout (horizontal) */
@media (max-width:480px){
  .compare-cards{
    grid-template-columns:1fr;
    overflow-x:visible;
  }
  .compare-mini-card{
    display:grid;
    grid-template-columns:auto 1fr;
    grid-template-rows:auto auto;
    grid-template-areas:
      "head head"
      "photo stats";
    align-items:flex-start;
    min-height:0;
  }
  .cmc-head{grid-area:head;}
  .cmc-photo{
    grid-area:photo;
    justify-content:flex-start;
  }
  .cmc-photo img{
    width:80px;
    height:80px;
  }
  .cmc-stats{
    grid-area:stats;
    margin-top:0;
  }
}


/* Hover effect for chips */
.chip{
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.chip:hover{
  background:#1d325a;
  transform:translateY(-1px);
  box-shadow:0 0 0 1px rgba(255,255,255,0.25);
  cursor:pointer;
}
.chip.active:hover{
  background:#1f4bd8;
}

/* Small utility buttons */
.btn.tiny{
  font-size:12px;
  padding:2px 6px;
  line-height:1.2;
}

/* Danger button style */
.btn.danger{
  background:linear-gradient(180deg,#ff4a4a,#c21f1f);
  border-color:#ff4a4a;
}

/* Growth log rows */
.log-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:4px 6px;
  border-radius:8px;
}
.log-row:nth-child(odd){
  background:rgba(15,32,70,0.8);
}

/* Library item meta block */
.library-meta{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

/* Confirm modal tweaks */
.modal-card.confirm{
  width:min(420px,90vw);
  max-height:none;
  display:flex;
  flex-direction:column;
}
.modal-card.confirm .modal-body{
  padding:12px 16px;
  font-size:14px;
}
.modal-card.confirm .modal-actions{
  padding:10px 16px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:8px;
  background:#050a18;
}

.app:not(.editor-collapsed) .card-edit-btn-wrap{display:none;}