/* ==========================================================================
   COLLECTORS CERTIFIED GRADING — cloudcard.css
   Scoped styles for the Cloud Card subtabs on "My Collection":
   Portfolio (stock-grade analytics, ported from website2.0) + Watch List.
   Everything is prefixed .cc-* and lives under .cc-scope so it can never
   touch the Collection subtab (col-*/cd-*/pf-* from collection.css/pages.css).
   ========================================================================== */

.cc-scope {
  /* website2.0 fintech palette, mapped to local tokens */
  --cc-ink: #061019;
  --cc-slate: #162735;
  --cc-slate2: #1d3348;
  --cc-blue: #1492FD;
  --cc-sky: #57DAF9;
  --cc-mist: #94ADC4;
  --cc-haze: #A6C4E0;
  --cc-white: #ffffff;
  --cc-line: rgba(148, 173, 196, .16);
  --cc-up: #16C784;
  --cc-down: #F6465D;
  --cc-grad: linear-gradient(90deg, #1492FD, #57DAF9);
  --cc-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
  --cc-radius: 18px;
  --cc-radius-lg: 24px;
  --cc-ease: cubic-bezier(.22, 1, .36, 1);
}

.cc-loading, .cc-error { text-align: center; color: var(--dim); padding: 46px 20px; font-size: 14px; }
.cc-error { color: #F76F72; }

.cc-scope .num-up { color: var(--cc-up); }
.cc-scope .num-down { color: var(--cc-down); }

/* Native <select> popups don't inherit our translucent dark styling — on
   Windows the option list rendered white-on-white. color-scheme makes the
   browser draw the popup in its dark UI, and the option rule covers engines
   that paint options from CSS. Applies to every select in a cc-scope. */
.cc-scope select { color-scheme: dark; }
.cc-scope select option { background: #0e1a28; color: #e6eef7; }

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

.cc-portfolio {
  padding: 6px 0 10px;
  background:
    radial-gradient(70% 40% at 90% -10%, rgba(20,146,253,.10), transparent 60%),
    radial-gradient(50% 30% at 0% 8%, rgba(87,218,249,.06), transparent 60%);
  border-radius: var(--cc-radius-lg);
}

/* ------------------------------------------------------------ hero ------ */
.cc-hero {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin: 6px 4px 26px;
}
.cc-owner { font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--cc-mist); margin-bottom: 10px; }
.cc-value {
  font-family: var(--cc-mono); font-weight: 700;
  font-size: clamp(38px, 6vw, 60px); letter-spacing: -.02em; line-height: 1;
}
.cc-delta { margin-top: 12px; font-family: var(--cc-mono); font-size: 15px; color: var(--cc-haze); }
.cc-delta b { padding: 3px 9px; border-radius: 8px; margin-right: 8px; }
.cc-delta.up b { color: var(--cc-up); background: rgba(22,199,132,.12); }
.cc-delta.down b { color: var(--cc-down); background: rgba(246,70,93,.12); }

/* subscription status chip + cancel */
.cc-sub-chip {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: rgba(6,16,25,.5); border: 1px solid var(--cc-line);
  border-radius: 999px; padding: 8px 8px 8px 16px;
}
.cc-sub-tier {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--cyan);
}
.cc-sub-note { font-size: 12px; color: var(--cc-mist); }
.cc-sub-cancel {
  font-size: 12px; font-weight: 600; color: var(--cc-mist);
  background: rgba(166,196,224,.08); border: 1px solid var(--cc-line);
  border-radius: 999px; padding: 6px 13px; cursor: pointer; transition: .2s;
}
.cc-sub-cancel:hover { color: #F76F72; border-color: rgba(247,111,114,.5); }

/* ------------------------------------------------------------ chart ----- */
.cc-chart-card {
  background: linear-gradient(180deg, rgba(22,39,53,.65), rgba(22,39,53,.28));
  border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
  padding: 22px 22px 10px; backdrop-filter: blur(8px);
}
.cc-chart-tools { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.cc-ranges { display: flex; gap: 4px; background: rgba(6,16,25,.55); padding: 4px; border-radius: 12px; }
.cc-ranges button {
  font-family: var(--cc-mono); font-size: 12.5px; font-weight: 700;
  color: var(--cc-mist); padding: 7px 14px; border-radius: 9px;
  border: none; background: transparent; cursor: pointer; transition: .25s;
}
.cc-ranges button:hover { color: var(--cc-white); }
.cc-ranges button.on { background: var(--cc-grad); color: #fff; box-shadow: 0 6px 18px -6px rgba(20,146,253,.7); }
.cc-chart-readout { font-family: var(--cc-mono); font-size: 13px; color: var(--cc-haze); min-height: 20px; }
.cc-chart-readout b { color: var(--cc-white); margin-right: 10px; }

.cc-chart-holder { position: relative; height: clamp(260px, 38vh, 380px); margin-top: 8px; }
.cc-chart-holder canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }

.cc-chart-tip {
  position: absolute; top: 0; transform: translateX(-50%);
  background: var(--cc-slate); border: 1px solid var(--cc-line);
  padding: 7px 11px; border-radius: 10px;
  font-family: var(--cc-mono); font-size: 12px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .15s;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,.6);
}
.cc-chart-tip b { display: block; font-size: 14px; }
.cc-chart-tip span { color: var(--cc-mist); font-size: 11px; }

/* -------------------------------------------------------- stat tiles ---- */
.cc-stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 26px 0 30px; }
.cc-stat-tile {
  background: rgba(22,39,53,.5); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); padding: 20px 22px;
}
.cc-stat-tile label { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cc-mist); }
.cc-stat-tile b { display: block; margin-top: 8px; font-family: var(--cc-mono); font-size: 24px; font-weight: 700; }
/* .cc-scope .num-up/.num-down (2 classes) outranks this, so tinted
   spans keep their up/down colour without extra overrides */
