.content-area {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

#portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 24px;
}

.terminal-shell{
    width:100%;
}

.content-area{
    max-width:1400px;
    margin:0 auto;
    padding:20px;
}

.portfolio-card {
  background: rgba(255,255,255,0.03);
  padding: 14px;
  border-radius: 14px;
  transition: 0.2s ease;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}

.portfolio-card:hover {
  transform: translateY(-6px);
  background: rgba(255,255,255,0.07);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.portfolio-image-wrap {
  position: relative;
}

.portfolio-image-wrap img {
  width: 100%;
  border-radius: 10px;
}

.qty-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: black;
  color: white;
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 8px;
}

.portfolio-info {
  margin-top: 10px;
}

.portfolio-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.portfolio-market {
  font-size: 14px;
}

.portfolio-gain {
  font-size: 14px;
  font-weight: bold;
}

#portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 28px;
}

#search-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.search-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-bottom: 1px solid #1c2430;
  transition: background 0.2s ease;
}

.search-card:hover {
  background: rgba(255,255,255,0.03);
}

.search-card img {
  width: 120px;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.4);
}

.search-card-info {
  flex: 1;
}

.search-card-name {
  font-size: 16px;
  font-weight: 600;
}

.search-card-set {
  font-size: 13px;
  opacity: 0.6;
}

.add-btn {
  background: #00ff88;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.add-btn:hover {
  transform: scale(1.05);
}

#portfolio-search {
  width: 100%;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 16px;
  background: rgba(255,255,255,0.05);
  color: #fff;
  outline: none;
}

#portfolio-search::placeholder {
  color: rgba(255,255,255,0.5);
}

#portfolio-search:focus {
  border-color: #00ff88;
  box-shadow: 0 0 0 2px rgba(0,255,136,0.2);
}

.setsplain-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.setsplain-modal-content {
  background: #111827;
  padding: 30px;
  border-radius: 14px;
  width: 320px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-field {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.modal-field input {
  padding: 8px;
  border-radius: 6px;
  border: none;
  margin-top: 5px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.modal-actions button {
  padding: 8px 14px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

#modal-confirm {
  background: #10b981;
  color: white;
}

#modal-cancel {
  background: #374151;
  color: white;
}

.modal-input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #2e3b4e;
  background: #0f1b2d;
  color: #fff; /* 🔥 THIS FIXES IT */
  font-size: 16px;
}

.modal-input::placeholder {
  color: rgba(255,255,255,0.5);
}

.modal-input:focus {
  outline: none;
  border-color: #1dd1a1;
}

/* =========================================
   PORTFOLIO MODAL
========================================= */

#portfolio-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 9999;
}

#portfolio-modal-overlay.active {
  opacity: 1;
}

#portfolio-modal {
  background: #0f1b2d;
  padding: 28px;
  border-radius: 12px;
  width: 340px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  transform: translateY(20px);
  transition: transform .2s ease;
  color: #fff;
}

#portfolio-modal-overlay.active #portfolio-modal {
  transform: translateY(0);
}

#portfolio-modal h2 {
  margin-bottom: 16px;
}

#portfolio-modal label {
  font-size: 14px;
  opacity: .7;
  display: block;
  margin-top: 12px;
  margin-bottom: 6px;
}

#portfolio-modal input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #2e3b4e;
  background: #111e32;
  color: #fff;
  font-size: 16px;
}

#portfolio-modal input::placeholder {
  color: rgba(255,255,255,.4);
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
}

#modal-cancel {
  background: #2e3b4e;
  border: none;
  padding: 10px 14px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

#modal-submit {
  background: #1dd1a1;
  border: none;
  padding: 10px 14px;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

#modal-submit:disabled {
  opacity: .6;
  cursor: not-allowed;
}

#modal-message {
  margin-top: 12px;
  font-size: 14px;
}

/* Card add highlight */
.card-added {
  animation: cardFlash 0.8s ease;
}

@keyframes cardFlash {
  0% {
    box-shadow: 0 0 0 rgba(29,209,161,0);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 30px rgba(29,209,161,0.6);
    transform: scale(1.03);
  }
  100% {
    box-shadow: 0 0 0 rgba(29,209,161,0);
    transform: scale(1);
  }
}

.lot-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid #222;
}

.archive-lot-btn {
  background:#ff4d4d;
  border:none;
  color:#fff;
  padding:5px 10px;
  border-radius:4px;
  cursor:pointer;
}

.archive-lot-btn:hover {
  background:#ff0000;
}

.gain-positive {
  color: #00ff88;
}

.gain-negative {
  color: #ff4d4d;
}

.card-detail-header{
display:flex;
gap:30px;
align-items:center;
margin-bottom:30px;
}

.card-large{
width:260px;
border-radius:12px;
box-shadow:0 0 20px rgba(0,0,0,.5);
}

.card-price{
font-size:22px;
margin-top:6px;
}

.gain-positive{
color:#00ff99;
}

.gain-negative{
color:#ff5a5a;
}

/* Portfolio Search Layout */

.portfolio-title{
color:#ffffff;
margin-bottom:10px;
}

.portfolio-search-wrap{
position:relative;
max-width:700px;
margin-bottom:20px;
}

.portfolio-search,
.card-search{
width:100%;
padding:12px;
margin-bottom:8px;
background:#0b1320;
border:1px solid #2c3a55;
color:#fff;
border-radius:6px;
font-size:14px;
outline:none;
}

.portfolio-search::placeholder,
.card-search::placeholder{
color:#8aa0c8;
}

/* Search Results Dropdown */

