/* 1025DEX Community v0.31.35 · css/ds-views.css · ausgelagert aus index.html */
/* --- 7 · Uebersicht ------------------------------------------------------- */

.hero{gap:18px}
.ring svg circle:first-child{stroke:var(--panel-3)!important;stroke-width:9!important}
.ring svg circle+circle{stroke-width:9!important;stroke-linecap:round}
.ringnum{font-size:30px;font-weight:680;letter-spacing:-.03em}
.ringsub{font-size:11px;font-weight:520;color:var(--ink-faint);letter-spacing:0;margin-top:4px;text-transform:none}
.bignum{font-size:30px;font-weight:680;letter-spacing:-.03em}
.herostats{padding-top:11px;gap:4px;font-size:13.5px;font-weight:450;color:var(--ink-soft)}
.herostats b{font-size:14px;font-weight:620;color:var(--ink)}
.pball-wm{opacity:.035}

/* Fortschritt je Generation */
.genbars{gap:7px;margin-top:15px;padding-top:13px}
.gtrack{
  height:44px;
  border:0;
  border-radius:var(--r-xs);
  background:var(--panel-3);
  overflow:hidden;
}
html[data-theme="dark"] .gtrack{background:var(--panel-2)}
.gfill{background:linear-gradient(180deg,color-mix(in srgb,var(--owned) 78%,#fff),var(--owned));border-radius:2px}
.glab{font-size:10px;font-weight:520;letter-spacing:.02em;color:var(--ink-faint);margin-top:6px}

/* Personenzeilen */
.person{
  gap:13px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:none;
}
.person .av,.pav{border:0;box-shadow:0 1px 3px rgba(0,0,0,.14);font-weight:620}
.pname-row{font-size:15px;font-weight:600;letter-spacing:-.01em}
.person .val b{font-size:15.5px}
.sharebar{height:6px;border:0;border-radius:var(--r-full);background:var(--panel-3);margin-top:7px}
html[data-theme="dark"] .sharebar{background:var(--panel-2)}
.sharebar i{border-radius:var(--r-full)}

/* Verlauf */
.feed{gap:2px;max-height:300px}
.feed>div{padding:9px 0;font-size:13.5px;font-weight:450;border-top:1px solid var(--line-soft)}
.feed>div:first-child{border-top:0}
.feed .fdot{border:0;width:8px;height:8px;flex-basis:8px}
.feed .ftime{font-size:11.5px;font-weight:450;color:var(--ink-faint)}
.fneu{font-size:9.5px;font-weight:600;letter-spacing:.02em;background:var(--accent);border-radius:var(--r-xs);padding:2px 6px}
.bkrow{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);padding:9px 11px;margin-bottom:7px}

/* Preiszeile */
.preiszeile{
  border:1px solid var(--line-soft);border-radius:var(--r-md);
  padding:10px 12px;font-size:12px;font-weight:450;color:var(--ink-soft);
  background:var(--panel-2);
}
html[data-theme="dark"] .preiszeile{background:transparent}

/* Guenstigste Wunschkarten */
.cheap-card{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel-2);padding:7px;
}
html[data-theme="dark"] .cheap-card{background:var(--panel-2)}
.cheap-img{border:0;border-radius:var(--r-sm);background:var(--panel-3)}
.cheap-dex{font-size:9.5px;font-weight:500;color:var(--ink-faint)}
.cheap-name{font-size:11.5px;font-weight:580;letter-spacing:-.01em}
.cheap-wish{background:var(--wish-soft);border:0;color:var(--wish);font-weight:600;border-radius:var(--r-xs);font-size:8.5px}
.cheap-price{color:var(--owned);font-weight:660;font-size:9.5px}
.cheap-head small{font-weight:450;color:var(--ink-faint)}

.kurve{padding-top:13px;margin-top:13px}
.kurve .klab{font-size:10px;font-weight:450;color:var(--ink-faint)}

/* --- 8 · Pokedex, Finder, Binder ------------------------------------------ */

/* Die festgeklebte Suchleiste blendet weich in den Inhalt ueber */
.stickybar{
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  margin:-14px calc(var(--pad) * -1) 12px;
  padding:12px var(--pad) 10px;
}
.stickybar::after{height:14px;background:linear-gradient(var(--bg),transparent)}

.filters{gap:7px;margin-bottom:12px}

/* Generationen */
.gensec{margin-bottom:12px}
.genhead{
  gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-1);
}
.genhead.open{border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom-color:transparent;box-shadow:none}
.genhead .gnum{
  width:28px;height:28px;flex-basis:28px;border:0;
  background:var(--accent-soft);color:var(--accent);
  font-size:13px;font-weight:640;
}
.genhead .grow b{font-size:15.5px;font-weight:600;letter-spacing:-.014em}
.genhead .grow small{font-size:12.5px;font-weight:450;color:var(--ink-soft);margin-top:1px}
.genhead .gcount{font-size:13px;font-weight:550;color:var(--ink-faint)}
.genhead .gcount.done{color:var(--owned)}
.genhead .caret{color:var(--ink-faint);font-size:12px;transition:transform var(--t-base) var(--ease-out)}
.genhead.open .caret{transform:rotate(90deg)}
.genlist{
  border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);
  box-shadow:var(--sh-1);background:var(--panel);
}