.cc-stat-tile span { font-size: 12.5px; font-family: var(--cc-mono); color: var(--cc-mist); }

/* ---------------------------------------------------------- columns ----- */
.cc-columns { display: grid; grid-template-columns: 1.75fr 1fr; gap: 22px; align-items: start; }
.cc-holdings, .cc-movers {
  background: rgba(22,39,53,.5); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius-lg); padding: 24px;
}
.cc-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 12px; }
.cc-panel-head h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.cc-pill {
  background: rgba(87,218,249,.12); color: var(--cc-sky);
  font-family: var(--cc-mono); font-size: 12px; font-weight: 700;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}

/* holdings table */
.cc-tbl-scroll { overflow-x: auto; margin-top: 14px; }
.cc-tbl { width: 100%; border-collapse: collapse; min-width: 540px; }
.cc-tbl th {
  text-align: left; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cc-mist); font-weight: 600; padding: 10px 12px;
  border-bottom: 1px solid var(--cc-line);
}
.cc-tbl th.r, .cc-tbl td.r { text-align: right; }
.cc-tbl td { padding: 13px 12px; border-bottom: 1px solid rgba(148,173,196,.08); vertical-align: middle; }
.cc-tbl tbody tr { transition: background .2s; }
.cc-tbl tbody tr:hover { background: rgba(87,218,249,.05); }
.cc-tbl tbody tr:last-child td { border-bottom: 0; }
/* must outrank `.cc-tbl td` to win its padding */
.cc-tbl td.cc-tbl-empty { color: var(--cc-mist); font-size: 13.5px; text-align: center; padding: 30px 12px; }