.card-search-results{
position:absolute;
top:90px;
width:100%;
background:#0b1320;
border:1px solid #2c3a55;
border-radius:6px;
max-height:300px;
overflow-y:auto;
z-index:1000;
}

.search-card{
display:flex;
align-items:center;
gap:10px;
padding:10px;
cursor:pointer;
border-bottom:1px solid #1d2a45;
}

.search-card:hover{
background:#111c32;
}

.search-card img{
width:42px;
border-radius:4px;
}

.search-card-info{
color:#fff;
font-size:13px;
}

.search-empty{
padding:10px;
color:#8896b5;
}

.card-search-results{
position:absolute;
top:90px;
left:0;
width:100%;
background:#0b1320;
border:1px solid #2c3a55;
border-radius:6px;
max-height:300px;
overflow-y:auto;
z-index:9999;
}

.sets-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:16px;
}

.set-card {
  background:#0f172a;
  padding:16px;
  border-radius:10px;
  cursor:pointer;
  transition:.15s;
}

.set-card:hover {
  background:#1e293b;
}

.set-title {
  font-weight:600;
  margin-bottom:6px;
}

.set-cards-grid {
display:grid;
grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
gap:16px;
}

.set-card-tile {
background:#0f172a;
padding:10px;
border-radius:10px;
text-align:center;
cursor:pointer;
}

.set-card-tile img {
width:100%;
border-radius:8px;
}

.set-card-name {
font-size:13px;
margin-top:6px;
}

.set-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:18px;
  margin-top:20px;
}

.set-card-item{
  background:#0b1320;
  border-radius:10px;
  padding:12px;
  text-align:center;
  cursor:pointer;
  transition:transform .15s ease;
}

.set-card-item:hover{
  transform:scale(1.05);
}

.set-card-item img{
  width:100%;
  border-radius:6px;
}

.set-card-name{
  font-weight:600;
  margin-top:6px;
}

.chase-grid{
display:grid;
grid-template-columns:repeat(auto-fill,140px);
gap:20px;
margin-bottom:40px;
}

.chase-card img{
width:100%;
border-radius:6px;
}

.chase-name{
font-size:13px;
margin-top:5px;
}

#strong-sets{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:16px;
  margin-bottom:40px;
}

.set-strength{
  background:#0b1320;
  border-radius:10px;
  padding:14px;
  cursor:pointer;
  transition:all .2s;
}

.set-strength:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.4);
}

.set-strength-name{
  font-weight:600;
  font-size:14px;
}

.set-strength-score{
  color:#4da6ff;
  margin-top:4px;
}

.set-overview{
display:flex;
gap:40px;
margin-bottom:30px;
}

.overview-stat{
background:#0b1320;
padding:16px 22px;
border-radius:10px;
}

.value-lg{
font-size:22px;
font-weight:600;
}

.card-detail-header{
display:flex;
gap:30px;
margin-bottom:30px;
}

.card-image{
width:240px;
border-radius:12px;
}

.card-meta{
display:flex;
flex-direction:column;
gap:10px;
}

.card-price{
font-size:24px;
font-weight:bold;
}

.add-card-btn{
padding:10px 18px;
background:#00ff99;
border:none;
border-radius:6px;
cursor:pointer;
}

/* portfolio header */

.portfolio-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px;
}

/* search box */

.portfolio-search{
position:relative;
width:320px;
}

/* search input */

.card-search{
width:100%;
padding:8px 10px;
background:#0e1625;
border:1px solid #2a3c5f;
border-radius:6px;
color:#fff;
}

/* dropdown */

#search-results{

position:absolute;
top:38px;
left:0;

width:100%;
max-height:420px;

overflow-y:auto;

background:#0f1727;
border:1px solid #2a3c5f;
border-radius:8px;

z-index:500;

}

/* result row */

.search-result{

display:flex;
gap:10px;

padding:8px;
cursor:pointer;

align-items:center;

border-bottom:1px solid rgba(255,255,255,.05);

}

.search-result:hover{
background:#18233b;
}

/* card thumbnail */

.search-result img{

width:36px;
height:50px;

object-fit:cover;

border-radius:4px;

}

/* text */

.search-name{
font-size:14px;
font-weight:600;
}

.search-set{
font-size:11px;
color:#8ea3c9;
}

.nav-search{
  position:relative;
}

#card-search{
  width:240px;
  padding:8px;
  background:#0b1220;
  border:1px solid #223;
  color:white;
  border-radius:6px;
}

#search-results{
  position:absolute;
  top:36px;
  width:260px;
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:8px;
  max-height:400px;
  overflow-y:auto;
  z-index:1000;
}

.search-result{
  display:flex;
  gap:10px;
  padding:8px;
  cursor:pointer;
}

.search-result:hover{
  background:#1e293b;
}

.search-result img{
  width:40px;
}

.portfolio-search{
  margin-bottom:20px;
  position:relative;
  max-width:400px;
}

#card-search{
  width:100%;
  padding:10px;
  background:#0b1220;
  border:1px solid #223;
  color:white;
  border-radius:6px;
}

#search-results{
  position:absolute;
  width:100%;
  background:#0f172a;
  border:1px solid #1e293b;
  border-radius:8px;
  max-height:400px;
  overflow-y:auto;
  z-index:1000;
}

.search-result{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
}

.search-result img{
  width:40px;
}

.search-actions{
  margin-left:auto;
  display:flex;
  gap:6px;
}

.search-actions button{
  background:#1e293b;
  border:none;
  color:white;
  padding:4px 8px;
  border-radius:4px;
  cursor:pointer;
}

.nav-search {
position:relative;
}

#search-results{
position:absolute;
top:40px;
left:0;
background:#111;
width:360px;
z-index:1000;
}