/* Pokemon-Zeile */
.prow{
  gap:10px;padding:7px 12px 7px 14px;min-height:54px;
  border-top:1px solid var(--line-soft);
  background:var(--panel);
}
.prow.open{background:var(--panel-2)}
.prow.st-owned{box-shadow:inset 3px 0 0 var(--owned)}
.prow.st-wish{box-shadow:inset 3px 0 0 var(--wish)}
.prow .pnum{font-size:10.5px;font-weight:500;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.prow .pname b{font-size:14.5px;font-weight:560;letter-spacing:-.012em}
.prow .pname small{font-size:11.5px;font-weight:440;color:var(--ink-faint);margin-top:1px}
.prow .dot{border:0;width:9px;height:9px;flex-basis:9px;box-shadow:0 0 0 2px var(--panel)}
.prow .caret{color:var(--ink-faint);font-size:11px}
.ptype{
  border:0;border-radius:4px;padding:2px 5px;
  font-size:8.5px;font-weight:620;letter-spacing:.01em;text-shadow:none;
}
.pdet{
  background:var(--panel-2);
  border-top:1px solid var(--line-soft);
  padding:14px;
}
.pdet::before,.dex-detail-hero::before{opacity:.04;font-weight:700;letter-spacing:-.06em}

/* Kachelraster */
.dexgrid{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.dexgallery{gap:8px}
.cell{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);padding:6px;
  box-shadow:none;
  transition:transform var(--t-fast) var(--ease-out),box-shadow var(--t-fast) ease,border-color var(--t-fast) ease;
}
.dexgallery .cell{padding:4px;box-shadow:var(--sh-1)}
.cell .num{font-size:9.5px;font-weight:500;color:var(--ink-faint);top:5px;left:7px}
.cell .nm{font-size:11px;font-weight:540;letter-spacing:-.008em;padding:4px 2px 3px}
.dexgallery .cell .nm{font-size:10px;font-weight:560;padding:4px 1px 2px}
.cell .dot{border:0;width:9px;height:9px;top:5px;right:6px;box-shadow:0 0 0 2px var(--panel)}
.cell.s-owned{border-color:color-mix(in srgb,var(--owned) 45%,var(--line))}
.cell.s-wish{border-color:color-mix(in srgb,var(--wish) 45%,var(--line))}
.cell img{border-radius:var(--r-xs)}
.d-owned{background:var(--owned)}.d-wish{background:var(--wish)}.d-empty{background:var(--empty)}.d-art{background:var(--art)}
/* In der Galerie sitzt der Statuspunkt oben rechts. Der Artwork-Punkt
   rueckt genau eine Punktbreite nach links, damit sich beide nicht
   ueberdecken. */
.cell .dot.d-art{right:19px}

/* Finder */
.setrow{
  gap:12px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-1);margin-bottom:9px;
}
.setrow b{font-size:15px;font-weight:600;letter-spacing:-.012em}
.setrow small{font-size:12.5px;font-weight:450;color:var(--ink-soft)}
.setrow /* v0.31.35 · Ohne Logo stand hier ein gestrichelter Kasten - bei vielen
   Sets in Folge wirkte die Liste dadurch wie kaputt. Jetzt eine ruhige
   Flaeche, die den Platz haelt, ohne sich zu melden. */
