BEP

/* VELMET UI palette + Light/Dark mode */

:root{
  color-scheme: light dark;

  /* LIGHT (default) */
  --bg:#e9eaec;        /* page background */
  --panel:#f2f3f5;     /* sections/cards */
  --panel2:#ffffff;    /* table/inputs surface */

  --border: rgba(18,18,18,.14);
  --text:#111214;
  --muted: rgba(17,18,20,.66);

  --accent:#cc431f;
  --accent-contrast:#f8f8f8;

  --shadow: 0 8px 24px rgba(18,18,18,.10);
  --radius:5px;

  /* UI surfaces */
  --topbar-bg: rgba(242,243,245,.72);
  --thead-bg:  rgba(242,243,245,.92);
  --row-hover: rgba(18,18,18,.035);
  --code-bg:   rgba(18,18,18,.05);

  /* flashes */
  --flash-ok-bg: rgba(18,18,18,.045);
  --flash-ok-border: rgba(18,18,18,.14);
  --flash-err-bg: rgba(204,67,31,.11);
  --flash-err-border: rgba(204,67,31,.32);
  --flash-info-bg: rgba(18,18,18,.045);
  --flash-info-border: rgba(18,18,18,.14);

  /* semantic */
  --pos:#1a8f4a;
  --neg:#b83a3a;
}

/* Auto dark if user prefers (JS can override via [data-theme]) */
@media (prefers-color-scheme: dark){
  :root{
    /* DARK */
    --bg:#0f1113;
    --panel:#14171a;
    --panel2:#1a1e22;

    --border: rgba(230,230,230,.14);
    --text:#e6e7e9;
    --muted: rgba(230,230,230,.68);

    --accent:#cc431f;
    --accent-contrast:#0f1113;

    --shadow: 0 8px 24px rgba(0,0,0,.48);

    --topbar-bg: rgba(15,17,19,.72);
    --thead-bg:  rgba(15,17,19,.82);
    --row-hover: rgba(255,255,255,.035);
    --code-bg:   rgba(255,255,255,.06);

    --flash-ok-bg: rgba(230,230,230,.055);
    --flash-ok-border: rgba(230,230,230,.14);
    --flash-err-bg: rgba(204,67,31,.16);
    --flash-err-border: rgba(204,67,31,.42);
    --flash-info-bg: rgba(230,230,230,.055);
    --flash-info-border: rgba(230,230,230,.14);

    --pos:#2aa866;
    --neg:#cf4a4a;
  }
}

html[data-theme="light"]{
  --bg:#e9eaec;
  --panel:#f2f3f5;
  --panel2:#ffffff;

  --border: rgba(18,18,18,.14);
  --text:#111214;
  --muted: rgba(17,18,20,.66);

  --accent:#cc431f;
  --accent-contrast:#f8f8f8;

  --shadow: 0 8px 24px rgba(18,18,18,.10);

  --topbar-bg: rgba(242,243,245,.72);
  --thead-bg:  rgba(242,243,245,.92);
  --row-hover: rgba(18,18,18,.035);
  --code-bg:   rgba(18,18,18,.05);

  --flash-ok-bg: rgba(18,18,18,.045);
  --flash-ok-border: rgba(18,18,18,.14);
  --flash-err-bg: rgba(204,67,31,.11);
  --flash-err-border: rgba(204,67,31,.32);
  --flash-info-bg: rgba(18,18,18,.045);
  --flash-info-border: rgba(18,18,18,.14);

  --pos:#1a8f4a;
  --neg:#b83a3a;
}

html[data-theme="dark"]{
  --bg:#0f1113;
  --panel:#14171a;
  --panel2:#1a1e22;

  --border: rgba(230,230,230,.14);
  --text:#e6e7e9;
  --muted: rgba(230,230,230,.68);

  --accent:#cc431f;
  --accent-contrast:#0f1113;

  --shadow: 0 8px 24px rgba(0,0,0,.48);

  --topbar-bg: rgba(15,17,19,.72);
  --thead-bg:  rgba(15,17,19,.82);
  --row-hover: rgba(255,255,255,.035);
  --code-bg:   rgba(255,255,255,.06);

  --flash-ok-bg: rgba(230,230,230,.055);
  --flash-ok-border: rgba(230,230,230,.14);
  --flash-err-bg: rgba(204,67,31,.16);
  --flash-err-border: rgba(204,67,31,.42);
  --flash-info-bg: rgba(230,230,230,.055);
  --flash-info-border: rgba(230,230,230,.14);

  --pos:#2aa866;
  --neg:#cf4a4a;
}


*{box-sizing:border-box}
html,body{height:100%}

/* Mobile UX: prevent double-tap zoom (requested) */
html, body{touch-action: manipulation;}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

a{color:inherit}
.link{
  color:var(--text);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

.tableWrap{overflow-x:auto;}

.tableWrap table{min-width:1200px;}


code, .mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}
code{
  background:var(--code-bg);
  border:1px solid var(--border);
  padding:2px 6px;
  border-radius: 4px;
}

.wrap{
  max-width:95%;
  margin:0 auto;
  padding:16px 18px;
  padding-left: calc(18px + env(safe-area-inset-left));
  padding-right: calc(18px + env(safe-area-inset-right));
}