.nav-search-container{
width:100%;
display:flex;
justify-content:center;
margin-top:20px;
}

#card-search{
width:420px;
}

#search-results{

position:absolute;
top:60px;
left:0;
right:0;

background:#0f0f0f;
border-bottom:1px solid #333;

max-height:420px;
overflow:auto;

z-index:999;

}

.search-card{

display:grid;
grid-template-columns:60px 1fr auto;
gap:10px;
align-items:center;

padding:8px;
border-bottom:1px solid #222;

}

.search-card img{

width:60px;
border-radius:6px;

}

.nav-search{
  position:relative;
}

#search-results{

position:absolute;
top:42px;
right:0;

width:420px;

background:#0e1117;
border:1px solid #2a2f3a;

max-height:500px;
overflow:auto;

border-radius:8px;

z-index:9999;

}

.global-search{

width:520px;
margin:20px auto;
position:relative;

}

#card-search{

width:100%;
padding:12px;
font-size:16px;

background:#0f172a;
border:1px solid #2e3440;
border-radius:8px;

color:white;

}

#search-results{

position:absolute;
top:52px;
left:0;
right:0;

background:#0b0f18;

border:1px solid #2a2f3a;
border-radius:10px;

max-height:520px;
overflow:auto;

z-index:9999;

}

.topbar{

display:flex;
align-items:center;
justify-content:space-between;

padding:16px 28px;

}

.nav-links{

display:flex;
align-items:center;
gap:14px;

font-size:15px;

}

.nav-links a{

color:#cbd5e1;
text-decoration:none;

transition:color .15s ease;

}

.nav-links a:hover{

color:#ffffff;

}

.nav-divider{

opacity:.35;

}

.logo{

font-weight:700;
font-size:20px;
letter-spacing:.5px;

}

.topbar{

max-width:1200px;
margin:0 auto;

}

/* SEARCH DROPDOWN */

#search-results{

position:absolute;
top:54px;
left:0;
right:0;

background:#0b0f18;
border:1px solid #2a2f3a;
border-radius:10px;

max-height:520px;
overflow:auto;

z-index:9999;

box-shadow:0 10px 30px rgba(0,0,0,.5);

}


/* INDIVIDUAL RESULT */

.search-result{

display:flex;
align-items:center;

gap:12px;

padding:10px 12px;

border-bottom:1px solid #1f2633;

transition:background .15s ease;

}

.search-result:hover{

background:#121826;

}


/* CARD IMAGE */

.search-result img{

width:48px;
height:68px;

object-fit:cover;

border-radius:4px;

box-shadow:0 3px 6px rgba(0,0,0,.4);

}


/* TEXT AREA */

.search-meta{

flex:1;

display:flex;
flex-direction:column;

}

.search-name{

font-weight:600;
font-size:14px;

color:white;

}

.search-set{

font-size:12px;

color:#8b9bb4;

}


/* ACTION BUTTONS */

.search-actions{

display:flex;
gap:6px;

}

.search-actions button{

background:#1e293b;
border:none;

padding:6px 10px;

border-radius:6px;

color:#dbeafe;

font-size:12px;

cursor:pointer;

transition:background .15s ease;

}

.search-actions button:hover{

background:#334155;

}
.search-result:hover{

background:#131b2a;
cursor:pointer;

}

/* Search dropdown container */
#search-results{
  position:absolute;
  top:100%;
  left:0;
  right:0;
  max-width:420px;
  margin:auto;
  background:#071422;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,0.4);
  z-index:1000;
}

/* Each search row */
.search-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

/* CARD IMAGE SIZE */
.search-item img{
  width:60px;
  height:auto;
  border-radius:6px;
}

/* Info area */
.search-info{
  flex:1;
}

.search-name{
  font-size:14px;
  font-weight:600;
}

.search-number{
  font-size:12px;
  opacity:0.7;
}

/* Buttons */
.search-actions button{
  margin-left:6px;
  padding:4px 8px;
  font-size:12px;
}

.portfolio-chart{

  width:100%;
  max-width:650px;
  margin:30px auto;

  background:#071422;
  padding:20px;
  border-radius:12px;

}

.portfolio-chart canvas{

  width:100% !important;
  height:320px !important;

}

/* Portfolio Header */

.portfolio-header-inner{

  max-width:900px;
  margin:30px auto;

}

.portfolio-stats{

  display:flex;
  justify-content:center;
  gap:80px;

  margin-bottom:20px;

}

.stat-block{

  text-align:center;

}

.portfolio-chart-header{

  background:#071422;

  padding:20px;
  border-radius:12px;

}

.portfolio-chart-header canvas{

  width:100% !important;
  height:240px !important;

}

.portfolio-header-inner{

  max-width:520px;
  margin:30px auto 10px auto;
  text-align:center;

}

.portfolio-stats{

  display:flex;
  justify-content:center;
  gap:60px;

  margin-bottom:15px;

}

.stat-block{

  text-align:center;

}

.portfolio-chart-header{

  background:#071422;
  padding:14px 20px;
  border-radius:10px;

}

.portfolio-chart-header canvas{

  width:100% !important;
  height:180px !important;

}

/* Portfolio Header */

.portfolio-header{

  max-width:520px;
  margin:20px auto;
  text-align:center;

}

.portfolio-main{

  display:flex;
  justify-content:center;
  align-items:center;
  gap:15px;

  margin-bottom:6px;

}

.portfolio-value{

  font-size:32px;
  font-weight:700;

}

.portfolio-change{

  font-size:20px;
  font-weight:600;

}

.portfolio-sub{

  font-size:14px;
  color:#aaa;

  margin-bottom:12px;

}