.cc-h-card { display: flex; align-items: center; gap: 13px; }
.cc-h-thumb {
  width: 38px; height: 52px; border-radius: 6px; flex-shrink: 0;
  background-size: cover; background-position: center 20%;
  box-shadow: 0 4px 12px rgba(0,0,0,.45), 0 0 0 1px rgba(166,196,224,.18);
}
.cc-h-thumb.ph { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #fff; }
.cc-h-card b { font-size: 14.5px; display: block; line-height: 1.25; }
.cc-h-card > span > span { font-size: 12px; color: var(--cc-mist); }
.cc-h-grade {
  font-family: var(--cc-mono); font-size: 12px; font-weight: 700;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
  background: rgba(87,218,249,.1); color: var(--cc-sky); border: 1px solid rgba(87,218,249,.22);
}
.cc-h-val { font-family: var(--cc-mono); font-size: 14.5px; font-weight: 700; }
.cc-h-ret { font-family: var(--cc-mono); font-size: 12.5px; }
.cc-h-ret.num-up { color: var(--cc-up); }
.cc-h-ret.num-down { color: var(--cc-down); }
.cc-h-ret small { display: block; opacity: .65; font-size: 11px; }
.cc-spark { width: 90px; height: 30px; display: block; }

/* movers */
.cc-seg { display: flex; background: rgba(6,16,25,.55); padding: 4px; border-radius: 11px; gap: 4px; }
.cc-seg button {
  font-size: 12.5px; font-weight: 700; color: var(--cc-mist);
  padding: 6px 14px; border-radius: 8px; border: none; background: transparent; cursor: pointer; transition: .25s;
}
.cc-seg button:hover { color: var(--cc-white); }
.cc-seg button.on { background: var(--cc-grad); color: #fff; }
.cc-movers-sub { font-size: 12.5px; color: var(--cc-mist); margin: 4px 0 16px; }

.cc-mover-list { list-style: none; display: grid; gap: 8px; margin: 0; padding: 0; }
.cc-mover {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center;
  padding: 12px; border-radius: 14px; border: 1px solid transparent;
  transition: .25s; animation: ccMoverIn .5s var(--cc-ease) both;
}
.cc-mover:hover { background: rgba(87,218,249,.06); border-color: var(--cc-line); }
@keyframes ccMoverIn { from { opacity: 0; transform: translateY(10px); } }
.cc-mover-rank { font-family: var(--cc-mono); font-size: 13px; color: var(--cc-mist); text-align: center; }
.cc-mover:nth-child(1) .cc-mover-rank { color: #FFD866; }
.cc-mover b { display: block; font-size: 14px; line-height: 1.25; }
.cc-m-sub { font-size: 11.5px; color: var(--cc-mist); }
.cc-m-delta { text-align: right; font-family: var(--cc-mono); }
.cc-m-delta b { font-size: 14px; }
.cc-m-delta.up b { color: var(--cc-up); }
.cc-m-delta.down b { color: var(--cc-down); }
.cc-m-delta span { font-size: 11px; color: var(--cc-mist); }
.cc-mover-empty { color: var(--cc-mist); font-size: 13px; padding: 20px 4px; }

/* ============================ WATCH LIST ================================ */

.cc-watchlist { padding: 6px 2px 10px; }
.cc-wl-head { margin-bottom: 20px; }
.cc-wl-head h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; }
.cc-wl-intro { color: var(--cc-mist); font-size: 14px; max-width: 640px; }

.cc-wl-form {
  background: rgba(22,39,53,.5); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); padding: 20px 22px; margin-bottom: 22px;
}
.cc-wl-fields { display: grid; grid-template-columns: 1.6fr .9fr .9fr auto; gap: 14px; align-items: end; }
.cc-wl-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cc-wl-field > span { font-size: 12px; letter-spacing: .05em; color: var(--cc-mist); text-transform: uppercase; font-weight: 600; }
.cc-wl-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; font-weight: 500; }
.cc-wl-field input {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text);
  background: rgba(6,16,25,.55); border: 1px solid var(--cc-line);
  border-radius: 10px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s;
}
.cc-wl-field input::placeholder { color: rgba(148,173,196,.6); }
.cc-wl-field input:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(20,146,253,.16); }
.cc-wl-price { position: relative; display: flex; align-items: center; }
.cc-wl-price i { position: absolute; left: 12px; color: var(--cc-mist); font-style: normal; font-family: var(--cc-mono); font-size: 14px; }
.cc-wl-price input { padding-left: 26px; }
.cc-wl-add { white-space: nowrap; height: 44px; }
.cc-wl-err { color: #F76F72; font-size: 13px; margin-top: 12px; }

/* watch type (Raw / Graded) segmented choice + grade-range row (C14) */
.cc-wl-seg {
  display: inline-flex; padding: 4px; gap: 3px; border-radius: 11px;
  background: rgba(6,16,25,.55); border: 1px solid var(--cc-line);
}
.cc-wl-seg-opt {
  flex: 1 1 0; font-family: var(--font-display); font-size: 12.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cc-mist);
  border: none; background: transparent; border-radius: 8px; padding: 8px 14px;
  cursor: pointer; transition: background .2s, color .2s;
}
.cc-wl-seg-opt.is-active { background: var(--cc-grad); color: #04121f; }
.cc-wl-grades {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 360px; margin-top: 14px;
}
.cc-wl-grades[hidden] { display: none; }

.cc-wl-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.cc-wl-empty {
  text-align: center; color: var(--cc-mist); font-size: 14px;
  padding: 36px 20px; border: 1px dashed var(--cc-line); border-radius: var(--cc-radius);
}
.cc-wl-item {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center;
  background: rgba(22,39,53,.5); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); padding: 16px 18px; transition: opacity .2s, border-color .2s;
}
.cc-wl-item:hover { border-color: rgba(87,218,249,.3); }
.cc-wl-item.is-removing { opacity: .4; pointer-events: none; }
.cc-wl-main { min-width: 0; }
.cc-wl-title { font-size: 15px; font-weight: 600; color: var(--text); line-height: 1.3; }
.cc-wl-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cc-wl-chip {
  font-family: var(--cc-mono); font-size: 11.5px; color: var(--cc-haze);
  background: rgba(6,16,25,.55); border: 1px solid var(--cc-line);
  border-radius: 7px; padding: 3px 9px;
}
.cc-wl-listing { margin-top: 8px; font-size: 12.5px; color: var(--cc-haze); }
.cc-wl-listing b { color: var(--cc-up); }
.cc-wl-listing a { color: var(--cc-sky); text-decoration: underline; }

