:root{
  --bg:#0b0f1a;
  --card:#111827;
  --card2:#131929;
  --stroke:rgba(255,255,255,.06);
  --border:#1e2d47;
  --fg:#e2e8f0;
  --muted:#9ca3af;
  --teal:#2dd4bf;
  --green:#22c55e;
  --red:#ef4444;
}

body{
  background:var(--bg);
  color:#fff;
  margin:0;
  min-height: 100vh;
  padding-bottom: calc(90px + env(safe-area-inset-bottom));
}

.app-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(11,15,26,.85);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--stroke);
  padding: 12px 0;
  padding-top: calc(12px + env(safe-area-inset-top));
}


.balance-label{
  opacity: .65;
}

.card{
  color:var(--muted);
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}

.sub{
  color:var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.chart-title{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.kpi{
  font-size: 32px;
  font-weight:800;
  color:var(--teal);
}

.pill{
  border:1px solid rgba(45,212,191,.25);
  color:var(--teal);
  background:rgba(45,212,191,.08);
  border-radius:999px;
  padding:.35rem .75rem;
  font-size:.85rem;
  white-space:nowrap;
}

.smallnote{
  color:var(--muted);
  font-size:.9rem;
}

.form-select{
  background-color:#0f172a;
  border-color:var(--stroke);
  color:#fff;
}

.divider{
  height:1px;
  background:var(--stroke);
  margin:1rem 0;
}

/* Per-chart sizing */
#equityChart, #dailyChart, #coinChart, #positionChart, #winLossChart, #drawdownChart {
  max-height: 320px;
}

#monthlyChart {
  max-height: 100%;
}

/* Calendar nav */
.cal-nav-row{
  display:flex;
  align-items:center;
  gap:4px;
}
.cal-nav-btn{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:#fff;
  border-radius:8px;
  width:28px;
  height:28px;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s;
}
.cal-nav-btn:hover:not(:disabled){ background:rgba(255,255,255,.14); }
.cal-nav-btn:disabled{ opacity:.25; cursor:default; }
.cal-nav-label{
  font-weight:700;
  font-size:14px;
  color:var(--muted);
  white-space:nowrap;
}
.cal-this-month-btn{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  color:var(--muted);
  border-radius:8px;
  font-size:11px;
  padding:4px 9px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s;
}
.cal-this-month-btn:hover{ background:rgba(255,255,255,.14); color:#fff; }
.cal-month-stats{
  color:var(--muted);
  font-size:12px;
}

/* Calendar */
.calendar-wrap{
  padding: 0 8px;
}

.cal-year-view {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 4px 0;
}
.cal-year-month {
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 10px 6px 8px;
  text-align: center;
  cursor: pointer;
  transition: background .15s;
  border: 1px solid transparent;
}
.cal-year-month:hover { background: rgba(255,255,255,.08); }
.cal-year-month.cal-ym-current { border-color: var(--teal); }
.cal-year-month-name {
  font-size: 10px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.cal-year-month-pnl {
  font-size: 11px;
  font-weight: 800;
  margin-top: 4px;
  line-height: 1.2;
}
.cal-year-month-trades {
  font-size: 10px;
  color: var(--muted);
  margin-top: 2px;
}

.calendar-days{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  text-align:center;
  font-size:12px;
  color:var(--muted);
  margin: 6px 0 10px 0;
  user-select:none;
}

.calendar-grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.calendar-cell{
  position: relative;
  border-radius: 12px;
  border: 1px solid #0b0f1a;
  height: clamp(52px, 8vw, 90px);
  background: rgba(55,65,81,.55);
  overflow: hidden;
  cursor: pointer;
}

.calendar-cell.empty{
  visibility: hidden;
  pointer-events: none;
}

.calendar-day{
  position:absolute;
  right:6px;
  top:3px;
  font-size: clamp(8px, 2vw, 11px);
  line-height: 1;
  color:#9ca3af;
  opacity:.78;
  z-index: 2;
  user-select:none;
  pointer-events:none;
}

.calendar-pnl{
  position:absolute;
  top:44%;
  left:50%;
  transform: translate(-50%, -50%);
  font-size: clamp(9px, 2.2vw, 13px);
  font-weight:700;
  white-space:nowrap;
  z-index: 1;
  user-select:none;
  pointer-events:none;
}

.calendar-pnl.pos{
  color:#4ade80;
}

.calendar-pnl.neg{
  color:#f87171;
}

.calendar-trades{
  position:absolute;
  bottom:5px;
  left:50%;
  transform: translateX(-50%);
  font-size: clamp(8px, 1.9vw, 11px);
  color:#cbd5e1;
  font-weight:600;
  opacity:.9;
  white-space:nowrap;
  z-index:2;
  user-select:none;
  pointer-events:none;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Weekly lines */
#calendarWeeks .week-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding: clamp(8px, 1.5vw, 12px);
  border-radius:999px;
  border:1px solid rgba(45,212,191,.20);
  background:rgba(45,212,191,.06);
  margin-top:8px;
  font-size: clamp(12px, 2.4vw, 15px);
}

#calendarWeeks .week-right{
  display:flex;
  gap: clamp(8px, 2vw, 14px);
  align-items:center;
  white-space:nowrap;
  font-size: clamp(11px, 2.2vw, 14px);
}

#calendarWeeks .pnl-pos{
  color:var(--green);
  font-weight:700;
}