.portfolio-chart-box{

  background:#071422;
  border-radius:10px;

  padding:12px;

}

.portfolio-chart-box canvas{

  height:160px !important;
  width:100% !important;

}

.portfolio-chart-box {

  max-width:600px;
  margin:20px auto;

  background:#071422;
  border-radius:12px;

  padding:16px;

}

.portfolio-chart-box canvas {

  height:220px !important;
  width:100% !important;

}

.set-card-actions{
  display:flex;
  gap:8px;
  margin-top:8px;
}

.btn-view{
  background:#1e293b;
  border:1px solid #475569;
  color:white;
  padding:6px 10px;
  border-radius:6px;
  cursor:pointer;
}

.btn-view:hover{
  background:#334155;
}

.btn-add{
  background:#22c55e;
  border:none;
  color:white;
  padding:6px 12px;
  border-radius:6px;
  cursor:pointer;
}

.btn-add:hover{
  background:#16a34a;
}

.ps-legacy-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.7);
  justify-content:center;
  align-items:center;
  z-index:1000;
}

.ps-legacy-modal-content{
  background:#0f172a;
  padding:24px;
  border-radius:10px;
  width:320px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ps-legacy-modal-modal input{
  padding:8px;
  border-radius:6px;
  border:1px solid #334155;
  background:#020617;
  color:white;
}

.ps-legacy-modal-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
}

.ps-legacy-modal-modal-select{
  background:#0f172a;
  color:white;
  border:1px solid #334155;
}

.ps-legacy-modal-modal-select option{
  background:white;
  color:black;
}

.ps-legacy-modal-modal-select {
  width:100%;
  padding:8px;
  border-radius:6px;
  background:#0b1a2b;
  color:white;
  border:1px solid #2a3c55;
}

.modal-select option{
  background:white;
  color:black;
}

.modal-select {
width:100%;
padding:8px;
border-radius:6px;
background:#0b1a2b;
color:#ffffff;
border:1px solid #2a3c55;
}

.modal-select option{
background:#ffffff;
color:#000000;
}

.modal-select:focus{
outline:none;
border-color:#3b82f6;
}

.modal-select {
  width:100%;
  padding:10px;
  border-radius:6px;
  background:#0f1b2e;
  color:#ffffff;
  border:1px solid #334155;
  appearance:none;
}

.modal-select:focus{
  outline:none;
  border-color:#3b82f6;
}

.modal-select {
  width:100%;
  padding:10px;
  border-radius:6px;
  background:#0b1a2b;
  color:#ffffff;
  border:1px solid #2a3c55;
  font-size:14px;
}

.modal-select option{
  background:#0b1a2b;
  color:#ffffff;
}

.owned-container{
position:absolute;
bottom:6px;
right:6px;
display:flex;
flex-direction:column;
gap:3px;
}

.owned-badge{
background:#0b1a2b;
border:1px solid #2a3c55;
color:#fff;
font-size:11px;
padding:2px 6px;
border-radius:4px;
}

.set-card-image{
position:relative;
}

.portfolio-image{
  position:relative;
}

.qty-badge{
  position:absolute;
  top:6px;
  right:6px;
  background:#22c55e;
  color:white;
  font-weight:700;
  font-size:12px;
  padding:2px 6px;
  border-radius:6px;
}

.portfolio-edit-btn{

  margin-top:6px;
  padding:4px 10px;

  font-size:12px;

  background:#1f2937;
  color:#fff;

  border:1px solid #374151;
  border-radius:6px;

  cursor:pointer;
}

.portfolio-edit-btn:hover{
  background:#374151;
}

.set-pack{
  width:120px;
  height:auto;
  margin-bottom:10px;
  transition:transform .2s ease;
}

.set-card:hover .set-pack{
  transform:scale(1.05);
}

.set-card img {
  width: 120px;
  height: auto;
  max-height: 160px;
  object-fit: contain;
  display: block;
  margin: 0 auto 10px;
}

.set-box{

  width:140px;
  height:auto;

  margin-bottom:10px;

  transition:transform .2s ease;

}

.set-card:hover .set-box{

  transform:scale(1.05);

}

.set-preview{

  width:120px;
  height:auto;

  border-radius:8px;

  margin-bottom:10px;

}

.set-card:hover{

  transform:translateY(-3px);
  box-shadow:0 8px 20px rgba(0,0,0,.4);

}

.sets-grid{

  display:grid;

  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));

  gap:20px;

}

.movers-block{
margin-bottom:30px;
}

.mover{
display:flex;
align-items:center;
gap:10px;
margin-bottom:6px;
}

.mover img{
width:32px;
height:32px;
object-fit:cover;
}

.mover.up b{
color:#00c853;
}

.mover.down b{
color:#ff5252;
}

#market-movers{
display:flex;
gap:40px;
margin-bottom:20px;
}

.movers-block{
flex:1;
}

.mover{
display:flex;
align-items:center;
gap:8px;
margin-bottom:6px;
font-size:14px;
}

.mover img{
width:28px;
height:28px;
}

.mover.up b{
color:#00c853;
}

.mover.down b{
color:#ff5252;
}

.market-spotlight{
display:flex;
align-items:center;
gap:25px;
margin-bottom:20px;
}

.spotlight-image{
width:180px;
}

.spotlight-name{
font-size:22px;
font-weight:600;
}

.spotlight-label{
color:#aaa;
font-size:13px;
text-transform:uppercase;
}

.spotlight-change{
font-size:18px;
color:#00c853;
}

h2{
color:#e8f2ff;
font-weight:600;
margin-top:35px;
margin-bottom:15px;
border-bottom:1px solid rgba(255,255,255,0.08);
padding-bottom:6px;
}