.cc-wl-badge {
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap;
  padding: 5px 13px; border-radius: 999px; border: 1px solid transparent;
}
.cc-wl-badge.is-watching { color: var(--cc-sky); background: rgba(87,218,249,.1); border-color: rgba(87,218,249,.35); }
.cc-wl-badge.is-listed { color: var(--cc-up); background: rgba(22,199,132,.12); border-color: rgba(22,199,132,.4); }

.cc-wl-remove {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 9px; cursor: pointer;
  color: var(--cc-mist); font-size: 14px; line-height: 1;
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line);
  transition: color .2s, border-color .2s, background .2s;
}
.cc-wl-remove:hover { color: #F76F72; border-color: rgba(247,111,114,.5); background: rgba(247,111,114,.08); }

.cc-wl-fine { margin-top: 20px; font-size: 12px; color: var(--cc-mist); text-align: center; }

/* ============================ UPSELL =================================== */

.cc-upsell { padding: 8px 0 12px; }
.cc-upsell-head { text-align: center; max-width: 640px; margin: 8px auto 28px; }
.cc-upsell-head h2 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 34px); letter-spacing: .5px; margin: 10px 0 12px; }
.cc-upsell-head p { color: var(--muted); font-size: 15px; }
/* the reused .billing-toggle has a negative top margin meant for a full
   section — neutralize it inside the panel */
.cc-upsell .billing-toggle { margin-top: 0; }
.cc-upsell-fine { text-align: center; margin-top: 22px; font-size: 12.5px; color: var(--dim); }

/* ============================ SHARED HELPERS =========================== */

.cc-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* canceled-but-paid-through subscription note (portfolio status chip) */
.cc-sub-chip.is-canceled .cc-sub-note { color: #FFB454; }

/* ============================ MANUAL HOLDINGS ========================== */

.cc-holdings-head-right { display: flex; align-items: center; gap: 10px; }
.cc-add-card {
  font-family: var(--font-display); font-size: 12.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; white-space: nowrap; cursor: pointer;
  color: #04121f; background: var(--cc-grad); border: none;
  border-radius: 999px; padding: 8px 15px; transition: transform .15s, box-shadow .2s;
  box-shadow: 0 6px 18px -8px rgba(20,146,253,.8);
}
.cc-add-card:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(20,146,253,.9); }

.cc-h-actions-col { width: 1%; white-space: nowrap; }
.cc-h-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.cc-h-act {
  font-size: 12px; font-weight: 600; color: var(--cc-mist); cursor: pointer;
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line);
  border-radius: 8px; padding: 5px 10px; transition: color .2s, border-color .2s, background .2s;
}
.cc-h-act:hover { color: var(--cc-sky); border-color: rgba(87,218,249,.4); }
.cc-h-act-del:hover { color: #F76F72; border-color: rgba(247,111,114,.5); background: rgba(247,111,114,.08); }
.cc-h-manual {
  display: inline-block; font-family: var(--cc-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cc-haze);
  background: rgba(166,196,224,.1); border: 1px solid var(--cc-line);
  border-radius: 5px; padding: 1px 6px; margin-left: 4px; vertical-align: middle;
}
/* inventory-sourced holding tag (Rev 7.22.2) */
.cc-h-inv { color: var(--cc-sky); background: rgba(87,218,249,.1); border-color: rgba(87,218,249,.3); }

/* ---- add / edit card form (fixed overlay dialog) ---- */
.cc-hform-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(4,10,16,.72); backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px 24px; overflow-y: auto; animation: ccFadeIn .18s ease;
}
@keyframes ccFadeIn { from { opacity: 0; } }
.cc-hform {
  position: relative; width: 100%; max-width: 480px;
  background: linear-gradient(180deg, var(--cc-slate), rgba(22,39,53,.92));
  border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg);
  padding: 26px 26px 22px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.7);
}
.cc-hform h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; }
.cc-hform-sub { color: var(--cc-mist); font-size: 13px; margin-bottom: 18px; }
.cc-hform-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border-radius: 9px; cursor: pointer; color: var(--cc-mist); font-size: 14px; line-height: 1;
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line);
  transition: color .2s, border-color .2s;
}
.cc-hform-close:hover { color: #F76F72; border-color: rgba(247,111,114,.5); }

.cc-hf-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; margin-bottom: 14px; position: relative; }
.cc-hf-field > span { font-size: 12px; letter-spacing: .05em; color: var(--cc-mist); text-transform: uppercase; font-weight: 600; }
.cc-hf-field > span em { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .7; font-weight: 500; }
.cc-hf-field input, .cc-hf-field select {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text);
  background: rgba(6,16,25,.55); border: 1px solid var(--cc-line);
  border-radius: 10px; padding: 11px 13px; transition: border-color .2s, box-shadow .2s;
}
.cc-hf-field input::placeholder { color: rgba(148,173,196,.6); }
.cc-hf-field input:focus, .cc-hf-field select:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(20,146,253,.16); }
.cc-hf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cc-hf-row[hidden] { display: none; }
.cc-hf-price { position: relative; display: flex; align-items: center; }
.cc-hf-price i { position: absolute; left: 12px; color: var(--cc-mist); font-style: normal; font-family: var(--cc-mono); font-size: 14px; }
.cc-hf-price input { padding-left: 26px; }
.cc-hf-linked { font-size: 12px; color: var(--cc-mist); margin: -6px 0 14px; min-height: 16px; }
.cc-hf-linked.is-on { color: var(--cc-up); }