#calendarWeeks .pnl-neg{
  color:var(--red);
  font-weight:700;
}

#calendarWeeks .pnl-zero{
  color:var(--muted);
  font-weight:700;
}

/* ===== MODAL ===== */
.modal-overlay{
  position: fixed;
  inset: 0;
  /* Zostawiamy miejsce na bottom-nav */
  bottom: calc(65px + env(safe-area-inset-bottom));
  background: rgba(0,0,0,0.72);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  z-index: 9998; /* poniżej bottom-nav (9999) */
  padding: 16px 16px 0 16px;
}

.hidden{
  display:none;
}

.modal-card{
  width: min(720px, 100%);
  max-height: calc(100vh - 65px - env(safe-area-inset-bottom) - 32px);
  background: #0b0f1a;
  border-radius: 22px 22px 0 0;
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.55);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.15) transparent;
}
.modal-card::-webkit-scrollbar{ width: 4px; }
.modal-card::-webkit-scrollbar-track{ background: transparent; }
.modal-card::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.15);
  border-radius: 999px;
}
.modal-card::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.28);
}

.modal-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 16px 10px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  /* Przyklejony nagłówek podczas scrollowania */
  position: sticky;
  top: 0;
  background: #0b0f1a;
  z-index: 2;
  flex-shrink: 0;
}

.modal-date{
  color: #9ca3af;
  font-size: 16px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 48%;
}

.modal-pnl-big{
  font-size: 26px;
  font-weight: 800;
  color: var(--teal);
  text-align:center;
  flex:1;
}

.modal-close{
  cursor:pointer;
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: 10px;
  color:#9ca3af;
  background: rgba(255,255,255,0.04);
  flex-shrink: 0;
}

.modal-close:hover{
  background: rgba(255,255,255,0.07);
}

#modalChart{
  width:100% !important;
  max-height: 180px;
  padding: 8px 16px 0 16px;
  flex-shrink: 0;
}

.modal-stats{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 12px 16px 8px 16px;
  flex-shrink: 0;
}

.modal-stat{
  background: #111827;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 58px;
}

.modal-stat span{
  display:block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.9);
  margin-bottom: 4px;
}

.modal-stat strong{
  display:block;
  font-size: 18px;
  color: #e5e7eb;
}

.modal-trades{
  padding: 8px 16px 24px 16px;
  /* Usuń max-height — teraz cały modal-card scrolluje */
  flex: 1;
}

/* TIME | PAIR | SIDE | NET | DUR */
.modal-trades-head{
  display:grid;
  grid-template-columns: 64px 1fr 84px 110px 92px;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.8);
  padding: 8px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-top: 6px;
  position: sticky;
  top: 57px; /* wysokość modal-header */
  background: #0b0f1a;
  z-index: 1;
}

.modal-trade-row{
  display:grid;
  grid-template-columns: 64px 1fr 84px 110px 92px;
  gap: 10px;
  align-items:center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
  color: #e5e7eb;
}