.topbar{
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter:saturate(120%) blur(10px);
  background:var(--topbar-bg);
  border-bottom:1px solid var(--border);
}

/* Live price ticker (below header) */
.priceTicker{
  background: var(--panel2);
  border-bottom: 1px solid var(--border);
}
.priceTickerInner{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:10px;
  padding-bottom:10px;
}
.priceTickerViewport{flex:1;min-width:0;overflow:hidden}
.priceTickerTrack{
  display:flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  animation: priceTickerScroll var(--ticker-duration, 28s) linear infinite;
	justify-content: end !important;
}
.priceTickerViewport:hover .priceTickerTrack,
.priceTickerViewport.isPaused .priceTickerTrack{animation-play-state:paused}
.priceTickerGroup{display:flex;align-items:center}
.priceTickerItem{
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-weight:900;
  font-size:13px;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  padding:6px 10px;
  cursor:default;
  white-space:nowrap;
  text-decoration:none;
}
.priceTickerItem:hover{text-decoration:none}
.priceTickerItem:active{transform:none}
.priceTickerItem .price{font-weight:900}
.priceTickerItem .chg{font-weight:900;font-size:12px;margin-left:6px}
.priceTickerItem .chg.pos{color:var(--pos)}
.priceTickerItem .chg.neg{color:var(--neg)}
.priceTickerItem .chg.neu{color:var(--muted)}
.priceTickerSep{
  color:var(--muted);
  font-weight:900;
  padding:0 6px;
  user-select:none;
}
.priceTickerMeta{flex:0 0 auto;white-space:nowrap}
@media (max-width: 520px){
  .priceTickerMeta{display:none}
  .priceTickerItem{padding-left:10px;padding-right:10px}
}

@keyframes priceTickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-1 * var(--ticker-distance, 0px)))}
}