.cc-hform-drop {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 6px;
  /* HARD literal background — a var()/stacking hiccup once left this transparent
     and the white suggestion text blended into the page. Never translucent. */
  background: #1d3348; border: 1px solid var(--cc-line); border-radius: 12px;
  max-height: 260px; overflow-y: auto; box-shadow: 0 20px 40px -12px rgba(0,0,0,.6);
}
.cc-hform-opt {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 13px; border: none; background: transparent; color: var(--text);
  border-bottom: 1px solid rgba(148,173,196,.08); transition: background .15s;
}
.cc-hform-opt:last-child { border-bottom: 0; }
.cc-hform-opt:hover { background: rgba(87,218,249,.08); }
.cc-hform-opt b { display: block; font-size: 13.5px; }
.cc-hform-opt span { font-size: 11.5px; color: var(--cc-mist); }

.cc-hform-err { color: #F76F72; font-size: 13px; margin: 4px 0 14px; }
.cc-hform-err a { color: var(--cc-sky); text-decoration: underline; font-weight: 600; }
.cc-hform-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.cc-hform-cancel {
  font-size: 13px; font-weight: 600; color: var(--cc-mist); cursor: pointer;
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line);
  border-radius: 10px; padding: 10px 18px; transition: color .2s, border-color .2s;
}
.cc-hform-cancel:hover { color: var(--cc-white); border-color: var(--cc-haze); }
.cc-hform-save { white-space: nowrap; }

/* ---- inventory item photo (D62): file picker + client-side preview ---- */
.cc-hf-photo-field { margin-bottom: 14px; }
.cc-hf-photo { display: flex; align-items: center; gap: 14px; }
.cc-hf-photo-thumb {
  width: 54px; height: 76px; flex: none; border-radius: 8px; overflow: hidden;
  background: rgba(6,16,25,.6); border: 1px solid var(--cc-line);
}
.cc-hf-photo-thumb[hidden] { display: none; }
.cc-hf-photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cc-hf-photo-btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--cc-haze);
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line);
  border-radius: 10px; padding: 10px 14px; transition: color .2s, border-color .2s, background .2s;
}
.cc-hf-photo-btn:hover { color: var(--cc-sky); border-color: rgba(87,218,249,.4); }
.cc-hf-photo-btn svg { flex: none; opacity: .85; }
/* display:inline-flex above OUTRANKS the [hidden] attribute, so "Remove photo" would
   sit there permanently without this. Scoped to the class, never to one id — an id
   rule only ever fixes the one button that existed the day it was written. */