h3{
color:#dbeafe;
font-weight:500;
margin-bottom:10px;
}

.market-spotlight{
display:flex;
align-items:center;
gap:28px;
margin-bottom:30px;
}

.spotlight-image{
width:170px;
border-radius:6px;
box-shadow:0 6px 20px rgba(0,0,0,0.45);
}

.spotlight-meta{
display:flex;
flex-direction:column;
gap:8px;
}

.spotlight-label{
font-size:12px;
letter-spacing:.08em;
text-transform:uppercase;
color:#8fa8c9;
}

.spotlight-name{
font-size:26px;
font-weight:600;
color:#ffffff;
}

.spotlight-change{
font-size:18px;
font-weight:600;
color:#22c55e;
}

/* ==============================
TERMINAL DASHBOARD
============================== */

.terminal-dashboard{
max-width:1200px;
margin:auto;
padding:30px 20px;
font-family:monospace;
}

.terminal-header{
font-size:22px;
letter-spacing:2px;
margin-bottom:20px;
color:#6cc6ff;
}

.terminal-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-bottom:30px;
}

.terminal-panel{
background:#081525;
border:1px solid rgba(255,255,255,0.08);
padding:18px;
border-radius:8px;
}

.terminal-title{
font-size:13px;
letter-spacing:1px;
color:#8ab4ff;
margin-bottom:10px;
}

.terminal-row{
display:flex;
justify-content:space-between;
padding:4px 0;
font-size:14px;
}

.gain{
color:#3cff9b;
}

.loss{
color:#ff6b6b;
}

.terminal-chart{
background:#081525;
border:1px solid rgba(255,255,255,0.08);
padding:20px;
border-radius:8px;
}

/* =====================================
POKESPLAIN TERMINAL UI
===================================== */

.terminal-dashboard{
max-width:1200px;
margin:auto;
padding:30px 20px;
font-family:"Courier New",monospace;
position:relative;
}

/* scanline background */

.terminal-dashboard::before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:repeating-linear-gradient(
0deg,
rgba(255,255,255,0.02),
rgba(255,255,255,0.02) 1px,
transparent 1px,
transparent 3px
);
pointer-events:none;
}

/* header */

.terminal-header{
font-size:22px;
letter-spacing:3px;
margin-bottom:25px;
color:#5fcfff;
text-shadow:0 0 8px rgba(0,180,255,.6);
}

/* grid */

.terminal-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:20px;
margin-bottom:30px;
}

/* panels */

.terminal-panel{
background:#081525;
border:1px solid rgba(120,170,255,0.15);
padding:18px;
border-radius:6px;
box-shadow:
0 0 10px rgba(0,120,255,.15),
inset 0 0 20px rgba(0,0,0,.5);
transition:all .25s ease;
}

.terminal-panel:hover{
border-color:#3ea6ff;
box-shadow:
0 0 15px rgba(0,120,255,.4),
inset 0 0 25px rgba(0,0,0,.7);
}

/* panel titles */

.terminal-title{
font-size:12px;
letter-spacing:2px;
color:#6da8ff;
margin-bottom:10px;
text-transform:uppercase;
}

/* rows */

.terminal-row{
display:flex;
justify-content:space-between;
padding:5px 0;
font-size:14px;
border-bottom:1px dotted rgba(255,255,255,0.05);
}

.terminal-row:last-child{
border-bottom:none;
}

/* gain / loss */

.gain{
color:#2aff9a;
text-shadow:0 0 6px rgba(0,255,150,.5);
}

.loss{
color:#ff4c6a;
text-shadow:0 0 6px rgba(255,50,50,.5);
}

/* chart container */

.terminal-chart{
background:#081525;
border:1px solid rgba(120,170,255,0.15);
padding:20px;
border-radius:6px;
box-shadow:
0 0 10px rgba(0,120,255,.15),
inset 0 0 20px rgba(0,0,0,.5);
}

/* terminal boot animation */

.terminal-dashboard{
animation:terminalBoot .6s ease-out;
}

@keyframes terminalBoot{

0%{
opacity:0;
transform:translateY(15px);
}

100%{
opacity:1;
transform:translateY(0);
}

}

.market-ticker{
  width:100%;
  overflow:hidden;
  white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,0.05);
  margin-bottom:20px;
}

#ticker-track{
  display:flex;
  gap:40px;
  animation:tickerScroll 30s linear infinite;
}

.ticker-item{
  color:#9fd4ff;
  font-size:14px;
  letter-spacing:1px;
}

@keyframes tickerScroll{
  0% { transform:translateX(100%); }
  100% { transform:translateX(-100%); }
}

.terminal-dashboard{
  max-width:1200px;
  margin:40px auto;
}

.terminal-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:20px;
}

.terminal-panel{
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(80,180,255,0.15);
  border-radius:10px;
  padding:20px;
}

.terminal-panel{
  background:rgba(5,15,30,0.65);
  border:1px solid rgba(80,180,255,0.15);
  border-radius:10px;
  padding:20px;

  box-shadow:
    0 0 10px rgba(0,150,255,0.15),
    inset 0 0 20px rgba(0,100,255,0.05);

  transition:all .25s ease;
}

.terminal-panel:hover{
  border-color:#4da6ff;
  box-shadow:
    0 0 18px rgba(77,166,255,0.35),
    inset 0 0 20px rgba(77,166,255,0.1);
}

.flash-up{
  animation:flashGreen 0.8s ease;
}

.flash-down{
  animation:flashRed 0.8s ease;
}

