*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
:root{
  --bg:#f5f5f7;--card:#fff;--text:#1e293b;--text2:#64748b;--border:#e2e8f0;
  --sidebar:#1a1a1a;--accent:#7c3aed;--accent2:#3b82f6;--ok:#16a34a;--wish:#dc2626;
}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
body.dark{--bg:#0f172a;--card:#1e293b;--text:#f1f5f9;--text2:#94a3b8;--border:#334155;--sidebar:#0f172a}

/* Login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:linear-gradient(135deg,#1e1b4b,#0f172a)}
.login-box{background:var(--card);color:var(--text);border-radius:16px;padding:28px 24px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px}
.login-box h1{font-size:1.5rem;font-weight:900;background:linear-gradient(135deg,#7c3aed,#3b82f6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-sub{font-size:.85rem;color:var(--text2);margin-bottom:6px}
.login-box label{font-size:.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.login-box input{padding:12px;border:1px solid var(--border);border-radius:8px;font-size:1rem;background:var(--bg);color:var(--text)}
.login-box input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,58,237,.2)}
.login-msg{font-size:.85rem;color:var(--wish);min-height:1.2em}

/* Layout */
.wrap{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:100vh}
.side{background:var(--sidebar);color:#fff;padding:16px;overflow-y:auto;position:sticky;top:0;height:100vh;z-index:60;display:flex;flex-direction:column}
.side h1{font-size:1.3rem;font-weight:900;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}
.side-sub{font-size:.7rem;color:#94a3b8;margin-bottom:16px}
.sbox{background:#2a2a3a;border-radius:10px;padding:12px;margin-bottom:8px}
.sbox h3{font-size:.7rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.sbox .val{font-size:1.5rem;font-weight:900;color:#a78bfa}
.sbox .sub{font-size:.7rem;color:#94a3b8}
.progress-bar{height:6px;background:#333;border-radius:3px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;width:0;background:linear-gradient(90deg,#7c3aed,#3b82f6);border-radius:3px;transition:width .5s}
.glist{margin-top:16px;border-top:1px solid #333;padding-top:12px}
.glist h4{font-size:.7rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.gitem{padding:8px;font-size:.8rem;cursor:pointer;border-radius:6px;margin-bottom:2px;transition:background .2s;width:100%;text-align:left;background:none;border:none;color:#fff;display:block}
.gitem:hover{background:#2a2a3a}
.gitem.active{background:#7c3aed33}
.gitem-row{display:flex;justify-content:space-between;gap:8px}
.gmini{height:3px;background:#333;border-radius:2px;overflow:hidden;margin-top:4px;width:100%}
.gmini-fill{height:100%;border-radius:2px;background:#a78bfa}
.side-foot{margin-top:auto;padding-top:16px;border-top:1px solid #333;display:flex;flex-direction:column;gap:6px}
.btn-side{background:#2a2a3a;color:#fff;border-color:#333}
.version{font-size:.65rem;color:#64748b}

.main{padding:16px;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px;background:var(--card);border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.06);margin-bottom:12px;position:sticky;top:0;z-index:50}
.topbar-left{display:flex;align-items:center;gap:8px;min-width:0}
.topbar h2{font-size:1rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbtns{display:flex;gap:6px}
.btn{padding:8px 14px;border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:600;background:var(--card);color:var(--text);border:1px solid var(--border);transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:4px}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);padding:12px 16px;font-size:.9rem}
.btn-primary:disabled{opacity:.6;cursor:wait}
.btn-icon{width:38px;height:38px;padding:0;font-size:1.1rem}
#menuBtn{display:none}

/* Tabs */
.tabs{display:flex;gap:4px;margin-bottom:12px;overflow-x:auto;padding-bottom:4px}
.tab{padding:10px 16px;background:var(--card);border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:.8rem;font-weight:600;white-space:nowrap;transition:all .2s;color:var(--text2)}
.tab:hover{border-color:var(--accent)}
.tab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.tab.active.t-col{background:var(--ok);border-color:var(--ok)}
.tab.active.t-wish{background:var(--wish);border-color:var(--wish)}

/* Filters */
.filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.filters input,.filters select{padding:9px 12px;border:1px solid var(--border);border-radius:8px;font-size:.85rem;background:var(--card);color:var(--text);outline:none;min-width:0}
.filters input:focus,.filters select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(124,58,237,.15)}
.filters input{flex:1 1 180px}
.filters select{flex:1 1 140px;max-width:220px}
.rcount{font-size:.75rem;color:var(--text2);padding:10px 4px;white-space:nowrap}

/* Reeksen */
.gsec{margin-bottom:20px;border-radius:12px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.ghdr{padding:12px 16px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:8px;background:#4f46e5}
.ghdr h3{font-size:.95rem;font-weight:700}
.ghdr small{font-size:.7rem;opacity:.9;white-space:nowrap}
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;padding:12px;background:var(--card)}

/* Kaarten */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;overflow:hidden;transition:transform .2s,box-shadow .2s;cursor:pointer;position:relative;display:flex;flex-direction:column}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.1)}
.card.owned{border-color:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.2)}
.card-img{height:110px;display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;background:#fff}
body.dark .card-img{background:#f1f5f9}
.card-img img{width:100%;height:100%;object-fit:contain}
.placeholder{font-size:2.5rem}
.card-el{position:absolute;top:4px;left:4px;font-size:.55rem;padding:2px 6px;border-radius:8px;font-weight:700;color:#fff;background:#475569}
.card-badge{position:absolute;top:4px;right:4px;font-size:.55rem;padding:2px 6px;border-radius:8px;font-weight:700;color:#fff;background:rgba(0,0,0,.6)}
.card-body{padding:8px;display:flex;flex-direction:column;flex:1}
.card-name{font-size:.78rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:.65rem;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-price{font-size:.85rem;font-weight:800;color:var(--ok);margin-top:4px;min-height:1.1em}
.card-price.none{color:var(--text2);font-weight:600;font-size:.7rem}
.card-btns{display:flex;gap:4px;margin-top:auto;padding-top:6px}
.cbtn{flex:1;padding:7px 4px;font-size:.68rem;font-weight:700;border:none;border-radius:5px;cursor:pointer;transition:all .15s;background:#e5e7eb;color:#555}
.cbtn.on.own{background:#22c55e;color:#fff}
.cbtn.on.wish{background:var(--wish);color:#fff}
body.dark .cbtn{background:#334155;color:#cbd5e1}
.cond{font-size:.55rem;padding:2px 5px;border-radius:4px;font-weight:700;color:#fff;background:#64748b;display:inline-block;margin-top:4px;align-self:flex-start}

/* Elementkleuren */
.el-magic{background:#a855f7}.el-earth{background:#92400e}.el-water{background:#3b82f6}
.el-fire{background:#ef4444}.el-air{background:#06b6d4}.el-life{background:#22c55e}
.el-tech{background:#f97316}.el-undead{background:#6b21a8}.el-dark{background:#1e293b}
.el-light{background:#f59e0b}.el-kaos{background:#dc2626}.el-land{background:#92400e}
.el-sea{background:#0891b2}.el-sky{background:#7dd3fc;color:#1e293b}.el-adventure{background:#059669}
/* Reekskleuren */
.gc-spyro{background:#16a34a}.gc-giants{background:#ea580c}.gc-swap{background:#0891b2}
.gc-trap{background:#dc2626}.gc-super{background:#7c3aed}.gc-imag{background:#2563eb}
.gc-elite{background:#d97706}.gc-traps{background:#9333ea}.gc-vehicles{background:#059669}
.gc-crystals{background:#db2777}.gc-chase{background:#4f46e5}

/* Detailvenster */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;justify-content:center;align-items:center;padding:16px}
.modal-overlay.show{display:flex}
.modal{background:var(--card);border-radius:16px;max-width:520px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal-header{position:relative;height:200px;overflow:hidden;border-radius:16px 16px 0 0;background:#fff;display:flex;align-items:center;justify-content:center}
.modal-header img{width:100%;height:100%;object-fit:contain}
.modal-header .placeholder{font-size:5rem}
.modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:rgba(0,0,0,.5);color:#fff;border:none;font-size:1.2rem;cursor:pointer}
.modal-body{padding:20px}
.modal-name{font-size:1.4rem;font-weight:900;margin-bottom:4px;word-break:break-word}
.modal-game{font-size:.85rem;color:var(--text2);margin-bottom:14px}
.modal-actions{display:flex;gap:8px;margin-bottom:14px}
.modal-actions .btn{flex:1;padding:12px;font-size:.85rem}
.modal-actions .btn.on-own{background:#22c55e;color:#fff;border-color:#22c55e}
.modal-actions .btn.on-wish{background:var(--wish);color:#fff;border-color:var(--wish)}
.modal-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.modal-stat{background:var(--bg);padding:10px 12px;border-radius:8px}
.modal-stat label,.mlabel,.modal-price h4{font-size:.65rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);display:block;margin-bottom:4px;font-weight:700}
.modal-stat input,.modal-stat select,#mNotes{width:100%;padding:9px;border:1px solid var(--border);border-radius:8px;font-size:.9rem;background:var(--card);color:var(--text);font-family:inherit}
#mNotes{resize:vertical}
.modal-save{display:flex;align-items:center;gap:10px;margin:10px 0 16px}
.save-msg{font-size:.8rem;color:var(--ok)}
.save-msg.err{color:var(--wish)}
.modal-price{background:var(--bg);border-radius:8px;padding:12px}
.mval{font-size:1.3rem;font-weight:800;color:var(--ok)}
.sub{font-size:.75rem;color:var(--text2)}
.hist{width:100%;margin-top:10px;border-collapse:collapse;font-size:.78rem}
.hist th,.hist td{text-align:left;padding:4px 6px;border-bottom:1px solid var(--border)}
.hist th{color:var(--text2);font-weight:600}
.modal-links{margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.modal-links a{color:var(--accent);text-decoration:none;font-size:.85rem;font-weight:600}
.modal-links a:hover{text-decoration:underline}
.empty{text-align:center;padding:48px 16px;color:var(--text2);font-size:1rem}
.toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#1e293b;color:#fff;padding:10px 16px;border-radius:8px;font-size:.85rem;z-index:500;box-shadow:0 6px 20px rgba(0,0,0,.3)}

@media(max-width:768px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .side{position:fixed;left:-290px;top:0;width:280px;height:100vh;transition:left .3s ease;z-index:200}
  .side.open{left:0}
  .overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:199}
  .overlay.show{display:block}
  #menuBtn{display:inline-flex}
  .main{padding:10px}
  .filters select{max-width:none}
}
@media(max-width:480px){
  .ggrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
  .modal-grid{grid-template-columns:1fr}
  .modal-header{height:160px}
}