.setph{border:0;border-radius:var(--r-xs);background:color-mix(in srgb,var(--panel-2) 65%,transparent)}
.setrow .caret{color:var(--ink-faint);font-size:15px}
.res{gap:11px}
.res .item{
  gap:12px;padding:11px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-1);
}
.res .item img{border-radius:var(--r-xs);background:var(--panel-2)}
.res .item img.noimg{border:1px dashed var(--line)}
.res .meta b{font-size:14.5px;font-weight:580;letter-spacing:-.012em}
.price{font-weight:640}
.bigcard img{border:0;border-radius:var(--r-md);box-shadow:var(--sh-2)}
.bigcard .ph{border:1px dashed var(--line);border-radius:var(--r-md)}
.skelrow{border:1px solid var(--line);border-radius:var(--r-lg);padding:11px;background:var(--panel)}
.skel{background:linear-gradient(100deg,var(--panel-2) 38%,var(--panel-3) 50%,var(--panel-2) 62%);background-size:200% 100%;border-radius:var(--r-xs)}

/* Preisblock */
.pricebox{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel-2);padding:13px 14px;margin:12px 0;
}
html[data-theme="dark"] .pricebox{background:var(--panel-2)}
.pricebox .pbig{font-size:26px;font-weight:680;letter-spacing:-.03em}
.pricebox .prow2{border-top:1px solid var(--line-soft);padding:5px 0}
.cmlink{
  display:flex;align-items:center;justify-content:center;min-height:42px;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);color:var(--ink);
  font-size:13.5px;font-weight:560;
}
.cmlink.alt{border:0;background:none;color:var(--ink-faint);font-weight:450;min-height:0}

/* Binder */
.page h3,.pghead b{color:var(--ink-soft)}
.pghead .pgbar{height:6px;border:0;border-radius:var(--r-full);background:var(--panel-3)}
.pghead .pgbar i{border-radius:var(--r-full)}
.pghead .pgn{font-size:11px;font-weight:500;color:var(--ink-faint)}
.sheet{
  gap:6px;padding:8px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-1);
}
.slot{
  border:0;border-radius:var(--r-xs);
  background:var(--panel-3);
  box-shadow:inset 0 0 0 1px var(--line-soft);
}
html[data-theme="dark"] .slot{background:var(--panel-2)}
.slot.s-owned{background:var(--owned)}
.slot.s-wish{background:var(--wish)}
.slot.hasart{outline:2px solid rgba(255,255,255,.7);outline-offset:-3px}
.slot.hit{outline:3px solid var(--warn);outline-offset:1px}
.slot .ow{font-size:8.5px;font-weight:600}
.gendiv{
  gap:11px;padding:13px 15px;margin:20px 0 11px;
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);box-shadow:var(--sh-1);
}
.gendiv .gd-num{border:0;background:var(--accent-soft);color:var(--accent);width:30px;height:30px;flex-basis:30px;font-weight:640}
.gendiv b{font-size:15px;font-weight:600;letter-spacing:-.012em}
.gendiv small{font-size:12.5px;font-weight:450;color:var(--ink-soft)}
.gendiv .gd-count{font-weight:550;font-size:13px;color:var(--ink-faint)}
.legend{font-size:12.5px;font-weight:450;color:var(--ink-soft)}
.legend i{border:0;border-radius:4px;box-shadow:0 0 0 1px var(--line-soft)}
.slotcard{
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--panel);padding:9px;
}
.slotcard .ph{border:1px dashed var(--line);border-radius:var(--r-xs);background:var(--panel-2)}
.slotx{
  border:0;width:26px;height:26px;
  background:var(--panel);color:var(--accent);
  box-shadow:var(--sh-2),0 0 0 1px var(--line);
}
.artbox{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel);padding:10px}
.binder-arrange-bar{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  box-shadow:var(--sh-2);padding:11px;
}
.binder-arrange-actions button{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel);font-size:12.5px;font-weight:560;min-height:38px}
.binder-arrange-actions .save{background:var(--owned);border-color:transparent;color:#fff}
.binder-divider-page{
  border:1px solid var(--line);border-radius:var(--r-2xl);
  background:var(--panel);box-shadow:var(--sh-1);
}
.binder-divider-page .gd-num{border:0;background:var(--accent);color:#fff}
.public-binder-grid{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel)}
.public-binder-slot{border:0;box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:var(--r-xs);background:var(--panel-3)}
.empty-state b{font-size:17px;font-weight:620;letter-spacing:-.016em}
.empty-state p{font-size:13.5px;font-weight:450}


/* --- 9 · Scan Lab ---------------------------------------------------------
   Der Scanner hatte eine eigene Graustufen-Palette und eigene Schrift-
   groessen und wirkte dadurch wie eine fremde App im selben Gehaeuse.
   Er benutzt jetzt dieselben Token wie alles andere. */

html #v-scan,
html[data-theme="light"] #v-scan,
html[data-theme="dark"] #v-scan{
  --scan-accent:var(--accent);
  background:transparent;
  font-family:var(--ui);
  max-width:var(--maxw);
  padding:4px 0 20px;
}
html[data-theme="dark"] #v-scan{--scan-accent:var(--accent)}