@keyframes flashGreen{
  0%{ background:rgba(0,255,120,0.35); }
  100%{ background:transparent; }
}

@keyframes flashRed{
  0%{ background:rgba(255,60,60,0.35); }
  100%{ background:transparent; }
}

.ticker-up{
  color:#34ff9c;
}

.ticker-down{
  color:#ff5c5c;
}

.ticker-up{
  color:#00ff9c;
}

.ticker-down{
  color:#ff4d6d;
}

.ticker-item{
  margin-right:28px;
}

.terminal-chart {
  height:260px;
  padding:20px;
}

#marketChart{
  width:100% !important;
  height:200px !important;
}

/* PMI chart fix */

.terminal-chart{
  height:260px;
  padding:20px;
}

#marketChart{
  width:100% !important;
  height:200px !important;
}

.ticker-up{
  color:#00ffa6;
}

.ticker-down{
  color:#ff4d6d;
}

.terminal-card{
display:flex;
align-items:center;
gap:8px;
}

.terminal-thumb{
width:28px;
height:38px;
border-radius:3px;
box-shadow:0 0 6px rgba(0,255,200,.4);
}

.terminal-row .loss + .terminal-thumb,
.terminal-thumb.loss{
box-shadow:0 0 6px rgba(255,80,80,.5);
}

.terminal-card{
  display:flex;
  align-items:center;
  gap:10px;
}

.terminal-thumb{
  width:28px;
  height:38px;
  object-fit:cover;
  border-radius:3px;
}

.terminal-title{
  color:#7fd7ff;
  text-shadow:0 0 8px rgba(0,200,255,0.6);
}

.terminal-row{
display:flex;
justify-content:space-between;
padding:6px 0;
border-bottom:1px solid rgba(0,200,255,0.05);
transition:all .2s;
}

.terminal-row:hover{
background:rgba(0,200,255,0.04);
}

.analytics-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
  margin-top:10px;
}

.metric{
  display:flex;
  flex-direction:column;
  font-size:14px;
}

/* ===============================
   ANALYTICS METRIC CARDS
=============================== */

.analytics-grid{

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:20px;

}

.metric-card{

  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.08);
  padding:18px;
  border-radius:8px;

}

.metric-title{

  font-size:12px;
  color:#8aa4c0;
  margin-bottom:6px;
  text-transform:uppercase;
  letter-spacing:1px;

}

.metric-value{

  font-size:20px;
  font-weight:600;
  color:white;

}

.card-info-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:10px;
}

.card-info-grid span{
  font-size:12px;
  opacity:.6;
}

.card-info-grid div{
  font-weight:500;
}

.card-header{
  display:flex;
  gap:32px;
  align-items:flex-start;
  margin-bottom:25px;
}

.card-detail-image{
  width:240px;
  border-radius:8px;
}

.card-detail-meta{
  flex:1;
}

.analytics-block{
  margin-top:20px;
}

#priceChart{
  max-height:320px;
}

.analytics-grid{
  display:grid;
  grid-template-columns:repeat(3, 260px);
  gap:18px;
}

.analytics-block{
  max-width:900px;
}

#priceChart{
  height:320px !important;
}

.chart-container{
  max-width:900px;
  margin:40px auto;
  background:rgba(255,255,255,0.02);
  padding:20px;
  border-radius:8px;
}

.analytics-block{
  max-width:900px;
  margin:40px auto 60px auto;
}

.analytics-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}

.analytics-block{
  max-width:900px;
  margin:40px auto 60px auto;
  padding:10px 0;
}

.market-snapshot{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:20px;
}

.snapshot-card{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  padding:12px;
}

.snapshot-title{
  font-size:12px;
  opacity:.6;
  margin-bottom:4px;
}

.snapshot-value{
  font-size:16px;
  font-weight:600;
}

.alert-panel{
  margin:40px auto;
  max-width:900px;
}

.alert-controls{
  display:flex;
  gap:20px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.alert-field{
  display:flex;
  flex-direction:column;
}

.alert-field label{
  font-size:12px;
  color:#aaa;
  margin-bottom:6px;
}

.alert-field input,
.alert-field select{
  background:#111;
  border:1px solid rgba(255,255,255,0.15);
  color:#fff;
  padding:10px;
  border-radius:6px;
  min-width:160px;
}

.alert-btn{
  background:#00ffa6;
  color:#000;
  border:none;
  padding:10px 18px;
  border-radius:6px;
  cursor:pointer;
  font-weight:600;
}

.alert-btn:hover{
  opacity:0.9;
}

.ticker-item{
  margin-right:30px;
  white-space:nowrap;
}

.ticker-up{
  color:#00ff9c;
}

.ticker-down{
  color:#ff4d6d;
}

.ticker-card{
  display:flex;
  flex-direction:column;
  margin-right:30px;
  line-height:1.1;
}

.ticker-name{
  font-weight:600;
}

.ticker-number{
  font-size:11px;
  opacity:0.6;
}

.ticker-up{
  color:#00ff9c;
  font-size:12px;
}

.ticker-down{
  color:#ff4d6d;
  font-size:12px;
}

.mover-card{
    display:flex;
    flex-direction:column;
}

.mover-number{
    font-size:11px;
    opacity:0.6;
}

.set-card-item{
  transition:transform .15s ease, box-shadow .15s ease;
  cursor:pointer;
}

.set-card-item:hover{
  transform:translateY(-6px) scale(1.04);
  box-shadow:0 18px 40px rgba(0,0,0,.6);
  z-index:5;
}

.set-filter-bar{
  display:flex;
  gap:10px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.set-filter{
  padding:6px 14px;
  background:#1b1b1b;
  border:1px solid #333;
  color:#ccc;
  cursor:pointer;
  border-radius:6px;
}

.set-filter.active{
  background:#00ffa6;
  color:#000;
}

.set-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.rarity-badge{
  position:absolute;
  top:6px;
  left:6px;

  background:#111;
  color:#fff;

  font-size:11px;
  font-weight:700;

  padding:2px 6px;
  border-radius:6px;

  z-index:5;
}

.set-card-image{
  position:relative;
}

.watch-btn{

background:#00e5a8;
color:#000;
padding:8px 14px;
border-radius:6px;
font-weight:600;
border:none;
cursor:pointer;
margin-left:10px;

}

.watch-btn:hover{

background:#00ffbf;

}

.sets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:22px;
}

.set-card{
  position:relative;
  background:#111;
  border-radius:12px;
  overflow:hidden;
  cursor:pointer;
  transition:all .18s ease;
  border:1px solid #1f1f1f;
}

.set-card:hover{
  transform:translateY(-4px);
  border-color:#3a3a3a;
  box-shadow:0 12px 30px rgba(0,0,0,.6);
}

.set-box{
  width:100%;
  height:210px;
  object-fit:contain;
  background:#000;
  padding:14px;
}

.set-card::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:90px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,.85),
    rgba(0,0,0,0)
  );
}