.cc-hf-photo-btn[hidden] { display: none; }
.cc-hf-photo-note { font-size: 12px; color: var(--cc-mist); margin: 8px 0 0; word-break: break-word; }
.cc-hf-photo-note.is-err { color: #F76F72; }
.cc-hf-photo-note[hidden] { display: none; }

/* ============================ WATCH-LIST USAGE ======================== */
.cc-wl-usage {
  margin-top: 12px; font-family: var(--cc-mono); font-size: 12.5px; color: var(--cc-mist);
  display: inline-block; background: rgba(6,16,25,.5); border: 1px solid var(--cc-line);
  border-radius: 999px; padding: 5px 13px;
}
.cc-wl-usage.is-full { color: #FFB454; border-color: rgba(255,180,84,.4); }
.cc-wl-err a { color: var(--cc-sky); text-decoration: underline; font-weight: 600; }

/* ============================ MARKET TOOLS ============================ */

.cc-mkt { padding: 6px 2px 10px; }
.cc-mkt-head { margin-bottom: 18px; }
.cc-mkt-head h2 { font-family: var(--font-display); font-size: 26px; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 8px; }
.cc-mkt-intro { color: var(--cc-mist); font-size: 14px; max-width: 640px; }

.cc-mkt-search { display: flex; gap: 10px; align-items: stretch; margin-bottom: 18px; }
.cc-mkt-cat {
  flex: 0 0 auto; max-width: 200px; font-family: var(--font-body); font-size: 15px; color: #e6eef7;
  background: #0b1624; border: 1px solid var(--cc-line);
  border-radius: 14px; padding: 12px 14px; transition: border-color .2s, box-shadow .2s;
}
.cc-mkt-cat:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(20,146,253,.16); }
.cc-mkt-qwrap { position: relative; flex: 1; }
.cc-mkt-search input:disabled { opacity: .55; cursor: not-allowed; }
.cc-mkt-search-ico { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--cc-mist); pointer-events: none; }
.cc-mkt-search input {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--text);
  background: rgba(6,16,25,.55); border: 1px solid var(--cc-line);
  border-radius: 14px; padding: 14px 16px 14px 44px; transition: border-color .2s, box-shadow .2s;
}
.cc-mkt-search input::placeholder { color: rgba(148,173,196,.6); }
.cc-mkt-search input:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(20,146,253,.16); }

.cc-mkt-body { display: grid; grid-template-columns: 320px 1fr; gap: 20px; align-items: start; }
.cc-mkt-results {
  background: rgba(22,39,53,.5); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); padding: 10px; min-height: 120px; max-height: 560px; overflow-y: auto;
}
.cc-mkt-hint { color: var(--cc-mist); font-size: 13px; padding: 20px 12px; text-align: center; }
.cc-mkt-result-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cc-mkt-result {
  cursor: pointer; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent;
  transition: background .18s, border-color .18s;
}
.cc-mkt-result:hover { background: rgba(87,218,249,.06); border-color: var(--cc-line); }
.cc-mkt-result.is-active { background: rgba(20,146,253,.14); border-color: rgba(87,218,249,.4); }
.cc-mkt-result:focus-visible { outline: 2px solid var(--cc-sky); outline-offset: 1px; }
.cc-mkt-result b { display: block; font-size: 14px; line-height: 1.3; }
.cc-mkt-result span { font-size: 11.5px; color: var(--cc-mist); }

.cc-mkt-detail { min-width: 0; }
.cc-mkt-empty {
  display: grid; place-items: center; min-height: 260px; text-align: center; padding: 20px;
  color: var(--cc-mist); font-size: 14px; border: 1px dashed var(--cc-line); border-radius: var(--cc-radius-lg);
}
.cc-mkt-loading { min-height: 260px; display: grid; place-items: center; }