.tag{
  display:inline-block;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: #e5e7eb;
  white-space:nowrap;
}

.side-long{
  color: #4ade80;
  font-weight: 700;
}

.side-short{
  color: #f87171;
  font-weight: 700;
}

.pnl-pos-t{
  color: #4ade80;
  font-weight: 800;
}

.pnl-neg-t{
  color: #f87171;
  font-weight: 800;
}

.journal-table .pnl-pos-t{ color: #4ade80; }
.journal-table .pnl-neg-t{ color: #f87171; }

/* ================= LOGIN ================= */
.login-wrap{
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg);
}

.login-card{
  width: 100%;
  max-width: 360px;
}

.login-logo{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}

.login-error{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #f87171;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 14px;
  margin-bottom: 16px;
}

.form-control{
  background: #0f172a;
  border: 1px solid var(--stroke);
  color: #fff;
  border-radius: 10px;
  padding: .55rem .85rem;
}

.form-control:focus{
  background: #0f172a;
  border-color: var(--teal);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}

.btn-login{
  background: var(--teal);
  color: #0b0f1a;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: .65rem 1rem;
  font-size: 15px;
  cursor: pointer;
  transition: opacity .18s;
}

.btn-login:hover{
  opacity: .88;
}

/* ================= LOGOUT ================= */
.logout-btn{
  display: flex;
  align-items: center;
  padding: 6px;
  border-radius: 8px;
  color: var(--muted);
  opacity: .7;
  transition: opacity .18s, background .18s;
}

.logout-btn:hover{
  opacity: 1;
  background: rgba(255,255,255,.06);
  color: var(--muted);
}

/* ================= JOURNAL ================= */
.journal-table-wrap{
  border-radius: 18px;
  overflow: hidden;
}

.journal-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  table-layout: auto;
}

.journal-table thead{
  background: var(--card);
}

.journal-table th{
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--stroke);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.journal-table th:hover{
  color: #e5e7eb;
}

.journal-table td{
  padding: 10px 14px;
  border-bottom: 1px solid var(--stroke);
  color: #e5e7eb;
  white-space: nowrap;
}

.journal-table tbody tr:last-child td{
  border-bottom: none;
}

.journal-table tbody tr:hover td{
  background: rgba(255,255,255,.03);
}

.journal-empty{
  text-align: center;
  padding: 32px !important;
  color: var(--muted);
}

.sort-icon{
  color: var(--teal);
  font-size: 11px;
}


/* nav link reset */
a.nav-item{
  text-decoration: none;
  color: inherit;
}

/* Chart legend in header */
.chart-legend-item{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}
.chart-legend-box{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* P&L percentage badge next to kpi */
.pnl-pct{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Pull-to-refresh indicator */
#pullIndicator{
  position: fixed;
  top: calc(env(safe-area-inset-top) + 56px);
  left: 50%;
  margin-left: -18px;
  width: 36px;
  height: 36px;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  color: var(--muted);
  transition: color 0.15s;
}

@media (max-width: 620px){
  .modal-date{
    max-width: 42%;
    font-size: 14px;
  }

  .modal-pnl-big{
    font-size: 22px;
  }

  .modal-trades-head,
  .modal-trade-row{
    grid-template-columns: 54px 1fr 64px 92px 78px;
    font-size: 12px;
  }

  .calendar-trades{
    font-size: 9px;
    bottom: 4px;
  }
}

/* ================= BOTTOM NAV ================= */
.bottom-nav{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(65px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  background: rgba(11,15,26,.85);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--stroke);
  z-index: 9999;
  display:flex;
  justify-content:space-around;
  align-items:center;
}

.nav-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  font-size:12px;
  color: var(--muted);
  cursor:pointer;
  -webkit-tap-highlight-color: transparent;
  padding: 5px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: color .2s ease, background .2s ease, border-color .2s ease;
}

.nav-item svg{
  width:22px;
  height:22px;
  margin-bottom:3px;
  opacity:0.7;
  transition: opacity .2s ease;
}

.nav-item.active{
  color: var(--teal);
}

.nav-item.active svg{
  opacity:1;
}