@media (prefers-reduced-motion: reduce){
  .priceTickerViewport{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .priceTickerTrack{animation:none}
  .priceTickerViewport::-webkit-scrollbar{display:none}
  .priceTickerViewport{scrollbar-width:none}
}

/* Mobile: ticker stays auto-moving, but becomes manually draggable while held */
.priceTickerViewport.isScrollTicker{overflow-x:auto;-webkit-overflow-scrolling:touch}
.priceTickerViewport.isScrollTicker .priceTickerTrack{animation:none}
.priceTickerViewport.isScrollTicker::-webkit-scrollbar{display:none}
.priceTickerViewport.isScrollTicker{scrollbar-width:none}

.topbarInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.inp {
    max-width: 100%;
    min-height: 40px;
    background: #1a1e22;
    border: 1px solid var(--border);
	color: white;
}


.brand .logo {
  display: block;
  max-width: 120px;
  height: auto;
}

.title{font-weight:900;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{color:var(--muted);font-size:13px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.topActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.userBox{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.userEmail{color:var(--muted);font-size:13px;max-width:45vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (max-width: 520px){
  .topbarInner{align-items:flex-start}
  .title{font-size:15px}
  .userEmail{max-width:70vw}
}

/* Sections */
.section{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: 4px;
  padding:14px;
  margin:14px 0;
  box-shadow: var(--shadow);
}
.sectionHead{
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.section h2{margin:0;font-size:18px}
.muted{color:var(--muted)}
.small{font-size:13px}
.note{margin-top:10px}

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
  margin:10px 0 14px;
}
@media (max-width: 980px){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 520px){
  .cards{grid-template-columns:1fr}
}

.card{
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius: 4px;
  padding:12px;
}
.card .metal{font-weight:800;font-size:14px}
.card .price{font-size:20px;font-weight:900;margin-top:6px}
.card .subline{color:var(--muted);font-size:12px;margin-top:6px;display:flex;gap:10px;flex-wrap:wrap}

.notice{
  margin-top:12px;
  padding:10px 12px;
  border-radius: 4px;
  background:var(--panel2);
  border:1px dashed var(--border);
  color:var(--muted);
  font-size:13px;
}

/* Table */
.tableWrap{
  overflow:auto;
  border-radius: 4px;
  border:0;
  background:transparent;
}
.tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0 10px;
  min-width:1100px;
}
.tbl th,.tbl td{
  padding:10px 12px;
  border-bottom:none;

}
.tbl thead th{
  position:sticky;
  top:0;
  background:var(--thead-bg);
  backdrop-filter: blur(10px);
  z-index:1;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  border-bottom:1px solid var(--border);
}
@media (prefers-color-scheme: dark){
  .tbl thead th{ }
}
html[data-theme="dark"] .tbl thead th{ background:var(--thead-bg); }

.tbl tbody td{
  background:var(--panel2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.tbl tbody td:first-child{
  border-left:1px solid var(--border);
  border-top-left-radius:14px;
  border-bottom-left-radius:14px;
}
.tbl tbody td:last-child{
  border-right:1px solid var(--border);
  border-top-right-radius:14px;
  border-bottom-right-radius:14px;
}

.tbl tbody tr:hover td{background:var(--row-hover)}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td.actions{white-space:nowrap}
.tbl tfoot td{border-bottom:none}
.sumRow td{font-weight:900}

/* Responsive table: stack rows on small screens */
@media (max-width: 820px){
  .tbl{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:block;border-bottom:1px solid var(--border)}
  .tbl td{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 12px;
    border-bottom:none;
  }
  .tbl td::before{
    content: attr(data-label);
    color:var(--muted);
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.02em;
    padding-right:10px;
    flex: 0 0 auto;
    max-width: 48%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .tbl td.actions{justify-content:flex-end}
  .tbl td.actions::before{content:'';display:none}
  .tbl tfoot tr{display:block}
  .sumRow td{display:flex}
}

/* Pills */
.pill{
  display:inline-block;
  padding:2px 8px;
  border-radius: 4px;
  border:1px solid var(--border);
  background:rgba(127,127,127,.10);
  color:var(--muted);
  font-size:12px;
}

/* Inputs */
input[type="text"], input[type="date"], input[type="email"], input[type="password"], select, textarea{
  width:100%;
  padding:9px 10px;
  border-radius: 4px;
  border:1px solid var(--border);
  background:var(--panel2);
  color:var(--text);
  font-size:14px;
  outline:none;
}
textarea{min-height:36px;resize:vertical}
input:focus, select:focus, textarea:focus{border-color:var(--text)}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--panel2);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
    min-height: 40px;
	text-decoration: none !important;
}
.btn:hover{filter:brightness(0.98)}
.btn:active{transform:translateY(1px)}
.btn.ghost{
  background:transparent;
  border-color:var(--border);
}
.btn.ghost:hover{background:var(--row-hover)}

.btn.primary{
  background:var(--accent);
  color:var(--accent-contrast);
  border-color:rgba(127,127,127,.25);
}
.btn.active{
  background:var(--accent);
  color:var(--accent-contrast);
  border-color:rgba(127,127,127,.25);
}
.btn.danger{
  background:var(--panel2);
  border-style:dashed;
}

.actions .btn{margin-right:6px}
.actions .btn:last-child{margin-right:0}

.rowWarn{
  outline:1px dashed rgba(127,127,127,.55);
}

/* Flash messages */
.flashStack{display:flex;flex-direction:column;gap:10px;margin:12px 0}
.flash{
  padding:10px 12px;
  border-radius: 4px;
  border:1px solid var(--flash-info-border);
  background:var(--flash-info-bg);
  color:var(--text);
  font-size:14px;
}
.flash.success{border-color:var(--flash-ok-border);background:var(--flash-ok-bg)}
.flash.error{border-color:var(--flash-err-border);background:var(--flash-err-bg)}
.flash.info{border-color:var(--flash-info-border);background:var(--flash-info-bg)}

/* Auth pages */
.authBody .section{box-shadow:none}
.authWrap{max-width:1400px}
.authCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: 4px;
  padding:16px;
  margin:14px auto;
  box-shadow: var(--shadow);
}
.authTitle{margin:0 0 8px;font-size:20px;font-weight:900}
.formGrid{display:flex;flex-direction:column;gap:10px;margin-top:12px}
label{font-size:13px;color:var(--muted);font-weight:700}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width: 520px){
  .grid2{grid-template-columns:1fr}
  input,select,textarea{font-size:16px} /* avoid iOS zoom */
}
.sep{height:1px;background:var(--border);margin:20px 0;border-radius:999px}
.check{display:flex;align-items:center;gap:10px;color:var(--text);font-size:14px}
.check input{width:auto}

.authLinks{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* P/L indicators (still monochrome) */
.good{font-weight:900;}
.bad{font-weight:900;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;}

/* Inline controls in topbar */
.rightMeta{display:flex;align-items:center;gap:20px;min-width:0;margin-top: 10px}
.inlineCtl{display:flex;align-items:center;gap:8px}
.miniLabel{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.02em}
.miniSelect{min-width:72px;min-height: 44px !important;padding:8px 10px;border-radius: 4px;min-height: 40px !important}

/* Small unobtrusive toggle button (used for price filter) */
.miniToggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius: 4px;
  border:1px solid var(--border);
  background:transparent;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  cursor:pointer;
  user-select:none;
}
.miniToggle:hover{filter:brightness(0.98)}
.miniToggle:active{transform:translateY(1px)}
.miniToggle.active{
  background:var(--accent);
  color:var(--accent-contrast);
  border-color:rgba(127,127,127,.25);
}

.seg{display:inline-flex;border:1px solid var(--border);border-radius: 4px;overflow:hidden;background:var(--panel2)}
.segBtn{padding:8px 10px;font-weight:900;font-size:13px;text-decoration:none;border-right:1px solid var(--border)}
.segBtn:last-child{border-right:none}
.segBtn.active{background:var(--accent);color:var(--accent-contrast)}

.portCtl{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:12px;
  background: var(--topbar-bg);
  border:1px solid var(--border);
  border-radius: 4px;
  backdrop-filter: blur(10px);
}

.filtersRow{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.filtersRow .miniSelect{min-width:140px}

@media (max-width: 520px){
  .portCtl{gap:10px}
  .filtersRow{flex-direction:column;align-items:stretch}
  .filtersRow .miniSelect{min-width:0;width:100%}
}

/* Modal (Chart) */
.modal{position:fixed;inset:0;display:none;z-index:1000}
.modal.show{display:block}
.modalBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.modalCard{position:relative;max-width:1000px;margin: min(8vh,60px) auto; background:var(--panel); border:1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow); padding:14px}
@media (max-width: 520px){
  .modalCard{margin:0; border-radius:0; min-height:100%;}
}

/* Settings modal (mobile): keep content tidy */
.settingsModalCard{max-width: 1020px;}
#settingsContent .portCtl{margin-top:0;}

/* Portfolio controls live inside the settings modal (gear menu) */
#portCtl{display:none;}
#settingsContent #portCtl {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.settingsExtra{margin-top:25px;padding-top:20px;border-top:1px solid var(--border)}
.settingsExtraTitle{font-weight:900;margin-bottom:8px}
.settingsExtraGrid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:10px}
@media (max-width: 520px){
  .settingsExtraGrid{grid-template-columns:1fr}
}
.modalHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.modalTitle{font-size:18px;font-weight:900}
.modalControls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
#chartCanvas{display:block;width:100%;height:auto;border:1px solid var(--border);border-radius: 4px;background:var(--panel2)}


/* v4 layout helpers */
.topRight{display:flex;align-items:center;gap:12px}
.iconBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border:1px solid var(--border);
  background:var(--panel);
  border-radius: 4px;
  font-weight:900;
  cursor:pointer;
}
.iconBtn:hover{background:var(--panel2)}

.brandLink{display:inline-flex;align-items:center}

.userMenuWrap{position:relative;display:inline-flex;align-items:center}
.userMenu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  background:var(--panel2);
  border:1px solid var(--border);
  border-radius: 4px;
  box-shadow:var(--shadow);
  padding:8px;
  display:none;
  z-index:50;
	width: 250px;
}
.userMenu.open{display:block;margin-right: 10px;}
.userMenuHead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px}
.userMenuEmail{color:var(--muted);font-size:13px;font-weight:900;max-width:70vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.userMenuSep{height:1px;background:var(--border);margin:6px 0;opacity:.9;border-radius:999px}
.userMenuItem{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-start;
  padding:10px 10px;
  border-radius: 4px;
  border:0;
  background:transparent;
  color:var(--text);
  text-decoration:none;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
  text-align:left;
}
.userMenuItem:hover{background:var(--row-hover)}
.userMenuItem:active{transform:translateY(1px)}
#menuToggle{display:none}
.settingsPanel{}
.settingsGrid{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
@media (max-width: 1279px){
  #menuToggle{display:inline-flex}
  .settingsPanel{display:none}
  .settingsPanel.open{display:block}
  .settingsGrid{}
  .rightMeta{align-items:flex-start}
}

.mobileOnly{display:none !important}
@media (max-width: 1279px){
  .desktopOnly{display:none !important}
     .mobileOnly {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
    }
	     .mobileOnly-user {
        display: block !important;
        width: 30px !important;
        height: 30px !important;
    }
	.brand .logo {
  display: block;
  max-width: 85px;
  height: auto;
}
  .accordion.mobileOnly{display:flex !important}
}


/* Pager */
.pagerCtl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
@media (max-width: 1279px){
  .pagerCtl{width:100%;justify-content:flex-start}
}

.pagerNav{
  display:none;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:25px 0 0;
}
.pagerNav.show{display:flex}
.pagerNav #pageInfo{min-width:56px;text-align:center}
@media (max-width: 1279px){
  .pagerNav{justify-content:space-between}
}

/* Mobile requested: paging via swipe gesture only (hide arrow/page UI) */
@media (max-width: 1279px){
  .pagerNav{display:none !important}
}
/* Summary (Portfolio totals) */
.summaryGrid{
  display:grid;
  grid-template-columns:repeat(6, minmax(0,1fr));
  gap:10px;
  margin:12px 0 10px;
  margin-top: 25px;
  margin-bottom: 25px;
}
@media (max-width: 1279px){
  /* Mobile requested: swipeable slider (no arrows/points), 2 cards visible */
  .summaryGrid{
    display:flex;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    gap:10px;
    padding-bottom:4px;
  }
  .summaryGrid::-webkit-scrollbar{display:none}
  .summaryGrid{scrollbar-width:none}
  .summaryGrid .sumCard{
    flex:0 0 calc((100% - 10px) / 2);
    scroll-snap-align:start;
  }
}
.sumCard{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: 4px;
  padding:12px;
  box-shadow:var(--shadow);
}
.sumLabel{color:var(--muted);font-size:11px;font-weight:600}
.sumLabelHint{margin-left:6px;color:inherit;font-weight:inherit;letter-spacing:inherit;text-transform:none;white-space:nowrap}
.sumValue{margin-top:6px;font-size:18px;font-weight:900}
.sumValue.pos{color:var(--pos)}
.sumValue.neg{color:var(--neg)}

.sumSub{margin-top:6px;font-size:12px;font-weight:900;color:var(--muted)}
.sumSub.pos{color:var(--pos)}
.sumSub.neg{color:var(--neg)}

.sumValueRow{margin-top:6px;display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.sumValueRow .sumValue{margin-top:0;flex:1 1 auto}
.sumValueRow .sumSub{margin-top:0;flex:0 0 auto;white-space:nowrap}

/* Global positive/negative coloring */
.pos{color:var(--pos) !important}
.neg{color:var(--neg) !important}


/* Money input */
.moneyInput{display:flex;align-items:center;gap:8px}
.moneySym{color:var(--muted);font-weight:900;min-width:14px}

/* Better inline separator in portfolio controls */
.portCtl .sep{width:1px;height:28px;background:var(--border);margin:0 6px;border-radius:999px}

/* Accordion (mobile portfolio) */
.accordion{display:flex;flex-direction:column;gap:10px}

/* Detail side panel is desktop-only */
.detailPanel{display:none}

/* Desktop: portfolio cards in a clean grid (table is optional). */
/* Desktop: cards + detail panel layout (cards are non-expanding; details in a side panel). */
@media (min-width: 1280px){
  .portfolioLayout.viewCards{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:14px;
    align-items:start;
  }

  #portfolioAccordion.viewCards{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:14px;
  }

  .pCard{
    background:var(--panel);
    border:1px solid var(--border);
    border-radius: 4px;
    box-shadow:var(--shadow);
    padding:14px;
    cursor:pointer;
    position:relative;
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
    display:flex;
    flex-direction:column;
    gap:20px;
    min-height:92px;
  }
  .pCard:hover{transform:translateY(-1px)}
  .pCard.active{border-color:rgba(204,67,31,.45)}

  /* Subtle "click for details" hint without visual noise */
  .pCard::after{
    content:'›';
    position:absolute;
    top:10px;
    right:12px;
    font-weight:900;
    color:var(--muted);
    opacity:.55;
    pointer-events:none;
  }
  .pCard:hover::after{opacity:.85;color:var(--text)}
  .pCard.active::after{opacity:1;color:var(--accent)}

  .pCardTop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
  .pCardTitle{display:flex;align-items:center;gap:8px;min-width:0}
  .pCardNo{color:var(--muted);font-weight:900;white-space:nowrap}
  .pCardName{
    font-weight:900;
    min-width:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .pCardValue{font-weight:900;white-space:nowrap}

  .pCardBottom{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
  .pCardQty{color:var(--muted);font-weight:800;white-space:nowrap}
  .pCardPlWrap{white-space:nowrap}
  .pCardPl{font-weight:900;white-space:nowrap}
  .pCardPlPct{color:var(--muted);font-weight:800;white-space:nowrap;margin-left:6px}

  .pCardActions{display:flex;gap:8px;justify-content:flex-end}
  html:not(.editMode) .pCardActions{display:none}

  .detailPanel{
    display:block;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius: 4px;
    box-shadow:var(--shadow);
    padding:14px;
    position:sticky;
    top:12px;
    max-height:calc(100vh - 24px);
    overflow:auto;
  }
  .detailPanel[aria-hidden="true"]{display:none}
  .detailHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
  .detailTitle{font-weight:900;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .detailMetaLine{color:var(--muted);font-size:12px;margin-top:-4px}
  .detailBody{display:flex;flex-direction:column;gap:10px}
  .detailKpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi{background:var(--panel2);border:1px solid var(--border);border-radius: calc(var(--radius) - 4px);padding:10px}
  .kpi .k{color:var(--muted);font-weight:800;font-size:12px}
  .kpi .v{font-weight:900;margin-top:4px}
  .detailRows{display:flex;flex-direction:column;gap:8px}
  .detailForm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .dRow{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .dRow .k{color:var(--muted);font-weight:800}
  .dRow .v{font-weight:900;text-align:right}
  .detailFoot{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
}



@media (min-width: 1280px){
  #portfolioAccordion.viewCards{grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
}
.accItem{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius: 4px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.accSummary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px;
  cursor:pointer;
  list-style:none;
}
.accSummary::-webkit-details-marker{display:none}

/* New mobile summary layout: two lines + clear hierarchy */
.accMain {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 45px;
    justify-content: space-between;
}
.accRow1{display:flex;align-items:center;gap:8px;min-width:0}
.accNo{color:var(--muted);font-weight:900;white-space:nowrap}
.accName{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.metalBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius: 4px;
  color:var(--muted);
  background:var(--panel2);
  white-space:nowrap;
}
.accRow2{display:flex;align-items:center;justify-content:space-between;gap:10px}
.accQty{color:var(--muted);font-weight:800;white-space:nowrap}
.accPlMoney{font-weight:900;white-space:nowrap}

.accSide {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    white-space: nowrap;
    align-content: space-between;
    flex-direction: column;
    justify-content: space-between;
    min-height: 45px;
}
.accPlPct{font-weight:900;white-space:nowrap}
.accValue{font-weight:900;white-space:nowrap}

.accActions{display:flex;align-items:center;gap:8px;margin-top:6px}

/* Hide destructive/reorder controls in normal view (show only in Edit mode) */
html:not(.editMode) .accordion .accActions{display:none}
html:not(.editMode) #portfolioTable .moveBtns{display:none}
html:not(.editMode) #portfolioTable th.actions,
html:not(.editMode) #portfolioTable td.actions{display:none}
.accBody{padding:12px;border-top:1px solid var(--border);background:var(--panel2)}
.accFoot{display:flex;justify-content:flex-end;margin-top:10px}
.accGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 520px){
  .accGrid{grid-template-columns:1fr}
}
.field{display:flex;flex-direction:column;gap:6px}
.field .out{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius: 12px;
  background:var(--panel);
  font-weight:800;
}

/* Icon-only delete button */
.iconDel{
  border:none;
  background:transparent;
  color:var(--text);
  font-weight:900;
  font-size:16px;
  line-height:1;
  padding:6px 8px;
  border-radius: 999px;
  cursor:pointer;
}
.iconDel:hover{background:var(--panel2)}

/* Drag reorder (long-press) */
html.reorderHold, html.reorderHold body,
html.reordering, html.reordering body{
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.dragPlaceholder{border:2px dashed var(--border);border-radius:var(--radius);background:var(--panel2)}
.dragGhost{box-shadow:var(--shadow);opacity:.96;transform:scale(1.01)}

/* Reorder controls in the # column */
.noCell{display:flex;align-items:center;gap:8px;justify-content:flex-start}
.moveBtns{display:inline-flex;flex-direction:column;gap:2px}
.iconMove{
  border:none;
  background:transparent;
  color:var(--muted);
  font-weight:900;
  font-size:12px;
  line-height:1;
  padding:2px 6px;
  border-radius: 4px;
  cursor:pointer;
}
.iconMove:hover{background:var(--panel2); color:var(--text)}
.iconMove:disabled{opacity:.35; cursor:default}

/* Modal stats + changes */
.modalStats{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.statBig{font-size:22px;font-weight:900}
.changesGrid{
  display:grid;
  grid-template-columns:repeat(5, minmax(0,1fr));
  gap:8px;
  min-width:280px;
}
@media (max-width: 1279px){
  .changesGrid{grid-template-columns:repeat(5, minmax(0,1fr)); min-width:100%}
}
.chg{
  text-align:center;
}
.chg .lbl{color:var(--muted);font-size:12px;font-weight:900}
.chg .val{margin-top:2px;font-size:13px;font-weight:900}
.chg.pos .val{color:var(--pos) !important}
.chg.neg .val{color:var(--neg) !important}

/* Item modal: grid layout */
.modalCard .formGrid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  gap:12px;
  margin-top:10px;
}
@media (max-width: 520px){
  .modalCard .formGrid{grid-template-columns:1fr 1fr 1fr;}
}
.modalActions{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}

button.card{font:inherit;color:inherit;text-align:left}
button.card:focus{outline:2px solid var(--text);outline-offset:2px}



input,
select,
textarea{
  height: 36px;
  padding: 0 10px;
  line-height: 36px;
}
input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  display: flex;
  align-items: center;
  height: 36px;
}





/* Mobile: portCtl als sauberes 2-Spalten Grid */
@media (max-width: 1279px){
	
	
	.userBox {

    margin-top: 20px;
    margin-bottom: 20px;
}
	
	.authLinks {
  margin-top: 20px;
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 0.6rem;
}
	
	.inp{
  max-width: 100%;
}
	
  .portCtl{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:10px;
    justify-content:stretch;
    align-items:stretch;
	margin-top: 20px;
  }

  /* alles bekommt volle Breite innerhalb der Zelle */
  .portCtl > *{
    width:100%;
  }

  /* Labels: über beide Spalten */
  .portCtl .miniLabel{
    grid-column: 1 / -1;
	  width: 100%;
	margin-top: 20px;
  }

  /* Selects: über beide Spalten (mehr Platz, besser lesbar) */
  .portCtl .miniSelect{
     /* grid-column: 1 / -1; */
    min-width: 0;
            font-size: 0.8rem;
  }

  /* Separator raus auf Mobile */
  .portCtl .sep{
    display:none;
  }

  /* Pager: über beide Spalten und innen als Grid */
  .portCtl .pagerCtl{
    grid-column: 1 / -1;
    grid-template-columns: 1fr auto auto;
    gap:20px;
    align-items:center;
	margin-top: 20px;
   justify-content: left;
  }

  .portCtl #perPageSelect{
    width:100%;

  }

  /* Prev / Info / Next kompakt nebeneinander */
  .portCtl #pagePrev,
  .portCtl #pageNext{
    width: 20%;
  }

  .portCtl #pageInfo{

  }

  /* Buttons auf Mobile: gleiche Höhe, kein Umbruch im Text */
  .portCtl .btn{

    white-space:nowrap;
  }
}




.footer {
  margin-top: 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  font-size: .85rem;
}
.footerInner {
  display: flex;
  justify-content: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
}
.footerNav a,
.footerCopy a {
  color: inherit;
  text-decoration: none;
}
.footerNav a:hover,
.footerCopy a:hover {
  text-decoration: underline;
}

/* Role badge (Free/Pro/Lifetime/Admin) */
.roleBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:3px 10px;
  border-radius: 4px;
  border:1px solid var(--border);
  background: var(--code-bg);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  vertical-align:middle;
}
.roleBadge.pro{ border-color: rgba(204,67,31,.32); background: rgba(204,67,31,.10); }
.roleBadge.lifetime{ border-color: rgba(204,67,31,.32); background: rgba(204,67,31,.10); }
.roleBadge.admin{ border-color: rgba(204,67,31,.42); background: rgba(204,67,31,.16); }


/* === Modern portfolio controls (toolbar) === */
.portCtl {
    background: var(--panel);
    border: 0px solid var(--border);
    border-radius: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
    justify-content: flex-start;
    margin-top: 25px;
    padding-top: 20px;
}

.portCtlTop{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: wrap;
}

.portCtlPortfolio{
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* flex: 1 1 320px; */
  min-width: 0;
}

.portCtlPrimary{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto; 

}


.portCtlBar{
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.portCtlFilters{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  flex: 1 1 420px;
  min-width: 0;
}


.portCtl .miniSelect{
  padding: 10px 12px;
}

.iconBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--text);
  cursor: pointer;
  user-select: none;
}
.iconBtn:hover{filter:brightness(0.98)}
.iconBtn:active{transform:translateY(1px)}

.dropdownPanel.open{display:flex}
.dropdownPanel .btn{width:100%;justify-content:flex-start}

.filtersToggle{display:none}

.segCtl{
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--panel2);
}
.segCtl .btn{
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
  min-height: 44px;
}
.segCtl .btn:hover{background:var(--row-hover)}
.segCtl .btn.active{background:var(--accent);color:var(--accent-contrast);border-color:rgba(127,127,127,.25)}