.set-name{
  position:absolute;
  bottom:65px;
  left:14px;
  right:14px;
  font-size:15px;
  font-weight:600;
  color:#fff;
  letter-spacing:.4px;
}

.set-completion{
  position:absolute;
  bottom:12px;
  left:14px;
  right:14px;
  font-size:12px;
  color:#aaa;
}

.completion-bar{
  height:6px;
  background:#222;
  border-radius:6px;
  overflow:hidden;
  margin-top:6px;
}

.completion-fill{
  height:100%;
  background:linear-gradient(90deg,#4caf50,#8bc34a);
}

.set-box {
  width: 100%;
  height: 140px;

  object-fit: contain;
  object-position: center;

  background: #0b1220; /* dark bg to kill white edges */

  padding: 10px;
}

.content-area{
    max-width:1400px;
    margin:0 auto;
    padding:20px;
}

.set-cards-grid{
    grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
    gap:20px;
}

.set-card-item{
    transition:transform 0.18s ease, box-shadow 0.18s ease;
}

.set-card-item:hover{
    transform:translateY(-6px);
    box-shadow:0 10px 25px rgba(0,0,0,0.45);
}

.content-area{
    max-width:1400px;
    margin:0 auto;
    padding:20px;
}

.set-card-item{
    transition: transform .2s ease, box-shadow .2s ease;
}

.set-card-item:hover{
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

/* constrain app width */
#in-app .content-area {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* card hover */
#in-app .set-card-item:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.45) !important;
}

/* smoother card animation */
#in-app .set-card-item {
    transition: all .2s ease !important;
}

.card-title h2{
color:#ffffff;
font-weight:600;
}

h2{
color:#ffffff;
}

.card-detail-meta h2{
color:#ffffff !important;
margin-top:0 !important;
border-bottom:none !important;
font-weight:700;
}

.set-card {
  background: linear-gradient(145deg, #0f172a, #0b1220);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 16px;
  transition: all 0.25s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.set-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0,0,0,0.6);
  border-color: rgba(34,197,94,0.4);
}

.set-box {
  width: 100%;
  height: 120px;
  object-fit: contain;
  margin-bottom: 10px;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.6));
  transition: transform 0.3s ease;
}

.set-card:hover .set-box {
  transform: scale(1.08);
}

.set-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(34,197,94,0.15), transparent 40%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.set-card:hover::before {
  opacity: 1;
}

.watch-btn {
  background: transparent;
  border: 1px solid #444;
  color: #ccc;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.watch-btn:hover {
  background: #222;
  color: #fff;
}

.watch-btn.active {
  color: #00ffa6;
  border-color: #00ffa6;
}

.set-card-actions {
  display: flex;
  gap: 6px;
}

.watch-btn {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #333;
  background: #111;
  color: #aaa;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.watch-btn:hover {
  border-color: #00ffa6;
  color: #00ffa6;
}

.watch-btn.active {
  background: #00ffa6;
  color: #000;
  border-color: #00ffa6;
}

.watch-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #777;
  transition: all 0.2s ease;
}

.watch-btn:hover {
  color: #fff;
  transform: scale(1.2);
}

.watch-btn.active {
  color: #ffd700; /* gold */
  text-shadow: 0 0 6px rgba(255, 215, 0, 0.7);
}

.set-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.set-card-actions button {
  flex: 1;
}

/* watch button same height, not weird icon */
.btn-watch {
  flex: 0 0 36px;
  padding: 0;
  font-size: 16px;
  border-radius: 6px;
}

.btn-watch {
  background: #1e293b;
  color: #aaa;
}

.btn-watch.active {
  color: #ffd700;
}

/* WATCH BUTTON BASE */
.btn-watch {
  flex: 0 0 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #1e293b;
  color: #888;

  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.05);

  cursor: pointer;
  transition: all 0.15s ease;
}

/* HOVER (subtle, not flashy) */
.btn-watch:hover {
  background: #263449;
  color: #bbb;
}

/* ACTIVE (the important part) */
.btn-watch.active {
  color: #ffd700;
  background: #2a3446;
  border-color: rgba(255,215,0,0.25);
}

/* SOFT GLOW (this is what makes it feel good) */
.btn-watch.active:hover {
  box-shadow: 0 0 6px rgba(255,215,0,0.25);
}

/* CLICK FEEDBACK */
.btn-watch:active {
  transform: scale(0.92);
}