.cc-mkt-card { display: grid; gap: 20px; }
.cc-mkt-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.cc-mkt-card-id h3 { font-family: var(--font-display); font-size: 22px; letter-spacing: .4px; line-height: 1.15; }
.cc-mkt-cat {
  display: inline-block; margin-top: 8px; font-family: var(--cc-mono); font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cc-sky);
  background: rgba(87,218,249,.1); border: 1px solid rgba(87,218,249,.25); border-radius: 999px; padding: 3px 11px;
}
.cc-mkt-price { text-align: right; }
.cc-mkt-price b { display: block; font-family: var(--cc-mono); font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.cc-mkt-chg { font-family: var(--cc-mono); font-size: 13.5px; font-weight: 700; }
.cc-mkt-chg small { color: var(--cc-mist); font-weight: 500; }

.cc-mkt-chart-card {
  background: linear-gradient(180deg, rgba(22,39,53,.6), rgba(22,39,53,.25));
  border: 1px solid var(--cc-line); border-radius: var(--cc-radius-lg); padding: 18px 20px 8px;
}
.cc-mkt-chart-tools { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.cc-mkt-chart-label { font-family: var(--font-display); font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--cc-haze); }
.cc-mkt-chart-readout { font-family: var(--cc-mono); font-size: 13px; color: var(--cc-haze); min-height: 20px; }
.cc-mkt-chart-readout b { color: var(--cc-white); margin-right: 8px; }
.cc-mkt-chart-holder { position: relative; height: clamp(220px, 32vh, 320px); margin-top: 8px; }
.cc-mkt-chart-holder canvas { width: 100%; height: 100%; display: block; cursor: crosshair; }
.cc-mkt-nochart { display: grid; place-items: center; height: 100%; text-align: center; }

.cc-mkt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.cc-mkt-sales, .cc-mkt-spread {
  background: rgba(22,39,53,.5); border: 1px solid var(--cc-line);
  border-radius: var(--cc-radius); padding: 20px;
}
.cc-mkt-none { color: var(--cc-mist); font-size: 13px; padding: 16px 4px; }
.cc-mkt-sales-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 2px; }
.cc-mkt-sale {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 4px; border-bottom: 1px solid rgba(148,173,196,.08);
}
.cc-mkt-sale:last-child { border-bottom: 0; }
.cc-mkt-sale-main { display: flex; align-items: center; gap: 10px; }
.cc-mkt-sale-main b { font-family: var(--cc-mono); font-size: 14.5px; font-weight: 700; }
.cc-mkt-sale-grade {
  font-family: var(--cc-mono); font-size: 11px; font-weight: 700; color: var(--cc-sky);
  background: rgba(87,218,249,.1); border: 1px solid rgba(87,218,249,.22); border-radius: 6px; padding: 2px 7px;
}
.cc-mkt-sale-date { font-family: var(--cc-mono); font-size: 12px; color: var(--cc-mist); }
.cc-mkt-spread-tbl { width: 100%; border-collapse: collapse; margin-top: 12px; }
.cc-mkt-spread-tbl th {
  text-align: left; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--cc-mist); font-weight: 600; padding: 8px 6px; border-bottom: 1px solid var(--cc-line);
}
.cc-mkt-spread-tbl th.r, .cc-mkt-spread-tbl td.r { text-align: right; }
.cc-mkt-spread-tbl td { padding: 10px 6px; border-bottom: 1px solid rgba(148,173,196,.08); font-size: 13.5px; }
.cc-mkt-spread-tbl td.r { font-family: var(--cc-mono); font-weight: 700; }
.cc-mkt-spread-tbl tr:last-child td { border-bottom: 0; }

/* ---- real spread panel (C14): headline tiles + unavailable / window ---- */
.cc-mkt-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cc-mkt-tile {
  display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(170deg, rgba(87,218,249,.06), rgba(148,173,196,.02));
  border: 1px solid var(--cc-line); border-radius: var(--cc-radius); padding: 16px 18px;
}
.cc-mkt-tile-label {
  font-family: var(--font-display); font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--cc-mist);
}
.cc-mkt-tile-val { font-family: var(--cc-mono); font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.cc-mkt-tile-sub { font-size: 12px; color: var(--cc-mist); }
.cc-mkt-window { margin-top: 4px; font-size: 12px; color: var(--cc-mist); font-family: var(--cc-mono); }
.cc-mkt-unavail {
  text-align: center; padding: 40px 24px; border: 1px dashed var(--cc-line);
  border-radius: var(--cc-radius);
}
.cc-mkt-unavail p { font-size: 15px; color: var(--cc-haze); font-weight: 600; margin-bottom: 6px; }
.cc-mkt-unavail span { font-size: 13px; color: var(--cc-mist); }

/* ============================ VISIBILITY MANAGER (C16) =============== */

.cc-manage-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--cc-haze);
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line);
  border-radius: 999px; padding: 7px 14px; transition: color .2s, border-color .2s, background .2s;
}
.cc-manage-btn:hover { color: var(--cc-sky); border-color: rgba(87,218,249,.4); background: rgba(87,218,249,.06); }
.cc-manage-btn svg { flex: none; opacity: .85; }