.portCtlFilters .pagerCtl{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.portCtlFilters .pagerCtl .miniLabel{white-space:nowrap}

@media (max-width: 900px){
  .wrap{padding:12px 12px; padding-left: calc(12px + env(safe-area-inset-left)); padding-right: calc(12px + env(safe-area-inset-right));}
  .section{padding:12px; margin:12px 0}
  .cards{gap:10px}

  .portCtl{padding:10px; gap:10px}

  .portCtlTop{grid-template-columns: 1fr; align-items:stretch}
  .portCtlPrimary{
    width:100%;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
    justify-content:stretch;
  }
  .portCtlPrimary .btn{width:100%}

  .portCtlFilters{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .portCtlFilters .pagerCtl{grid-column: 1 / -1; justify-content: flex-start;}
}

@media (max-width: 1279px){
  .filtersToggle{display:inline-flex}

  /* Tablet-first: keep the control bar compact */
  .portCtl{padding:10px; gap:10px}

  .portCtlTop{
    grid-template-columns: 1fr auto;
    align-items:center;
    gap:10px;
  }

  .portCtlPortfolio{width:100%}
  .portCtlPortfolio .miniSelect{flex:1 1 auto; min-width:0}

  .portCtlPrimary{
    width:100%;
    margin-left:0;
    justify-content:flex-end;
    gap:10px;
  }
  .portCtlPrimary .btn{flex:0 0 auto}

  .portCtlBar{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .portCtlFilters{
    display:none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:8px;
    min-width:0;
  }
  .portCtl.filtersOpen .portCtlFilters{display:grid; margin-top:4px;flex: none}

  .portCtl .pagerCtl{width:100%; justify-content:space-between;}

.dropdownPanel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 30;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: var(--panel2);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow);
width: 170px;
	margin-right: 50px;
    margin-top: 1px;
}
}


@media (max-width: 520px){
  .wrap{padding:10px 10px; padding-left: calc(10px + env(safe-area-inset-left)); padding-right: calc(10px + env(safe-area-inset-right));}
  .section{padding:10px; margin:10px 0}
  .cards{gap:10px}

  .portCtl{padding:10px; gap:8px}
  .portCtlTop{gap:8px}
  .portCtlPortfolio{gap:8px}
  .filtersToggle{width:100%; justify-content:center}

  .portCtlFilters{grid-template-columns: 1fr;}
  .portCtlFilters .pagerCtl{grid-column:auto; justify-content:space-between;margin-top: 0;}
}

/* === Responsive toolbar override (requested):
   - Desktop: everything in ONE line
   - Tablet: 2–3 column grid
   - Phone: 2 column grid
   Works with the existing HTML structure (portCtlTop + portCtlBar + portCtlFilters).
*/

/* Desktop (>=1280px): single row */
@media (min-width: 1280px){
  .portCtl{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
	.dropdownPanel{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  min-width: 220px;
  max-width: 300px;
  margin-left: 175px;
  margin-top: 10px;
}

  /* Flatten the nested wrappers so each control can sit in the same row */
  .portCtlTop,
  .portCtlBar,
  .portCtlFilters,
  .portCtl .pagerCtl{
    display:contents;
  }

  /* No toggle needed on desktop */
  .filtersToggle{display:none !important;}

  .portCtlPortfolio{
    flex: 0 1 340px;
    min-width: 260px;
  }

  /* Keep primary buttons together, but don’t force full width */
  .portCtlPrimary{flex:0 0 auto;}
  .portCtlPrimary .btn{white-space:nowrap;width: 100%;}

  /* Per-page + filter selects: compact */
  #perPageSelect{min-width:120px;}
  #filterMetal, #filterPL, #filterRange{min-width:140px;}
}

/* Tablet (<=1279px): clean grid, 2–3 columns depending on width */
@media (max-width: 1279px){
  .portCtl{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap:10px;
    align-items:stretch;
  }
	


  .portCtlTop,
  .portCtlBar,
  .portCtlFilters,
  .portCtl .pagerCtl{
    display:contents;
  }

  .filtersToggle{display:none !important;}

  /* Ensure filters are always visible (override previous mobile collapse) */
  .portCtlFilters{display:contents !important;}

  .portCtlPortfolio,
  .portCtlPrimary{
    width:100%;
  }

  /* Primary buttons as a 2-wide mini grid inside their cell */
  .portCtlPrimary{
    display:grid;
    grid-template-columns: 1fr;
    gap:8px;
    justify-content:stretch;
  }
  .portCtlPrimary .btn{width:100%;}

  /* Inputs/selects fill their grid cell */
  .portCtl select.miniSelect{width:100% !important; min-width:0;}
  .portCtl .btn{width:100%;}

  /* Portfolio select grows, icon stays fixed */
  .portCtlPortfolio{display:flex; align-items:center; gap:10px;}
  .portCtlPortfolio select.miniSelect{flex:1 1 auto; min-width:0;}
  .portCtlPortfolio .iconBtn{flex:0 0 auto;}
}

/* Phone: strict 2-column grid (plus a couple of sensible full-width rows) */
@media (max-width: 720px){
  .portCtl{grid-template-columns: repeat(2, minmax(0, 1fr));}

  /* Give the two “big” controls breathing room */
  .portCtlPortfolio,
  .portCtlPrimary{
    grid-column: 1 / -1;
  }
}

/* =======================================================================
   MOBILE + DARK TYPOGRAFIE OVERRIDE (Handy Dark Mode)
   - Normaltext: 0.8rem
   - Überschriften + Zahlen: 0.9rem
   - Font-Weight max: 700
   ======================================================================= */

/* Auto-Dark (prefers-color-scheme) */
@media (max-width: 720px) and (prefers-color-scheme: dark){
  :root{
    --fs-mobile-body: 0.8rem;
    --fs-mobile-strong: 0.9rem;
    --fw-mobile-strong: 700;
  }
}

/* Forced dark via html[data-theme="dark"] */
@media (max-width: 720px){
  html[data-theme="dark"]{
    --fs-mobile-body: 0.8rem;
    --fs-mobile-strong: 0.8rem;
    --fw-mobile-strong: 600;
  }
}

/* Apply (only works when the vars above exist; otherwise the declarations are invalid and ignored) */
@media (max-width: 720px){
	
	#settingsContent #portCtl {
    display: grid;
    grid-template-columns:1fr 1fr;
}
	.rightMeta {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    min-width: 0;
    margin-top: 10px;
    flex-direction: row;
    /* align-content: space-between; */
    font-size: 0.7rem !important;
    align-items: center !important;
    justify-content: space-between;
}

  /* Normaltext (0.8rem) */
  body{ font-size: var(--fs-mobile-body); }

  :is(
    body, p, li, ul, ol, dl, dt, dd,
    .small, .note,
    .sub, .userEmail,
    .notice, .flash,
    .pill, .roleBadge, .metalBadge,
    .tbl th, .tbl td, .tbl td::before,
    .link, .check, .authLinks,
    label,
    input[type="text"], input[type="date"], input[type="email"], input[type="password"], select, textarea,
    .btn, .miniToggle, .segBtn, .miniSelect, .miniLabel,
    .chg .lbl,
    .kpi .k,
    .dRow .k,
    .field .out
  ){
    font-size: var(--fs-mobile-body) !important;
  }

  /* Überschriften + Zahlen (0.9rem) */
  :is(
    h1, h2, h3, h4, h5, h6,
    .section h2, .title, .authTitle, .modalTitle,
    .tbl td.num, .tbl th.num,
    .card .price,
    .sumValue, .statBig,
    .pCardValue, .pCardPl, .pCardPlPct,
    .accPlMoney, .accPlPct, .accValue,
    .chg .val,
    .kpi .v,
    .dRow .v
  ){
    font-size: var(--fs-mobile-strong) !important;
  }

  /* Font-weight cap (nur die “zu dicken” Stellen auf 700 ziehen) */
  :is(
    .title,
    .card .metal, .card .price,
    .btn, .miniToggle, .segBtn, .miniLabel,
    .sumRow td, .sumLabel, .sumValue,
    .good, .bad,
    .iconBtn,
    .userMenuEmail, .userMenuItem,
    .authTitle, .modalTitle,
    .statBig,
    .roleBadge, .metalBadge,
    .moneySym,
    .pCard::after, .pCardNo, .pCardName, .pCardValue, .pCardQty, .pCardPl, .pCardPlPct,
    .detailTitle,
    .kpi .k, .kpi .v,
    .dRow .k, .dRow .v,
    .accNo, .accName, .accQty, .accPlMoney, .accPlPct, .accValue,
    .field .out,
    .iconDel, .iconMove,
    .chg .lbl, .chg .val
  ){
    font-weight: var(--fw-mobile-strong) !important;
  }
}