#v-scan h1{font:680 27px/1.14 var(--ui);letter-spacing:-.026em;color:var(--ink)}
#v-scan h2,#v-scan .sl-h{font:640 20px/1.24 var(--ui);letter-spacing:-.02em;color:var(--ink)}
#v-scan .sl-eyebrow{font-size:12.5px;font-weight:550;letter-spacing:0;text-transform:none;color:var(--ink-soft)}
#v-scan .sl-hint,#v-scan .sl-tip{font:450 14.5px/1.52 var(--ui);color:var(--ink-soft)}
#v-scan .sl-box{
  border:1px solid var(--line);border-radius:var(--r-xl);
  background:var(--panel);box-shadow:var(--sh-1);padding:18px;margin-bottom:14px;
}
#v-scan .btn{
  border:1px solid var(--line);border-radius:var(--r-md);
  min-height:48px;font:600 15.5px/1.2 var(--ui);letter-spacing:-.01em;
  background:var(--panel-2);color:var(--ink);box-shadow:none;
}
#v-scan .btn.sl-go,#v-scan .btn.sl-find,#v-scan .sl-idle .btn,#v-scan .sl-chips button.on{
  background:var(--accent);border-color:transparent;color:#fff;box-shadow:var(--sh-accent);
}
#v-scan .sl-go{min-height:52px;border-radius:var(--r-md)}
#v-scan .sl-purpose{gap:10px;background:none;border:0;padding:0}
#v-scan .sl-purpose button{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--panel);padding:15px 14px;
}
#v-scan .sl-purpose button[aria-pressed="true"]{
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);
  background:var(--accent-soft);
}
#v-scan .sl-purpose strong{font-size:16px;font-weight:620;letter-spacing:-.014em}
#v-scan .sl-purpose span{font-size:12.5px;font-weight:450;color:var(--ink-soft);margin-top:5px}
#v-scan .sl-camera-badge{border:0;background:var(--panel-2);color:var(--ink-soft);border-radius:var(--r-full);padding:7px 11px;font-size:11px;font-weight:550}
#v-scan .sl-camera-badge.active{background:var(--accent-soft);color:var(--accent)}
#v-scan .sl-weg{gap:10px}
#v-scan .sl-weg i{border:1px solid var(--line);background:var(--panel-2);color:var(--ink-soft);width:24px;height:24px;font-family:var(--ui);font-weight:600}
#v-scan .sl-weg li.on i{background:var(--accent);border-color:transparent;color:#fff}
#v-scan .sl-weg li.fertig i{background:var(--owned-soft);border-color:transparent;color:var(--owned)}
#v-scan .sl-live{border:0;border-radius:var(--r-lg);background:var(--panel-2);overflow:hidden}
#v-scan .sl-idle{background:var(--panel-2)}
#v-scan .sl-idle h2{font-size:20px;font-weight:640;letter-spacing:-.02em}
#v-scan .sl-idle p{font:450 14px/1.5 var(--ui);color:var(--ink-soft)}
#v-scan .sl-status{
  background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border:1px solid var(--glass-line);border-radius:var(--r-sm);
  color:var(--ink);font:500 12.5px/1.4 var(--ui);
}
#v-scan .sl-in{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);font:450 16.5px/1.4 var(--ui);min-height:48px;text-align:left}
#v-scan .sl-lab{font:550 13px/1.4 var(--ui);color:var(--ink-soft);letter-spacing:0;text-transform:none}
#v-scan .sl-canvas{border:1px solid var(--line);border-radius:var(--r-md)}
#v-scan .sl-cand{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:7px}
#v-scan .sl-cand.on{border:1.5px solid var(--accent);padding:6.5px;background:var(--accent-soft)}
#v-scan .sl-cand b{font:580 12.5px/1.34 var(--ui)}
#v-scan .sl-cand small{font:450 11px/1.4 var(--ui);color:var(--ink-soft)}
#v-scan .sl-top{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);padding:9px 13px}
#v-scan .sl-top button{background:transparent;border:0;color:var(--accent);font-weight:580}
#v-scan .sl-werte div{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);padding:16px 8px}
#v-scan .sl-werte i{font:500 11.5px/1.4 var(--ui);color:var(--ink-soft);letter-spacing:0;text-transform:none}
#v-scan .sl-werte b{font:660 clamp(19px,4vw,26px)/1.3 var(--ui);color:var(--accent);letter-spacing:-.024em}
#v-scan .sl-shutter{border:3px solid var(--accent);background:var(--panel);box-shadow:var(--sh-2)}
#v-scan .sl-shutter span{background:var(--accent)}
#v-scan .sl-chips button{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);color:var(--ink);font-weight:560;font-size:14px}
#v-scan .sl-neben button{border:1px solid var(--line);border-radius:var(--r-full);background:var(--panel);color:var(--ink-soft);font:550 12.5px/1.4 var(--ui);min-height:36px}
#v-scan .sl-auf{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2);color:var(--ink-soft);font-weight:560}
#v-scan .sl-grade-panel,#v-scan .sl-auto-report{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--panel-2);padding:16px}
#v-scan .sl-grade-grid>div{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel)}
#v-scan .sl-grade-grid b{font:640 18px/1.35 var(--ui);letter-spacing:-.018em}
#v-scan .sl-grade-measured h4,#v-scan .sl-grade-reasons h4,#v-scan .sl-grade-open h4,
#v-scan .sl-scan-findings h4,#v-scan .sl-auto-report h4{font:640 17px/1.35 var(--ui);letter-spacing:-.016em}
#v-scan .sl-grade-reason,#v-scan .sl-scan-finding,#v-scan .sl-auto-finding{border-top:1px solid var(--line-soft);font:550 14px/1.45 var(--ui)}
#v-scan .sl-grade-open{border:1px solid var(--line);border-radius:var(--r-md)}
#v-scan .sl-damage-choices button,#v-scan #slDamageChoices button{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);color:var(--ink);font:560 15px/1.4 var(--ui)}
#v-scan .sl-damage-choices button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 3px 0 var(--accent);background:var(--accent-soft)}
#v-scan .sl-damage-steps button{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel)}
#v-scan .sl-damage-steps button[aria-current="step"]{border:1px solid var(--accent);background:var(--accent-soft)}
#v-scan #slDamageLoupe,#v-scan .sl-zoombox canvas{border:1px solid var(--line);border-radius:var(--r-md)}
#v-scan .sl-scan-category{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel);font:500 13px/1.4 var(--ui)}
#v-scan button.sl-scan-category{border-bottom:2px solid var(--accent)}
#v-scan .sl-scan-findings{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--r-md)}
#v-scan .sl-scan-pin span{border:2px solid #fff;background:var(--accent)}
#v-scan .sl-photo-preview{background:var(--panel-2);border-radius:var(--r-md)}
#v-scan .sl-action-bar,#v-scan .sl-damage-actions{
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  -webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);
  border-top:1px solid var(--line-soft);
  bottom:calc(84px + env(safe-area-inset-bottom));
}
#v-scan .sl-dia{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2)}
.sl-num{font:680 42px/1 var(--ui);letter-spacing:-.03em}
.sl-grade{border:1px solid var(--line);border-radius:var(--r-md);background:var(--panel-2)}
.sl-grade b{font:680 30px/1 var(--ui);letter-spacing:-.03em}
.sl-kv{border-bottom:1px solid var(--line-soft);font-size:13.5px}
.sl-zeilen img{border:1px solid var(--line);border-radius:var(--r-xs)}
.cropwrap,.eckwrap,#eckLupe{border:1px solid var(--line);border-radius:var(--r-md)}
.eckgriff{border:2px solid var(--warn);background:rgba(0,0,0,.4)}