.cc-vis-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; justify-content: flex-end;
  background: rgba(4,10,16,.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s;
}
.cc-vis-overlay.open { opacity: 1; visibility: visible; }
.cc-vis {
  display: flex; flex-direction: column; width: 100%; max-width: 460px; height: 100%;
  background: linear-gradient(180deg, var(--cc-slate), rgba(10,24,38,.98));
  border-left: 1px solid var(--cc-line); box-shadow: -30px 0 80px -20px rgba(0,0,0,.7);
  transform: translateX(24px); transition: transform .22s var(--cc-ease);
}
.cc-vis-overlay.open .cc-vis { transform: translateX(0); }
.cc-vis-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 22px 22px 16px; border-bottom: 1px solid var(--cc-line);
}
.cc-vis-head h3 { font-family: var(--font-display); font-size: 20px; letter-spacing: .5px; text-transform: uppercase; }
.cc-vis-sub { color: var(--cc-mist); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.cc-vis-close {
  flex: none; width: 32px; height: 32px; border-radius: 9px; cursor: pointer;
  color: var(--cc-mist); font-size: 14px; line-height: 1;
  background: rgba(166,196,224,.06); border: 1px solid var(--cc-line); transition: color .2s, border-color .2s;
}
.cc-vis-close:hover { color: #F76F72; border-color: rgba(247,111,114,.5); }
.cc-vis-search { position: relative; padding: 16px 22px; }
.cc-vis-search svg { position: absolute; left: 36px; top: 50%; transform: translateY(-50%); color: var(--cc-mist); pointer-events: none; }
.cc-vis-search input {
  width: 100%; font-family: var(--font-body); font-size: 14px; color: var(--text);
  background: rgba(6,16,25,.55); border: 1px solid var(--cc-line);
  border-radius: 12px; padding: 11px 14px 11px 40px; transition: border-color .2s, box-shadow .2s;
}
.cc-vis-search input::placeholder { color: rgba(148,173,196,.6); }
.cc-vis-search input:focus { outline: none; border-color: var(--cc-blue); box-shadow: 0 0 0 3px rgba(20,146,253,.16); }
.cc-vis-body { flex: 1; overflow-y: auto; padding: 4px 22px 22px; }
.cc-vis-empty, .cc-vis-noresult { color: var(--cc-mist); font-size: 13.5px; text-align: center; padding: 32px 12px; line-height: 1.6; }
.cc-vis-noresult[hidden] { display: none; }
.cc-vis-list { display: flex; flex-direction: column; }
.cc-vis-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; border-bottom: 1px solid rgba(148,173,196,.08);
}
.cc-vis-row[hidden] { display: none; }
.cc-vis-row-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cc-vis-title { font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.3; word-break: break-word; }
.cc-vis-tag {
  align-self: flex-start; font-family: var(--cc-mono); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--cc-haze);
  background: rgba(166,196,224,.1); border: 1px solid var(--cc-line); border-radius: 5px; padding: 2px 7px;
}
.cc-vis-tag--cert { color: var(--cc-sky); background: rgba(87,218,249,.1); border-color: rgba(87,218,249,.3); }
.cc-vis-tag--inventory { color: var(--cc-up); background: rgba(22,199,132,.1); border-color: rgba(22,199,132,.35); }

/* on/off switch (role=switch) — mirrors the account 2FA toggle look */
.cc-switch {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  background: none; border: none; padding: 4px; cursor: pointer;
}
.cc-switch-state {
  font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--cc-mist); min-width: 46px; text-align: right; transition: color .2s;
}
.cc-switch.is-on .cc-switch-state { color: var(--cc-up); }
.cc-switch-track {
  position: relative; width: 46px; height: 26px; border-radius: 999px; box-sizing: border-box; flex: none;
  background: rgba(148,173,196,.18); border: 1px solid rgba(148,173,196,.3); transition: background .2s, border-color .2s;
}
.cc-switch.is-on .cc-switch-track { background: rgba(22,199,132,.35); border-color: rgba(22,199,132,.6); }
.cc-switch-thumb {
  position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: #e6eef7; box-shadow: 0 1px 4px rgba(0,0,0,.4); transition: transform .2s;
}
.cc-switch.is-on .cc-switch-thumb { transform: translateX(20px); }
.cc-switch:focus-visible { outline: none; }
.cc-switch:focus-visible .cc-switch-track { outline: 2px solid var(--cc-sky); outline-offset: 2px; }
.cc-switch:disabled { opacity: .6; cursor: default; }

/* ============================ RESPONSIVE ============================== */
@media (max-width: 1020px) { .cc-columns { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .cc-mkt-body { grid-template-columns: 1fr; }
  .cc-mkt-results { max-height: 340px; }
}
@media (max-width: 620px) {
  .cc-mkt-grid { grid-template-columns: 1fr; }
  .cc-hf-row { grid-template-columns: 1fr; }
  .cc-mkt-card-head { flex-direction: column; }
  .cc-mkt-price { text-align: left; }
  .cc-mkt-tiles { grid-template-columns: 1fr; }
  .cc-wl-grades { grid-template-columns: 1fr; max-width: none; }
}
@media (max-width: 900px) {
  .cc-wl-fields { grid-template-columns: 1fr 1fr; }
  .cc-wl-grow { grid-column: 1 / -1; }
  .cc-wl-add { grid-column: 1 / -1; }
}
@media (max-width: 880px) { .cc-stat-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  .cc-hero { align-items: flex-start; }
  .cc-wl-fields { grid-template-columns: 1fr; }
  .cc-wl-item { grid-template-columns: 1fr auto; }
  .cc-wl-remove { grid-row: 1; }
}