:root{
  --brand:#32a8a4; --brandA: rgba(50,168,164,.25);
  --bg:#0b0f14; --panel:#0f1620; --text:#e6edf3; --muted:#94a3b8;
  --border:rgba(255,255,255,.10);
}
.theme-light{
  --bg:#ffffff; --panel:#ffffff; --text:#0b1220; --muted:#64748b;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--text);background:var(--bg)}
.top{position:sticky;top:0;z-index:1000;display:flex;gap:12px;align-items:center;padding:12px 16px;background:color-mix(in srgb, var(--panel) 92%, transparent);border-bottom:1px solid var(--border)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.brand img{height:108px}
.sp{flex:1}
.theme-toggle{width:38px;height:38px;border:1px solid var(--border);border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:color-mix(in srgb, var(--panel) 92%, transparent)}
.tabs{position:sticky;top:128px;z-index:900;display:flex;gap:8px;flex-wrap:wrap;padding:10px 16px;background:color-mix(in srgb, var(--panel) 92%, transparent);border-bottom:1px solid var(--border)}
.tab{padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:#111827;color:#cbd5e1;cursor:pointer}
.theme-light .tab{background:#f5f7fb;color:#0b1220}
.tab.active{background:var(--brand);color:#fff;border-color:var(--brand)}
.section{display:none;padding:16px}
.section.active{display:block}
.row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.h{margin:0 0 8px 0}
.in{padding:8px 10px;border-radius:10px;border:1px solid var(--border);background:color-mix(in srgb, var(--panel) 96%, transparent);color:var(--text)}
.in::placeholder{color:var(--muted)}
.btn{padding:8px 12px;border-radius:10px;border:1px solid color-mix(in srgb, #000 12%, transparent);background:var(--brand);color:#fff;cursor:pointer;box-shadow:0 6px 16px color-mix(in srgb, var(--brand) 35%, transparent)}
.btn.gray{background:color-mix(in srgb, var(--panel) 90%, transparent);color:var(--text);border-color:var(--border);box-shadow:none}
.theme-light .btn.gray{background:#eef2f7;color:#0b1220;border-color:#cbd5e1}
.tablewrap{border:1px solid var(--border);border-radius:12px;overflow:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:8px 10px;border-bottom:1px solid var(--border);white-space:nowrap;text-align:left}
th{background:color-mix(in srgb, var(--panel) 92%, transparent)}
.muted{color:var(--muted)}
.bad{color:#ef4444}
.good{color:#16a34a}
#toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:color-mix(in srgb, var(--panel) 95%, black);border:1px solid var(--border);color:var(--text);padding:8px 10px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .2s ease, transform .2s ease}
#toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}
.footer{padding:18px 16px;color:var(--muted)}
@media (max-width: 640px){
  .brand img{height:72px}
  .tabs{top:88px}
}


/* --- Loading Spinner --- */
.spinner{
  border: 6px solid rgba(0,0,0,0.08);
  border-top: 6px solid var(--brand, #3498db);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}
@keyframes spin { 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} }


/* ===== ALT-Popup Styles ===== */
.modal { position:fixed; inset:0; z-index:9999; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.35); }
.modal-card { position:relative; margin:6rem auto; width:min(720px, 94vw); background:var(--card,#fff); color:var(--fg,#111);
  border-radius:16px; box-shadow:0 15px 40px rgba(0,0,0,.25); overflow:hidden; }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border,#e5e7eb); }
.modal-body { padding:12px 16px; max-height:60vh; overflow:auto; }
.modal-item { display:flex; align-items:center; justify-content:space-between; padding:8px 6px; border-bottom:1px dashed var(--border,#e5e7eb); }
.modal-item .meta { display:flex; align-items:center; gap:10px; }
.modal-item small { opacity:.7; }


/* Letzte Spalte (Aktion) schmaler und Buttons mittig */
table.dataTable th:last-child,
table.dataTable td:last-child {
  text-align: center;
  width: 110px;
}


/* Pagination modern right-aligned with icons */
.pagination-container{
  display:flex; justify-content:flex-end; align-items:center; gap:10px; margin:10px 0;
}
.pagination-container .page-btn{
  background:#1a1d23; border:1px solid #333; color:#00d4ff; font-size:16px; padding:5px 10px;
  border-radius:8px; cursor:pointer; transition:background .2s;
}
.pagination-container .page-btn:hover{ background:#00d4ff; color:#fff; }
.pagination-container .page-info{ color:#bbb; font-size:14px; }


/* Modern Pagination: right-aligned top and bottom */
.pagination-container{ 
  display:flex; 
  justify-content:flex-end; 
  align-items:center; 
  gap:10px; 
  margin:12px 0; 
  width:100%;
  text-align:right;
}
/* If inside a flex row, push to the right */
.row > .pagination-container{ margin-left:auto; }

.pagination-container .page-btn{
  display:inline-flex; 
  align-items:center; 
  justify-content:center;
  gap:8px;
  background:#1a1d23; 
  border:1px solid #2b2f36; 
  color:#9dd8ff; 
  padding:6px 10px; 
  border-radius:10px; 
  cursor:pointer; 
  transition:background .2s, color .2s, transform .05s;
}
.pagination-container .page-btn:hover{ background:#0fb; color:#00111a; }
.pagination-container .page-btn:active{ transform:translateY(1px); }
.pagination-container .page-info{ display:none; } /* Seitenzahl ausblenden */


/* Force pagination containers fixed to right above/below table */
.tablewrap { position: relative; }

.pagination-container.top {
  position: absolute;
  top: -40px;   /* adjust depending on spacing */
  right: 0;
}

.pagination-container.bottom {
  position: absolute;
  bottom: -40px; /* adjust depending on spacing */
  right: 0;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}


/* Force paginations to the far right, both top and bottom, regardless of parent layout */
.pagination-wrapper{ display:block; width:100%; }
.clearfix::after{ content:""; display:block; clear:both; }
.pagination-wrapper .pagination-container{ float:right; }

/* Keep previous styling */
.pagination-container{ 
  display:inline-flex; 
  justify-content:flex-end; 
  align-items:center; 
  gap:10px; 
  margin:12px 0; 
}



/* Force Pagination to top-right and bottom-right */
.pagination-wrapper{
  width:100%;
  display:flex;
  justify-content:flex-end;
  margin:10px 0;
}
.pagination-wrapper .pagination-container{
  display:flex;
  gap:10px;
}


/* Enforce right alignment for pagination in all contexts */
.pagination-wrapper,
.pagination-container{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
}
.pagination-wrapper .pagination-container{
  width:auto !important;
}


/* Strong right alignment for pagination using CSS Grid */
.pagination-wrapper{
  width:100% !important;
  display:grid !important;
  grid-template-columns: 1fr !important;
  justify-content:end !important; /* grid container */
  justify-items:end !important;   /* grid children */
  margin:10px 0 !important;
  text-align:right !important;    /* fallback */
}
.pagination-wrapper .pagination-container{
  justify-self:end !important;
  display:inline-flex !important;
  float:none !important;
  margin-left:0 !important;
}


/* Scoped right-align for pagination in Marketübersicht card */
#sect-new .card .pagination-wrapper{
  width:100% !important;
  display:flex !important;
  justify-content:flex-end !important;
}
#sect-new .card .pagination-wrapper .pagination-container{
  display:flex !important;
  gap:10px;
  float:none !important;
  margin-left:0 !important;
}


/* Fine-tune pagination alignment to table border */
#sect-new .card .pagination-wrapper.top{
  display:flex !important;
  justify-content:flex-end !important;
  margin:0 1px 6px 0 !important;   /* right by 1px to match table border */
}
#sect-new .card .pagination-wrapper.bottom{
  display:flex !important;
  justify-content:flex-end !important;
  margin:6px 1px 0 0 !important;
}
#sect-new .card .tablewrap{ scrollbar-gutter: stable both-edges; } /* avoid width shift from scrollbar */


/* === Footer pager (klassisch: Quelle links, Paging rechts) === */
.footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.footer .pagination-container{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.footer .page-btn{
  padding:4px 8px;
  line-height:1;
}


/* --- Classic Spinner (loading) --- */
#loadingSpinner{ position:absolute; right:16px; top:8px; display:none; align-items:center; gap:8px; }
#loadingSpinner .spin{ width:14px; height:14px; border:2px solid rgba(255,255,255,0.25); border-top-color: currentColor; border-radius:50%; animation: ctt-spin 0.8s linear infinite; }
#loadingSpinner .txt{ font-size:12px; opacity:0.8; }
@keyframes ctt-spin { to { transform: rotate(360deg); } }
@media (prefers-color-scheme: light){
  #loadingSpinner .txt{ color:#0a5; }
}



/* --- Button variants & layout tweaks --- */
.row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.btn.primary { background:#12d4c7; color:#0b1020; border:1px solid rgba(18,212,199,0.8); }
.btn.primary:hover { filter:brightness(1.05); }
.btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.25); color:#cfd6e4; }
@media (prefers-color-scheme: light) {
  .btn.ghost { color:#2a2f3a; border-color:rgba(0,0,0,0.15); }
}
#mkt-search { min-width: 280px; }



/* --- ALT-Popup layout for price + button --- */
#alt-modal .modal-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; }
#alt-modal .modal-item .meta{ display:flex; flex-direction:column; gap:2px; }
#alt-modal .modal-item .right{ display:flex; align-items:center; gap:12px; }
#alt-modal .modal-item .price{ min-width:96px; text-align:right; opacity:0.85; font-variant-numeric: tabular-nums; }



/* --- Flash highlight for adopted fields --- */
.flash-highlight {
  outline: 2px solid #12d4c7;
  box-shadow: 0 0 0 2px rgba(18,212,199,0.35) inset, 0 0 12px rgba(18,212,199,0.6);
  border-radius: 10px;
  animation: ctt-flash 1.2s ease-out;
}
@keyframes ctt-flash {
  0% { box-shadow: 0 0 0 4px rgba(18,212,199,0.65), 0 0 16px rgba(18,212,199,0.9); }
  60% { box-shadow: 0 0 0 2px rgba(18,212,199,0.35), 0 0 12px rgba(18,212,199,0.6); }
  100% { box-shadow: 0 0 0 0 rgba(18,212,199,0), 0 0 0 rgba(18,212,199,0); outline-color: transparent; }
}


.flash-highlight{ animation-duration:5s !important; }

/* patch: hide utility */
.hidden{display:none !important}

/* turquoise frame for new trade card */
.card.trade-new{border:2px solid var(--brand);}


/* Larger Margin field so placeholder fits */
#n-margin{
  min-width: 280px;
  flex: 0 0 280px;
}
@media (max-width: 640px){
  #n-margin{
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ===== Markt-Suchfeld: immer sichtbar halten (Minimal-Override) ===== */
#mkt-search{
  display:inline-block !important;
  visibility:visible !important;
  opacity:1 !important;
  width:min(420px,100%) !important;
  min-width:260px !important;
  max-width:100% !important;
  position:static !important;
  z-index:2 !important;
}
#mkt-search.hidden,
#mkt-search.is-hidden,
#mkt-search.d-none,
[hidden]#mkt-search{
  display:inline-block !important;
  visibility:visible !important;
  opacity:1 !important;
}


/* Klassisch: Hebel bei Spot fest auf 1× (deaktiviert) */
.lev-spot-fixed{
  background: rgba(255,255,255,0.04);
  cursor: not-allowed;
}



.lev-wrap{ position:relative; display:inline-block; }
.lev-wrap > input#n-lev{
  padding-left: 60px; /* space for the label */
}
.lev-wrap .lev-tag{
  position:absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .7;
  pointer-events: none;     /* cannot block typing */
  user-select: none;        /* cannot select label */
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .4px;
  z-index: 1;
}

/* Disabled look still ok */
.lev-wrap > input#n-lev.lev-spot-fixed + .lev-tag{ opacity:.6; }


/* Keep look when disabled for Spot */
.lev-wrap > input#n-lev.lev-spot-fixed + .lev-tag{ opacity:.6; }


/* === UI Font & Placeholder Unification (classic) === */
:root { --font-ui: 'Inter', 'Segoe UI', Roboto, Arial, 'Helvetica Neue', Helvetica, sans-serif; }

body, input, select, button, .kpi, .lev-tag {
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

input::placeholder, textarea::placeholder,
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder,
input::-moz-placeholder, textarea::-moz-placeholder,
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  font-family: inherit;
  font-weight: 400;
  font-style: normal;
  opacity: .65;
}

/* In-field HEBEL label to feel like a native placeholder */
.lev-wrap .lev-tag{
  position:absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: .7;
  pointer-events: none;     /* cannot block typing */
  user-select: none;        /* cannot select label */
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .4px;
  z-index: 1;
}


/* Tooltip bubble for Hebel */
.ctt-tip{ position:relative; display:inline-block; }
.ctt-tip:hover::after{
  content: attr(data-tip);
  position:absolute;
  bottom: calc(100% + 8px);
  left: 8px;
  background: rgba(0,0,0,.85);
  color: #e5ecf5;
  border: 1px solid rgba(255,255,255,.15);
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.ctt-tip:hover::before{
  content: "";
  position:absolute;
  bottom: calc(100% + 4px);
  left: 14px;
  width: 8px; height: 8px;
  transform: rotate(45deg);
  background: rgba(0,0,0,.85);
  border-left: 1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
  pointer-events: none;
  z-index: 49;
}

/* Unified pagination button look */
.pagination-container .page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
  background: var(--panel, rgba(255,255,255,0.02));
  cursor: pointer;
}
.pagination-container .page-btn:hover { filter: brightness(1.1); }
.pagination-container.footer-right {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 0;
}


/* Accordion for Laufende Trades */
.acc-host{display:flex;flex-direction:column;gap:8px}
.acc-item{border:1px solid var(--line,#2a2d33);border-radius:12px;background:var(--panel,#11151a)}
.acc-head{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:10px 12px;font-weight:600;cursor:pointer}
.acc-body{padding:12px;border-top:1px solid var(--line,#2a2d33)}
.acc-body .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.acc-body label{display:block;font-size:12px;color:var(--muted,#8a929e);margin-bottom:2px}
.btn.small{padding:6px 10px;font-size:12px;border-radius:10px}
.btn.small.danger{background:#7a1e1e}


/* ---- Detail-Modal + Accordion (angepasst) ---- */
.modal.hidden{display:none}
.modal{position:fixed;inset:0;background:rgba(3,5,9,.6);display:block;z-index:1000}
.modal-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--bg2,#0e1218);border:1px solid var(--line,#1b2430);border-radius:18px;min-width:920px;max-width:1280px;width:92vw;max-height:92vh;display:flex;flex-direction:column;box-shadow:0 16px 48px rgba(0,0,0,.45)}
.modal-head,.modal-foot{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line,#1b2430);}
.modal-foot{border-top:1px solid var(--line,#1b2430);border-bottom:none}
.modal-body{padding:16px;overflow:auto;flex:1 1 auto;min-height:0}
details.accordion{margin-top:12px;border-radius:16px;background:#0b0d11}
details.accordion>summary.accordion-header{
  list-style:none;cursor:pointer;font-size:13px;color:#cfe;display:flex;align-items:center;gap:10px;user-select:none;
  padding:12px 14px;border:2px solid var(--brand,#32a8a4);border-radius:16px;
  transition:border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .12s ease;
  background:linear-gradient(180deg, rgba(50,168,164,.18), rgba(50,168,164,.04));
  box-shadow: inset 0 0 10px rgba(50,168,164,.15), 0 0 20px rgba(0,0,0,.25);
}
details.accordion>summary::-webkit-details-marker{display:none}
.caret{display:inline-block;transition:transform .2s;color:var(--brand,#32a8a4);transform:rotate(-90deg)}
details[open] .caret{transform:rotate(0deg)}
.tv-wrap{border-top:1px solid var(--line,#1b2430);}
.tv-frame{width:100%;height:420px}
.field{padding:6px 8px;background:#0a1016;border:1px solid #16212c;border-radius:12px}
.btn.warn{background:#ffc14d;color:#221}
.btn.danger{background:#ff7373;color:#221}
.hint{color:#9fb2c7}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:980px){ .modal-card{min-width:0} .row2{grid-template-columns:1fr} }


/* ===== Laufende Trades – Accordion Optik verbessert ===== */
.acc-list { display: grid; gap: 10px; }
.acc-item { background: var(--panel, #141a22); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; overflow: hidden; }
.acc-head { display: grid; align-items: center; grid-template-columns: 1fr auto auto auto auto auto auto auto; gap: 12px; padding: 14px 16px; }
.acc-head .sym { font-weight: 600; letter-spacing: .3px; }
.acc-head .badge { padding: 4px 8px; border-radius: 999px; font-size: 12px; line-height: 1; border: 1px solid rgba(255,255,255,0.08); }
.acc-head .badge.long { background: rgba(0,180,90,.12); border-color: rgba(0,180,90,.35); }
.acc-head .badge.short{ background: rgba(220,60,60,.12); border-color: rgba(220,60,60,.35); }
.acc-head .meta { font-size: 13px; color: var(--muted, #a9b3c0); }
.acc-head .meta b { color: var(--fg, #e8eef7); font-weight: 600; }
.acc-head .pnl { justify-self: end; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.acc-head .pnl.pos { color: #0ecb81; background: rgba(14,203,129,.12); border-color: rgba(14,203,129,.35); }
.acc-head .pnl.neg { color: #ff4d4f; background: rgba(255,77,79,.12); border-color: rgba(255,77,79,.35); }
.acc-body { padding: 10px 16px 16px; }
.acc-body .row { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.acc-body label { font-size: 12px; color: var(--muted,#97a4b7); display:block; margin-bottom: 3px; }
.acc-body .actions { margin-top: 10px; display: flex; gap: 8px; }
@media (max-width: 980px){
  .acc-head { grid-template-columns: 1fr auto auto auto; row-gap: 6px; }
  .acc-body .row { grid-template-columns: repeat(2,minmax(0,1fr)); }
}


/* Cursor hint for clickable trade rows */
.acc-item > summary:hover {
  cursor: pointer;
  background-color: rgba(255,255,255,0.05);
}


/* ===== Laufende Trades • UX Refresh ===== */
.toolbar-trades {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0 16px;
}
.toolbar-trades .kpis {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(140px,auto);
  gap: 10px;
}
.kpi-chip {
  background: var(--panel, #161a1f);
  border: 1px solid var(--panel-border, rgba(255,255,255,0.06));
  padding: 10px 12px;
  border-radius: 12px;
  display: grid;
  gap: 2px;
}
.kpi-chip .k-hint { font-size: 11px; opacity: .8; }
.kpi-chip .k-val  { font-size: 16px; font-weight: 600; }

.filters-trades {
  display:flex; gap:8px; align-items:center; justify-content:flex-end;
  flex-wrap: wrap;
}
.filters-trades input[type="search"],
.filters-trades select {
  background: var(--panel, #12161c);
  border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
  color: var(--fg, #e7eef7);
  padding: 8px 10px;
  border-radius: 10px;
  outline: none;
}
.filters-trades .switch {
  display:inline-flex; align-items:center; gap:6px;
  padding: 6px 10px;
  background: var(--panel, #12161c);
  border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
  border-radius: 12px;
  user-select:none;
}
.filters-trades .switch input { accent-color: var(--brand, #00d1cc); }

/* Accordion cards */
.acc-list { display:grid; gap:10px; }
.acc-item {
  border: 1px solid var(--panel-border, rgba(255,255,255,0.08));
  border-radius: 14px;
  overflow:hidden;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0));
}
.acc-item > summary {
  display:grid;
  grid-template-columns: 140px 70px 1fr 1fr 1fr 120px 120px auto;
  gap:12px;
  align-items:center;
  padding: 12px 14px;
  list-style:none;
}
.acc-item > summary::-webkit-details-marker { display:none; }

.acc-item .sym { font-weight:600; letter-spacing:.2px; }
.badge.side { font-size:12px; padding:2px 8px; border-radius:999px; border:1px solid rgba(255,255,255,0.15); text-align:center; }
.badge.side.LON { background: rgba(0,180,80,.15); }
.badge.side.SHO { background: rgba(240,60,60,.15); }

.cell { display:flex; align-items:baseline; gap:8px; }
.cell .lbl { font-size:11px; opacity:.7; }
.pnl { font-weight:700; }
.pnl.pos { color:#1ddb8f; }
.pnl.neg { color:#ff5b6e; }

.acc-body { padding: 12px 16px 14px; background: rgba(0,0,0,0.15); }
.acc-body .row { display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:10px; }
.acc-body .col { background: rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.06); padding:10px; border-radius:10px; }
.acc-body .col label { display:block; font-size:11px; opacity:.7; margin-bottom:4px; }

.actions { display:flex; gap:8px; margin-top:10px; }
.btn.small { font-size:12px; padding:6px 10px; border-radius:10px; }

/* Hover as hint for dblclick */
.acc-item > summary:hover { cursor:pointer; background-color: rgba(255,255,255,0.05); }

/* Density toggle */
.compact .acc-item > summary { grid-template-columns: 120px 60px 1fr 1fr 1fr 100px 90px auto; padding: 10px 12px; }
.compact .acc-body .row { grid-template-columns: repeat(3,minmax(0,1fr)); }


/* ===== UX Refresh v2 ===== */
.sticky-top {
  position: sticky;
  top: 60px;
  z-index: 50;
  background: var(--bg, #0d1117);
  padding-top: 6px;
  padding-bottom: 6px;
}
.toolbar-actions {
  display:flex;
  align-items:center;
  justify-content: flex-end;
  gap:8px;
  flex-wrap:wrap;
}
.toolbar-actions .btn {
  padding:8px 12px;
  border-radius:8px;
  font-size:13px;
}


/* Align right action group in toolbar */
#trades-toolbar { position: sticky; top: 72px; z-index: 5; background: var(--bg, #0e1318); padding: 6px 0; }
.toolbar-trades > .filters-trades:last-child { justify-content: flex-end; }


/* Hide large Excel import card in new UX (we have toolbar buttons) */
#sect-trades[data-ux="v2"] > .card:first-child { display:none; }