@media (hover: hover) {
  .nav-item:hover {
    color: var(--teal);
    background: rgba(255,255,255,.06);
    border-color: rgba(156,163,175,.35);
  }

  .nav-item:hover svg {
    opacity: 1;
  }
}

@keyframes spinRefresh {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.nav-item.refresh-active{
  color: var(--teal);
  transform: scale(0.95);
}

.nav-item.refresh-active svg{
  opacity: 1;
}

.refreshing{
  animation: spinRefresh 1s linear infinite;
}

/* ================= TRADE — OPEN POSITIONS ================= */
.pos-coin{
  font-size: 17px;
  font-weight: 800;
  color: #e5e7eb;
  letter-spacing: .02em;
}

.pos-mode{
  font-size: 11px;
  opacity: .6;
}

.pos-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.pos-stat span{
  display: block;
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.pos-stat strong{
  display: block;
  font-size: 14px;
  color: #e5e7eb;
  font-weight: 600;
}

.pos-liq{
  color: var(--red) !important;
  opacity: .75;
}

@media (max-width: 480px){
  .pos-row{
    grid-template-columns: repeat(2, 1fr);
  }
  .pos-coin{
    font-size: 15px;
  }
}

/* ================= HEATMAP ================= */
.hm-scroll{
  overflow-x: auto;
  padding-bottom: 4px;
}

#heatmapGrid{
  width: fit-content;
  margin: 0 auto;
}

.hm-row{
  display: flex;
  align-items: center;
}

.hm-label{
  width: 34px;
  flex-shrink: 0;
  font-size: 11px;
  color: var(--muted);
}

.hm-hour{
  width: 22px;
  flex-shrink: 0;
  margin: 1px;
  font-size: 9px;
  color: var(--muted);
  text-align: center;
}

.hm-cell{
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 4px;
  margin: 1px;
  background: rgba(55,65,81,.35);
}

.hm-empty{
  background: rgba(55,65,81,.15) !important;
}

/* ================= CONFIG ================= */
.cfg-btn{
  padding: .42rem 1rem;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: opacity .15s;
  white-space: nowrap;
}

.cfg-btn:hover{ opacity: .82; }
.cfg-btn:disabled{ opacity: .45; cursor: default; }

.cfg-btn-teal{
  background: var(--teal);
  color: #0b0f1a;
}

.cfg-btn-yellow{
  background: rgba(234,179,8,.18);
  border-color: rgba(234,179,8,.45);
  color: #fbbf24;
}

.cfg-btn-blue{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.4);
  color: #38bdf8;
}

.cfg-btn-ghost{
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: var(--muted);
  font-weight: 600;
}


.cfg-toast{
  position: fixed;
  top: calc(var(--header-h, 88px) + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  pointer-events: none;
}

.cfg-toast-ok{
  background: rgba(34,197,94,.14);
  border: 1px solid rgba(34,197,94,.35);
  color: #4ade80;
}

.cfg-toast-err{
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.35);
  color: #f87171;
}

.cfg-toast-warn{
  background: rgba(234,179,8,.12);
  border: 1px solid rgba(234,179,8,.35);
  color: #fbbf24;
}


/* ---- Chart Modal ---- */
.chart-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

.chart-modal.hidden { display: none; }

.chart-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--stroke);
  flex-shrink: 0;
}

.chart-intervals {
  display: flex;
  gap: 6px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--stroke);
  flex-shrink: 0;
  overflow-x: auto;
}

.interval-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}

.interval-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #0b0f1a;
}

.chart-close-btn {
  background: rgba(255,255,255,.07);
  border: none;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-close-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

#chartContainer {
  flex: 1;
  min-height: 0;
  position: relative;
  padding-bottom: calc(env(safe-area-inset-bottom) + 4px);
}

.chart-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  color: var(--muted);
  font-size: 14px;
}

@keyframes chartSpin {
  to { transform: rotate(360deg); }
}

.chart-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(45,212,191,.2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: chartSpin .75s linear infinite;
}

.chart-error-icon {
  font-size: 28px;
  opacity: .8;
}

.chart-retry-btn {
  margin-top: 4px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--muted);
  padding: 5px 16px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
}

.chart-retry-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Monthly chart — pointer cursor on bars */
#monthlyChart { cursor: pointer; }