.chart-filters {
  display: flex;
  gap: 6px;
}

.chart-filters button {
  background: transparent;
  color: #888;
  border: 1px solid rgba(255,255,255,0.08);
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}

/* hover */
.chart-filters button:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.2);
}

/* ACTIVE (this is the magic) */
.chart-filters button.active {
  background: rgba(0,255,166,0.12);
  color: #00ffa6;
  border-color: rgba(0,255,166,0.4);
  box-shadow: 0 0 8px rgba(0,255,166,0.2);
}

.chart-metrics {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.chart-value {
  font-size: 20px;
  font-weight: 600;
  color: #fff;
}

.chart-change {
  font-size: 13px;
}

.chart-change.positive {
  color: #00ffa6;
}

.chart-change.negative {
  color: #ff4d4d;
}

.portfolio-chart-box {
  background: linear-gradient(
    to bottom,
    rgba(10,20,40,0.9),
    rgba(5,10,20,0.95)
  );
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}

.chart-filters {
  display: flex;
  gap: 8px;
}

.chart-filters button {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 8px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.chart-left {
  display: flex;
  flex-direction: column;
}

.chart-metrics {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.chart-value {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.chart-change {
  font-size: 13px;
}

.chart-change.positive {
  color: #00ffa6;
}

.chart-change.negative {
  color: #ff4d4d;
}

#ps-modal-root {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.ps-modal img {
  display: block;
  margin: 0 auto;
}

#ps-modal-root:empty {
  pointer-events: none;
}

/* BACKDROP */
.ps-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(10, 15, 25, 0.85);
  backdrop-filter: blur(6px);
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;
}

/* MODAL CONTAINER */
.ps-modal {
  background: linear-gradient(180deg, #0f172a, #020617);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;

  width: 100%;
  max-width: 900px;

  padding: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.6);

  animation: modalFade 0.2s ease;
}

/* ANIMATION */
@keyframes modalFade {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal[style*="flex"] {
  display: flex;
}

.modal-content {
  background: #0b1220;
  padding: 24px;
  border-radius: 12px;
  width: 400px;
  max-width: 90%;
  color: #fff;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
}

.modal-content input,
.modal-content select {
  width: 100%;
  margin-bottom: 10px;
  padding: 8px;
  background: #111827;
  border: 1px solid #1f2937;
  color: white;
  border-radius: 6px;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.graded-container {
  margin-top: 20px;
}

.graded-row {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-bottom: 1px solid #222;
}

.graded-left {
  display: flex;
  flex-direction: column;
}

.graded-grade {
  font-weight: bold;
}

.graded-price {
  color: #aaa;
  font-size: 14px;
}

.roi-profit {
  font-size: 13px;
  color: #ccc;
}

.roi-percent {
  font-weight: bold;
  font-size: 16px;
}

/* ROI COLORS */
.roi-elite { color: #00ff88; }
.roi-good  { color: #66ff66; }
.roi-mid   { color: #ffcc00; }
.roi-bad   { color: #ff4d4d; }

.portfolio-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.btn-edit,
.btn-delete {
  padding: 6px 10px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 12px;
}

.btn-edit {
  background: #2d7ef7;
  color: #fff;
}

.btn-delete {
  background: #e74c3c;
  color: #fff;
}

.btn-edit:hover {
  background: #1f5fd1;
}

.btn-delete:hover {
  background: #c0392b;
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}

#portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
}

.portfolio-card {
  background: #111827;
  border-radius: 12px;
  padding: 12px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.portfolio-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.portfolio-image img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.portfolio-info {
  margin-top: 10px;
}

.portfolio-name {
  font-weight: 600;
  margin-bottom: 6px;
}

.portfolio-value {
  font-size: 18px;
  font-weight: bold;
}

.portfolio-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

#card-view-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 99999; /* 🔥 THIS IS THE FIX */
}

#card-view-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

#card-view-modal .cv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.85);
}

#card-view-modal img {
  position: relative;
  max-height: 95vh;   /* 🔥 bigger */
  max-width: 90vw;    /* prevents overflow */
  border-radius: 12px;
  z-index: 2;
}

  transform: scale(0.9);
  transition: transform 0.2s ease;
}

#card-view-modal.active img {
  transform: scale(1);
}

#card-view-modal img {
  position: relative;

  height: auto;
  max-height: min(98vh, 900px);
  max-width: min(75vw, 500px);

  width: auto;

  border-radius: 12px;
  z-index: 2;
}

#card-view-modal img {
  object-fit: contain;
}

#card-view-modal img {
  filter: contrast(1.02) sharpen(0.3px);
}

.watch-btn {
  background: transparent;
  border: none;
  color: #f5c542;
  font-size: 14px;
  cursor: pointer;
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.watch-btn.active {
  color: #00ffcc;
}

.card-actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

.card-actions button {
  background: #0f172a;
  border: 1px solid #334155;
  color: #e5e7eb;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
}

.card-actions button:hover {
  border-color: #22c55e;
}

.watch-btn {
  font-size: 16px;
  color: #888;
  background: none;
  border: none;
}

.watch-btn.active {
  color: gold;
}

.rarity-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0,0,0,0.7);
  color: #00ffa6;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: bold;
  z-index: 2;
}
.set-card-item {
  position: relative;
}

.card-actions button {
  background: #111;
  border: 1px solid #333;
  color: #ccc;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

.card-actions button:hover {
  background: #00ffa6;
  color: #000;
  border-color: #00ffa6;
}

.watch-btn {
  font-size: 16px;
  color: #888;
}

.watch-btn.active {
  color: #ffd700;
}