* { margin:0; padding:0; box-sizing:border-box; font-family:'Segoe UI',system-ui,sans-serif; }
body { background:#0b0e14; color:#e6e9ef; padding:22px 26px; }
a { color:inherit; text-decoration:none; }
.top { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.top h1 { font-size:22px; font-weight:700; letter-spacing:.5px; }
.top h1 span { color:#5b8def; }
.crumb { font-size:13px; color:#8a93a6; }
.crumb a:hover { color:#5b8def; }

/* dashboard grid */
.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.deck { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:760px){ .deck { grid-template-columns:1fr; } }

.clock { text-align:right; font-size:13px; color:#8a93a6; }
.clock b { display:block; font-size:18px; color:#e6e9ef; }
.big { font-size:28px; font-weight:700; }
.up { color:#3ad29f; } .down { color:#ef5b6e; }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.green{background:#3ad29f;} .red{background:#ef5b6e;} .blue{background:#5b8def;} .amber{background:#f0a93b;}
.pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:600; background:#1d2430; color:#8a93a6; }
.pill.kz { background:rgba(240,169,59,.15); color:#f0a93b; }
.stat-row { display:flex; gap:12px; margin-top:10px; }
.stat { flex:1; background:#10151e; border-radius:10px; padding:10px 12px; }
.stat .n { font-size:20px; font-weight:700; }
.stat .l { font-size:11px; color:#8a93a6; text-transform:uppercase; letter-spacing:.5px; }
.feed-item { font-size:13px; padding:5px 0; display:flex; gap:8px; align-items:flex-start; }
.feed-item .when { color:#5b8def; font-size:11px; min-width:42px; }
.row { display:flex; justify-content:space-between; padding:6px 0; font-size:14px; border-bottom:1px solid #1d2430; }
.row:last-child { border:none; }
a.bin-item { text-decoration:none; color:inherit; }
a.bin-item:hover .lbl span:first-child { color:#5b8def; }

.minibtn { display:inline-block; padding:3px 10px; border-radius:8px; background:#5b8def; color:#fff;
  font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; }
.minibtn:hover { opacity:.88; }
.newsbox { margin-top:12px; background:#10151e; border:1px solid #1d2430; border-radius:10px; padding:10px 12px; }
.newshead { font-size:10px; text-transform:uppercase; letter-spacing:.8px; color:#8a93a6; margin-bottom:6px; }
.newstitle { font-size:13px; line-height:1.35; color:#e6e9ef; }
.cap { font-size:10px; text-transform:uppercase; letter-spacing:.5px; color:#8a93a6; }
.benjbox { margin-top:14px; background:#10151e; border:1px solid #232c3d; border-left:3px solid #5b8def; border-radius:10px; padding:10px 12px; }
.dir { display:inline-block; padding:1px 8px; border-radius:6px; font-size:11px; font-weight:700; }
.dir.long { background:rgba(58,210,159,.16); color:#3ad29f; }
.dir.short { background:rgba(239,91,110,.16); color:#ef5b6e; }
.callrow { display:flex; justify-content:space-between; font-size:13px; padding:3px 0; }
.bstat { font-size:10px; font-weight:700; letter-spacing:.3px; padding:1px 7px; border-radius:10px; }
.bstat.hot { background:rgba(240,169,59,.16); color:#f0a93b; }
.bstat.on { background:rgba(58,210,159,.16); color:#3ad29f; }
.bstat.off { background:#1d2430; color:#8a93a6; }
.card { background:#151a24; border:1px solid #222a39; border-radius:14px; padding:16px 18px; }
.card.link { cursor:pointer; transition:.15s; }
.card.link:hover { border-color:#5b8def; transform:translateY(-2px); }
.card h2 { font-size:12px; text-transform:uppercase; letter-spacing:1.2px; color:#8a93a6; margin-bottom:12px; }
.bin-item { margin-bottom:13px; }
.bin-item .lbl { display:flex; justify-content:space-between; font-size:14px; margin-bottom:4px; }
.muted { color:#8a93a6; }
.bar { height:8px; background:#1d2430; border-radius:6px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:6px; }

/* set grid */
.setbar { display:flex; align-items:center; gap:16px; margin-bottom:18px; }
.setbar .count { font-size:15px; color:#8a93a6; }
.setbar .count b { color:#3ad29f; }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:12px; }
.cards.compact { grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:7px; }
.cards.compact .cell { padding:5px; border-radius:8px; gap:2px; }
.cards.compact .cell .name { font-size:10px; line-height:1.1; }
.cards.compact .cell .num { font-size:9px; }
.cards.compact .cell .tag { display:none; }
.cards.compact .cell .cam { font-size:10px; bottom:3px; right:3px; }
.cell.selected { outline:3px solid #ef5b6e; outline-offset:-3px; }
.cell.selected::after { content:'✓'; position:absolute; top:4px; left:50%; transform:translateX(-50%); background:#ef5b6e; color:#fff; width:20px; height:20px; border-radius:50%; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; z-index:3; }
.density-btn, .select-btn { background:none; border:1px solid #2a3346; border-radius:18px; padding:5px 12px; color:#9aa6bd; font-size:12.5px; cursor:pointer; }
.density-btn.on, .select-btn.on { border-color:#5b8def; color:#cfe0ff; }
.bulkbar { position:fixed; left:50%; bottom:20px; transform:translateX(-50%); display:none; align-items:center; gap:14px; background:#161b26; border:1px solid #ef5b6e; border-radius:12px; padding:11px 18px; z-index:200; box-shadow:0 8px 28px rgba(0,0,0,.5); }
.bulkbar.show { display:flex; }
.bulkbar b { color:#fff; }
.ebay-val { margin:14px 0 4px; padding:11px 13px; background:#0e131c; border:1px solid #222a39; border-radius:10px; }
.ebay-val .lbl { font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:#8a93a6; }
.ebay-val .val { font-size:20px; font-weight:800; color:#3ad29f; margin-top:3px; }
.ebay-val .note { font-size:10.5px; color:#5a6478; margin-top:3px; }
.cell { background:#151a24; border:1px solid #222a39; border-radius:12px; padding:10px; text-align:center; cursor:pointer; transition:.12s; position:relative; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:center; gap:4px; overflow:hidden; }
.cell:hover { border-color:#5b8def; }
.cell.missing { opacity:.38; filter:grayscale(.6); }
.cell.holo { background:linear-gradient(145deg,#1a2030,#22193a); }
.cell .num { font-size:11px; color:#5b8def; font-weight:700; }
.cell .name { font-size:13px; font-weight:600; line-height:1.2; }
.cell .tag { font-size:10px; text-transform:uppercase; letter-spacing:.5px; }
.cell.owned .tag { color:#3ad29f; }
.cell.missing .tag { color:#8a93a6; }
.cell .thumb { position:absolute; inset:0; object-fit:cover; width:100%; height:100%; }
.cell .cam { position:absolute; bottom:6px; right:6px; font-size:12px; opacity:.5; }

/* modal */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.72); display:none; align-items:center; justify-content:center; z-index:200; }
.modal.show { display:flex; }
.sheet { background:#151a24; border:1px solid #2a3346; border-radius:16px; padding:22px; width:380px; max-width:92vw; }
.sheet h3 { font-size:18px; margin-bottom:4px; }
.sheet .sub { color:#8a93a6; font-size:13px; margin-bottom:16px; }
.photo-area { background:#0b0e14; border:1px dashed #2a3346; border-radius:12px; min-height:300px; display:flex; align-items:center; justify-content:center; overflow:hidden; margin-bottom:14px; }
.photo-area img { width:100%; border-radius:8px; }
.photo-area .ph { color:#5a6276; font-size:13px; text-align:center; padding:20px; }
.btnrow { display:flex; gap:10px; }
.btn { flex:1; padding:10px; border-radius:10px; border:none; font-size:14px; font-weight:600; cursor:pointer; }
.btn.primary { background:#5b8def; color:#fff; }
.btn.ghost { background:#1d2430; color:#e6e9ef; }
.btn.danger { background:#3a1d24; color:#ef8a9a; }
.btn:hover { opacity:.9; }

/* =========================================================
   Pokémon-themed polish layer (task 7) — tasteful, not gaudy
   ========================================================= */
:root{
  --poke-red:#ee1515; --poke-red-dk:#b50d0d; --poke-yellow:#ffcb05; --poke-blue:#2a75bb; --poke-blue-dk:#3c5aa6;
  --accent:#5b8def;
}
/* subtle pokéball motif in the top bar title */
.top h1::before{
  content:""; display:inline-block; width:18px; height:18px; margin-right:8px; vertical-align:-3px;
  border-radius:50%; background:
    radial-gradient(circle at 50% 50%, #fff 0 3px, #222 3px 4.5px, transparent 4.5px),
    linear-gradient(#ee1515 0 50%, #f6f6f6 50% 100%);
  border:1.5px solid #222; box-shadow:0 0 0 1px rgba(0,0,0,.3);
}
.top h1 span{ color:var(--poke-yellow); text-shadow:0 1px 0 var(--poke-blue-dk); }

/* themed primary buttons / pills get the poké-blue/yellow edge */
.minibtn{ background:var(--poke-blue); box-shadow:0 1px 0 var(--poke-blue-dk) inset; }
.btn.primary{ background:linear-gradient(180deg,#3a86e0,#2a75bb); box-shadow:0 1px 0 rgba(255,255,255,.15) inset; }

/* card headers get a thin colored top accent */
.card{ position:relative; overflow:hidden; }
.card > h2:first-child{ position:relative; }

/* brand header (logo + wordmark), rendered by nav.js */
.brand{ display:flex; align-items:center; gap:10px; }
.brand .pcp-logo{ flex:none; height:34px; width:auto; display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.brand .brandname{ font-size:20px; font-weight:800; letter-spacing:.3px; color:#fff; }
.brand .brandname{ background:linear-gradient(90deg,#ffcb05,#fff 60%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* nav bar — sticky so the tabs stay visible on every screen / while scrolling */
.navbar{ display:flex; gap:6px; flex-wrap:wrap; position:sticky; top:0; z-index:50;
  background:#0b0e14; margin:0 -26px 16px; padding:10px 26px; border-bottom:1px solid #1c2433; }
@media (max-width:640px){
  body{ padding:18px 14px; }
  .navbar{ margin:0 -14px 14px; padding:9px 14px; }
}
.navbar--legacy{ display:flex; gap:6px; flex-wrap:wrap; margin:-6px 0 18px; }
.navbar a, .navbar--legacy a{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px; background:#151a24; border:1px solid #222a39; color:#aab4c6; }
.navbar a:hover, .navbar--legacy a:hover{ border-color:var(--poke-blue); color:#fff; }
.navbar a.active{ background:var(--poke-blue); color:#fff; border-color:var(--poke-blue); }
.navbar a.alert{ position:relative; }
.navbar a .badge{ background:var(--poke-red); color:#fff; border-radius:10px; font-size:10px; padding:0 6px; margin-left:6px; }

/* two-section nav: section pills ("Collection" / "Trading") on top, sub-tabs below */
.navbar--sectioned{ flex-direction:column; align-items:stretch; gap:10px; }
.navsections{ display:flex; gap:8px; flex-wrap:wrap; }
.navsection{ font-size:14px; font-weight:800; letter-spacing:.2px; padding:8px 18px; border-radius:24px;
  background:#11161f; border:1px solid #222a39; color:#8a93a6; cursor:pointer; transition:.15s; }
.navsection:hover{ border-color:var(--poke-blue); color:#fff; }
.navsection.active{ background:linear-gradient(90deg,#1b2435,#11161f); border-color:var(--poke-blue); color:#fff;
  box-shadow:0 0 0 1px rgba(91,141,239,.35) inset; }
.navtabs{ display:flex; gap:6px; flex-wrap:wrap; }

/* toggle slider (public/private) */
.toggle{ position:relative; display:inline-block; width:42px; height:22px; vertical-align:middle; }
.toggle input{ display:none; }
.toggle .track{ position:absolute; inset:0; background:#2a3346; border-radius:20px; transition:.2s; }
.toggle .track::before{ content:""; position:absolute; left:3px; top:3px; width:16px; height:16px; background:#fff; border-radius:50%; transition:.2s; }
.toggle input:checked + .track{ background:var(--poke-blue); }
.toggle input:checked + .track::before{ transform:translateX(20px); }
.toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 0; font-size:13px; border-bottom:1px solid #1d2430; }
.toggle-row:last-child{ border:none; }
.priv-tag{ font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px; }
.priv-tag.pub{ background:rgba(58,210,159,.16); color:#3ad29f; }
.priv-tag.prv{ background:#1d2430; color:#8a93a6; }

/* condition chips */
.cond-row{ display:flex; gap:6px; margin:10px 0; flex-wrap:wrap; }
.cond-chip{ flex:1; min-width:48px; padding:7px 0; text-align:center; border-radius:9px; border:1px solid #2a3346; background:#0b0e14; color:#aab4c6; font-size:12px; font-weight:700; cursor:pointer; }
.cond-chip.on{ background:var(--poke-yellow); color:#1a1a1a; border-color:var(--poke-yellow); }
.qty-row{ display:flex; align-items:center; gap:12px; margin:10px 0; }
.qty-row .qbtn{ width:34px; height:34px; border-radius:9px; border:1px solid #2a3346; background:#1d2430; color:#fff; font-size:18px; font-weight:700; cursor:pointer; }
.qty-row .qval{ font-size:20px; font-weight:700; min-width:30px; text-align:center; }

/* community feed */
.feed-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; }
.feed-card{ background:#151a24; border:1px solid #222a39; border-radius:14px; overflow:hidden; }
.feed-card img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; background:#0b0e14; }
.feed-card .meta{ padding:10px 12px; }
.feed-card .who{ font-size:13px; font-weight:700; }
.feed-card .det{ font-size:12px; color:#8a93a6; margin-top:2px; }
.lets-go{ display:flex; align-items:center; gap:7px; margin-top:9px; padding:7px 10px; border-radius:10px;
  border:1px solid #2a3346; background:#0b0e14; color:#ffcb05; font-weight:800; font-size:13px; cursor:pointer; width:100%; justify-content:center; letter-spacing:.5px; }
.lets-go.on{ background:linear-gradient(180deg,#ee1515,#b50d0d); color:#fff; border-color:#b50d0d; }
.lets-go:hover{ filter:brightness(1.08); }

/* inbox */
.inbox-item{ background:#151a24; border:1px solid #222a39; border-left:3px solid var(--poke-blue); border-radius:12px; padding:12px 14px; margin-bottom:10px; }
.inbox-item.unread{ border-left-color:var(--poke-red); }
.inbox-item .t{ font-size:14px; }
.inbox-item .w{ font-size:11px; color:#8a93a6; margin-top:4px; }

/* marketplace (task 16) */
.mkt-tabs{ display:flex; gap:8px; margin:4px 0 18px; }
.mkt-tab{ font-size:13px; font-weight:700; padding:7px 16px; border-radius:20px; background:#151a24; border:1px solid #222a39; color:#aab4c6; cursor:pointer; }
.mkt-tab.on{ background:var(--poke-blue); color:#fff; border-color:var(--poke-blue); }
.mkt-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.mkt-filters input, .mkt-filters select{ background:#0e131c; border:1px solid #2a3346; border-radius:9px; color:#e6e9ef; font-size:13px; padding:7px 10px; }
.mkt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.mkt-card{ background:#151a24; border:1px solid #222a39; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; }
.mkt-card .imgs{ display:flex; background:#0b0e14; }
.mkt-card .imgs img{ width:50%; aspect-ratio:3/4; object-fit:cover; display:block; }
.mkt-card .imgs.single img{ width:100%; }
.mkt-card .noimg{ width:100%; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; color:#5a6276; font-size:12px; background:#0b0e14; }
.mkt-card .meta{ padding:11px 13px; flex:1; display:flex; flex-direction:column; gap:5px; }
.mkt-card .nm{ font-size:14px; font-weight:700; }
.mkt-card .sub{ font-size:12px; color:#8a93a6; }
.mkt-card .who{ font-size:12px; color:#aab4c6; }
.mkt-tag{ font-size:10px; font-weight:800; letter-spacing:.4px; padding:1px 8px; border-radius:10px; text-transform:uppercase; }
.mkt-tag.trade{ background:rgba(91,141,239,.18); color:#7fa8ff; }
.mkt-tag.sale{ background:rgba(58,210,159,.16); color:#3ad29f; }
.mkt-price{ font-size:15px; font-weight:800; color:#3ad29f; }
.mkt-market{ font-size:11px; color:#8a93a6; }
.mkt-form{ background:#151a24; border:1px solid #222a39; border-radius:14px; padding:16px 18px; max-width:560px; }
.mkt-form label{ display:block; font-size:12px; color:#8a93a6; margin:10px 0 4px; }
.mkt-form input, .mkt-form select, .mkt-form textarea{ width:100%; background:#0e131c; border:1px solid #2a3346; border-radius:9px; color:#e6e9ef; font-size:14px; padding:9px 11px; }
.mkt-form textarea{ min-height:60px; resize:vertical; }
.mkt-photo-row{ display:flex; gap:12px; }
.mkt-photo-row > div{ flex:1; }
.mkt-thumb{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:9px; background:#0b0e14; border:1px dashed #2a3346; display:block; }
.mkt-note{ font-size:12px; border-radius:9px; padding:9px 11px; margin:10px 0; }
.mkt-note.warn{ background:rgba(240,169,59,.12); color:#f0a93b; border:1px solid rgba(240,169,59,.3); }
.mkt-note.err{ background:rgba(239,91,110,.12); color:#ef8a9a; border:1px solid rgba(239,91,110,.3); }
.mkt-note.ok{ background:rgba(58,210,159,.12); color:#3ad29f; border:1px solid rgba(58,210,159,.3); }
.mkt-mine{ display:flex; align-items:center; gap:12px; background:#151a24; border:1px solid #222a39; border-radius:12px; padding:10px 13px; margin-bottom:10px; }
.mkt-mine .x{ margin-left:auto; background:#3a1d24; color:#ef8a9a; border:none; border-radius:8px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; }
.mkt-empty{ color:#8a93a6; padding:30px 4px; text-align:center; }

/* owned/qty badge on set cells */
.cell .qtybadge{ position:absolute; top:6px; left:6px; background:var(--poke-blue); color:#fff; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; }
.cell .condbadge{ position:absolute; top:6px; right:6px; background:var(--poke-yellow); color:#1a1a1a; font-size:10px; font-weight:700; padding:1px 6px; border-radius:8px; }

/* ---- Community board (task 15) ---- */
.comm-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:26px; }
.comm-stat{ background:#151a24; border:1px solid #222a39; border-radius:14px; padding:14px 16px; }
.comm-stat .n{ font-size:24px; font-weight:800; color:#fff; line-height:1.1; }
.comm-stat .n.gold{ color:var(--poke-yellow); }
.comm-stat .l{ font-size:11px; color:#8a93a6; text-transform:uppercase; letter-spacing:.6px; margin-top:4px; }
.comm-stat .sub{ font-size:11px; color:#aab4c6; margin-top:6px; }
.comm-section{ margin:0 0 30px; }
.comm-section > h2{ font-size:16px; font-weight:700; margin-bottom:4px; display:flex; align-items:center; gap:8px; }
.comm-section > .hint{ font-size:12px; color:#8a93a6; margin-bottom:12px; }
.lb{ display:flex; flex-direction:column; gap:7px; }
.lb-row{ display:flex; align-items:center; gap:12px; background:#151a24; border:1px solid #222a39; border-radius:11px; padding:10px 13px; }
.lb-row.me{ border-color:var(--poke-yellow); box-shadow:0 0 0 1px var(--poke-yellow) inset; }
.lb-rank{ font-size:14px; font-weight:800; width:30px; text-align:center; color:#8a93a6; flex:none; }
.lb-row:nth-child(1) .lb-rank{ color:var(--poke-yellow); }
.lb-row:nth-child(2) .lb-rank{ color:#cdd6e6; }
.lb-row:nth-child(3) .lb-rank{ color:#cd7f32; }
.lb-name{ font-weight:700; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-name .you{ font-size:10px; font-weight:700; color:#1a1a1a; background:var(--poke-yellow); padding:1px 6px; border-radius:8px; margin-left:7px; }
.lb-meta{ font-size:12px; color:#8a93a6; flex:none; text-align:right; }
.lb-meta b{ color:#e6e9ef; }
.lb-prog{ flex:none; width:130px; }
.lb-prog .bar{ height:7px; }
.lb-prog .pct{ font-size:11px; color:#aab4c6; margin-bottom:3px; text-align:right; }
.hall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.hall-card{ background:linear-gradient(160deg,#1c2233,#12161f); border:1px solid #3a4358; border-radius:12px; padding:12px 14px; }
.hall-card .ribbon{ font-size:10px; font-weight:800; letter-spacing:.6px; color:#1a1a1a; background:var(--poke-yellow); display:inline-block; padding:1px 8px; border-radius:8px; margin-bottom:8px; }
.hall-card .t{ font-weight:700; font-size:14px; }
.hall-card .u{ font-size:12px; color:#8a93a6; margin-top:3px; }
.comm-empty{ background:#10151e; border:1px dashed #2a3346; border-radius:12px; padding:20px; text-align:center; color:#8a93a6; font-size:13px; }
.comm-empty b{ color:var(--poke-yellow); }
.setpick{ background:#0e131c; border:1px solid #2a3346; border-radius:9px; color:#e6e9ef; font-size:13px; padding:7px 10px; margin-bottom:12px; max-width:340px; }