/* clickable position cards */
.pos-card {
  cursor: pointer;
  transition: background .15s;
}

.pos-card:hover { background: rgba(255,255,255,.04); }

/* ---- Period buttons (Journal) ---- */
.period-btn {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  padding: 5px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}

.period-btn:hover {
  background: rgba(255,255,255,.09);
  color: #e5e7eb;
}

.period-btn.active {
  background: var(--teal);
  border-color: var(--teal);
  color: #0b0f1a;
}

/* ---- Journal table responsive ---- */
@media (max-width: 575px) {
  .journal-table .col-time,
  .journal-table .col-gross,
  .journal-table .col-fee,
  .journal-table .col-dur {
    display: none;
  }
}

/* ===== Config form ===== */
.cfg-label{
  display: block;
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: .25rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cfg-input{
  width: 100%;
  background: var(--card2, #131929);
  border: 1px solid var(--border, #1e2d47);
  border-radius: 8px;
  color: var(--fg, #e2e8f0);
  font-size: .88rem;
  padding: .45rem .75rem;
  outline: none;
  transition: border-color .15s;
}
.cfg-input:focus{ border-color: var(--teal, #2dd4bf); }
.cfg-input::placeholder{ color: var(--muted, #64748b); }
.cfg-default-hint{
  font-size: .68rem;
  color: var(--muted, #64748b);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}

/* ===== Migration progress ===== */
.migrate-bar-wrap{
  background: var(--border, #1e2d47);
  border-radius: 99px;
  height: 6px;
  overflow: hidden;
}
.migrate-bar{
  height: 100%;
  width: 0%;
  background: var(--teal, #2dd4bf);
  border-radius: 99px;
  transition: width .4s ease;
}

/* ===== Admin panel ===== */
.adm-tabs{
  display: flex;
  gap: 6px;
}
.adm-tab{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--muted);
  border-radius: 10px;
  padding: .45rem 1.1rem;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.adm-tab:hover{ background: rgba(255,255,255,.09); color: #e5e7eb; }
.adm-tab.active{
  background: var(--teal);
  border-color: var(--teal);
  color: #0b0f1a;
}

.adm-table-wrap{ overflow-x: auto; }
.adm-table{
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
}
.adm-table th{
  text-align: left;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--border);
}
.adm-table td{
  padding: .55rem .5rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.adm-table tbody tr:last-child td{ border-bottom: none; }

.adm-badge{
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 99px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .03em;
}
.adm-badge-admin   { background: rgba(251,191,36,.15); color: #fbbf24; }
.adm-badge-user    { background: rgba(100,116,139,.15); color: var(--muted); }
.adm-badge-active  { background: rgba(45,212,191,.15); color: var(--teal); }
.adm-badge-inactive{ background: rgba(239,68,68,.12);  color: #f87171; }

.adm-btn-sm { padding: .2rem .55rem; font-size: .75rem; }
.adm-btn-del{ background: rgba(239,68,68,.15); color: #f87171; border: 1px solid rgba(239,68,68,.25); border-radius: 8px; cursor: pointer; transition: opacity .15s; }
.adm-btn-del:hover{ opacity: .75; }

/* Modal */
.adm-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}
.adm-modal.hidden{ display: none; }
.adm-modal-box{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.75rem;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 64px rgba(0,0,0,.5);
}
.adm-modal-title{
  font-size: 1rem;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: .01em;
}
.adm-close-btn{
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  border: none;
  color: var(--muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}
.adm-close-btn:hover{ background: rgba(255,255,255,.12); color: var(--fg); }

.adm-field{ margin-bottom: 1rem; }
.adm-field:last-of-type{ margin-bottom: 0; }

.adm-field-label{
  display: block;
  font-size: .7rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .4rem;
}
.adm-input,
.app-select{
  width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  font-size: .9rem;
  padding: .6rem .85rem;
  outline: none;
  transition: border-color .15s, background .15s;
  appearance: none;
  -webkit-appearance: none;
}
.adm-input:focus,
.app-select:focus{ border-color: var(--teal); background: rgba(45,212,191,.04); }
.adm-input::placeholder{ color: var(--muted); }

.app-select-wrap{
  position: relative;
}
.app-select-wrap::after{
  content: '';
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--muted);
  pointer-events: none;
}

.adm-hint{
  font-size: .7rem;
  color: var(--muted);
  margin-top: .3rem;
}

.adm-modal-actions{
  display: flex;
  gap: .65rem;
  margin-top: 1.5rem;
}
.adm-modal-actions .cfg-btn{ flex: 1; justify-content: center; padding: .6rem; }


/* ===== Nav: desktop vs mobile ===== */
.nav-desktop-only { display: none; }
.nav-mobile-only  { display: flex; }

/* ===== More popup ===== */
.more-popup{
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: .4rem;
  min-width: 140px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 300;
}
.more-popup-item{
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem .8rem;
  border-radius: 10px;
  color: var(--muted);
  text-decoration: none;
  font-size: .88rem;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.more-popup-item:hover,
.more-popup-item.active{
  background: rgba(45,212,191,.1);
  color: var(--teal);
}

/* ---- daemon status dot ---- */
.daemon-dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.daemon-dot-ok{
  background: var(--green);
  box-shadow: 0 0 6px rgba(34,197,94,.7);
  animation: daemonPulse 2s ease-in-out infinite;
}
.daemon-dot-warn{
  background: #fbbf24;
  box-shadow: 0 0 6px rgba(251,191,36,.6);
}
.daemon-dot-err{
  background: var(--red);
  box-shadow: 0 0 6px rgba(239,68,68,.6);
}
.daemon-dot-unknown{
  background: var(--muted);
  opacity: .5;
}
@keyframes daemonPulse{
  0%,100%{ opacity:1; }
  50%{ opacity:.55; }
}

/* ---- bot section label ---- */
.bot-section-label{
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: .6;
  margin-bottom: .75rem;
}

/* ---- SL/TP grid ---- */
.bot-sl-tp-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bot-sl-tp-side{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--stroke);
  border-radius: 12px;
  padding: 10px 12px 12px;
}

.bot-sl-tp-tag{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
}

.bot-tag-sl{
  background: rgba(239,68,68,.12);
  color: #f87171;
  border: 1px solid rgba(239,68,68,.2);
}

.bot-tag-tp{
  background: rgba(34,197,94,.1);
  color: #4ade80;
  border: 1px solid rgba(34,197,94,.2);
}

/* ---- bot toggle switch ---- */
.app-switch{
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  cursor: pointer;
  flex-shrink: 0;
}
.app-switch input{ opacity:0; width:0; height:0; position:absolute; }
.app-switch-track{
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  transition: background .22s, border-color .22s, box-shadow .22s;
}
.app-switch-track::after{
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  transition: transform .22s cubic-bezier(.4,0,.2,1), background .22s;
}
.app-switch input:checked + .app-switch-track{
  background: var(--teal);
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(45,212,191,.18);
}
.app-switch input:checked + .app-switch-track::after{
  transform: translateY(-50%) translateX(20px);
  background: #fff;
}
.app-switch:hover .app-switch-track{
  border-color: rgba(255,255,255,.22);
}
.app-switch input:focus-visible + .app-switch-track{
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* Help button */
.help-btn{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.help-btn:hover{ background: rgba(255,255,255,.12); color:#fff; }

/* Help modal */
.help-body{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.help-section{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.help-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.help-body p{
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}
.help-body strong{ color: #e2e8f0; }
.help-list{
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.help-note{
  font-size: 12px !important;
  opacity: .7;
}
.help-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.help-table td{
  padding: 6px 8px;
  vertical-align: top;
  color: var(--muted);
  border-bottom: 1px solid var(--stroke);
}
.help-table tr:last-child td{ border-bottom: none; }
.help-table td:first-child{
  color: #e2e8f0;
  font-weight: 600;
  white-space: nowrap;
  width: 38%;
}
.help-table code{
  background: rgba(255,255,255,.07);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12px;
  font-family: monospace;
  color: var(--teal);
}
.help-example{
  background: rgba(0,0,0,.35);
  border-left: 3px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  font-family: monospace;
  font-size: 11px;
  color: #94a3b8;
  word-break: break-all;
}