:root{
  --safe-bottom: env(safe-area-inset-bottom);
}

/* Layout */
.appShell{
  max-width: 980px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: calc(84px + var(--safe-bottom));
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 12px;
}

.topbar__left{display:flex; align-items:center; gap:12px; min-width:0;}
.brandIcon{
  height:40px; width:40px;
  border-radius: 16px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:grid; place-items:center;
  flex: 0 0 40px;
}
.brandLogo{
  width:100%;
  height:100%;
  object-fit: contain;
  display:block;
}
.brandTitle{font-size: 14px; font-weight: 800; line-height: 1.2;}
.brandSubtitle{font-size: 12px; color:#64748b; font-weight:700;}

.topbar__right{display:flex; align-items:center; gap:8px;}
.searchWrap{position:relative;}
.searchIcon{position:absolute; left:12px; top:50%; transform: translateY(-50%); color:#94a3b8; font-size: 14px;}
.searchInput{
  padding: 10px 12px 10px 36px;
  width: min(300px, 52vw);
  font-size: 14px;
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background:#fff;
  outline:none;
}

.iconBtn{
  height:40px; width:40px;
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:grid; place-items:center;
  transition:.15s ease;
}
.iconBtn:hover{transform: translateY(-1px)}
.iconBtn--sm{
  height:32px; width:32px;
  border-radius: 10px;
}
.iconBtn--sm i{font-size: 14px;}
.iconBtn--success{border-color:#bbf7d0; background:#ecfdf5; color:#047857;}
.iconBtn--danger{border-color:#fecaca; background:#fef2f2; color:#b91c1c;}

.content{min-height: 60vh;}
.view{display:none;}
.view.isActive{display:block;}
.comingSoon{
  min-height: 52vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  text-align:center;
  padding: 24px 12px;
}
.comingSoon__icon{
  height:96px; width:96px;
  border-radius: 28px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:grid; place-items:center;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.comingSoon__icon i{font-size: 38px; color:#0f172a;}
.comingSoon__title{font-size: 20px; font-weight: 900; color:#0f172a;}
.comingSoon__sub{font-size: 12px; font-weight: 800; color:#64748b; max-width: 320px;}

/* Bottom nav */
.bottomNav{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px calc(10px + var(--safe-bottom));
  background: rgba(248,250,252,.92);
  backdrop-filter: blur(12px);
  border-top: 1px solid #e2e8f0;
  display:flex;
  justify-content: center;
  z-index: 40;
}
.bottomNav .navItem{
  width: min(180px, 20%);
  border-radius: 16px;
  padding: 10px 6px;
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  color:#475569;
  transition:.15s ease;
}
.bottomNav .navItem i{font-size: 18px;}
.bottomNav .navItem.isActive{
  background:#fff;
  border:1px solid #0f172a;
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
  color:#0f172a;
}

/* Segmented */
.segmented{
  display:inline-flex;
  border:1px solid #e2e8f0;
  background:#fff;
  border-radius: 16px;
  padding: 4px;
  gap: 4px;
}
.segmentedRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.segmented--mini{width:100%; justify-content: space-between;}
.segBtn{
  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 12px;
  color:#64748b;
  transition:.15s ease;
}
.segBtn.isActive{background:#0f172a; color:#fff;}

.listHeader{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.listHeader__meta{display:flex; gap:8px; flex-wrap:wrap;}
.listHeader__actions{display:flex; gap:8px;}

.pill{
  font-size: 12px;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 10px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  white-space: nowrap;
}
.pill--soft{background:#f8fafc; color:#475569;}
.pill--success{background:#ecfdf5; border-color:#bbf7d0; color:#047857;}
.pill--danger{background:#fef2f2; border-color:#fecaca; color:#b91c1c;}
.pill--warning{background:#fff7ed; border-color:#fed7aa; color:#c2410c;}
.pill--info{background:#f0f9ff; border-color:#bae6fd; color:#0369a1;}

.ghostBtn{
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 10px 12px;
  font-weight: 900;
  font-size: 12px;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition:.15s ease;
}
.ghostBtn.isActive{
  background:#0f172a;
  color:#fff;
  border-color:#0f172a;
}
.ghostBtn--sm{
  padding: 8px 10px;
  font-size: 11px;
}
.ghostBtn:hover{transform: translateY(-1px)}

.primaryBtn{
  width:100%;
  border-radius: 14px;
  background:#0f172a;
  color:#fff;
  padding: 12px 14px;
  font-weight: 900;
  font-size: 13px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  transition:.15s ease;
}
.primaryBtn:hover{transform: translateY(-1px)}

/* Cards / panels */
.panel{margin-top: 4px;}
.panelTitle{font-size: 16px; font-weight: 900;}
.panelSub{font-size: 12px; font-weight: 800; color:#64748b; margin-top: 2px;}

.grid2{display:grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px;}
@media (min-width: 840px){ .grid2{grid-template-columns: 1fr 1fr;} }

.card{
  border-radius: 16px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 14px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.card--active{
  border-color:#0f172a;
  box-shadow: 0 16px 36px rgba(15,23,42,.12);
}
.cardTitle{font-size: 13px; font-weight: 900;}
.cardTitle--row{display:flex; align-items:center; gap:6px;}
.infoIcon{font-size: 11px; color:#94a3b8;}
.cardSub{font-size: 12px; color:#64748b; font-weight:800; margin-top: 4px;}
.lbList{margin-top: 8px;}
.adBalanceCard{margin-top: 12px;}
.adBalanceRow{flex-wrap: wrap;}
.adBalanceRow .rowRight{flex-wrap: wrap; justify-content:flex-end;}
.lbTimer{
  margin-left: auto;
  margin-right: 4px;
  display: inline-flex;
  justify-content: flex-end;
  min-width: 15ch;
  padding: 4px 8px;
  border-radius: 999px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size: 10px;
  font-weight: 900;
  color:#0f172a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.winnersHistoryCard{margin-top: 12px;}
.winnersTableGroup + .winnersTableGroup{margin-top: 12px;}
.winnersTableTitle{font-size: 12px; font-weight: 900; color:#0f172a; margin-top: 6px;}
.winnersTableWrap{margin-top: 10px; overflow-x: auto;}
.winnersTable{
  width: 100%;
  min-width: 360px;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
  font-size: 12px;
  font-weight: 800;
}
.winnersTable thead th{
  text-align: left;
  font-size: 11px;
  font-weight: 900;
  color:#64748b;
  padding: 0 10px;
}
.winnersTable thead th.isRight{text-align:right;}
.winnersTable thead th:nth-child(1),
.winnersTable tbody td:nth-child(1){width: 84px;}
.winnersTable thead th:nth-child(3),
.winnersTable tbody td:nth-child(3){width: 84px;}
.winnersTable thead th:nth-child(4),
.winnersTable tbody td:nth-child(4){width: 96px;}
.winnersTable tbody td{
  padding: 10px;
  background:#fff;
  border-top:1px solid #e2e8f0;
  border-bottom:1px solid #e2e8f0;
}
.winnersTable tbody td:first-child{
  border-left:1px solid #e2e8f0;
  border-radius: 12px 0 0 12px;
  font-weight: 900;
}
.winnersTable tbody td:last-child{
  border-right:1px solid #e2e8f0;
  border-radius: 0 12px 12px 0;
}
.winnersTable tbody td.isRight{text-align:right;}
.winnersPlace{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 4px 10px;
  border-radius: 999px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size: 11px;
  font-weight: 900;
  color:#475569;
  white-space: nowrap;
}
.winnersPlace--first{background:#fffbeb; border-color:#fde68a; color:#92400e;}
.winnersPlace--second{background:#f8fafc; border-color:#e2e8f0; color:#475569;}
.winnersPlace--third{background:#fff7ed; border-color:#fed7aa; color:#c2410c;}
.winnersTableName{font-weight: 900;}
.winnersTableMeta{font-size: 11px; font-weight: 800; color:#64748b; margin-top: 2px;}
.winnersTableEmpty{
  padding: 12px 10px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color:#94a3b8;
}
.divider{height:1px; background: #e2e8f0; margin: 12px 0;}
.isHidden{display:none !important;}

/* Exchange */
.exchangeIntro{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.exchangeCard{margin-top: 12px;}
.exchangeChartHeader{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.exchangeChartGrid{
  display:grid;
  grid-template-columns: 52px 1fr;
  gap: 8px;
  align-items: stretch;
  margin-top: 12px;
}
.exchangeAxis{
  position: relative;
  padding-right: 10px;
  color:#64748b;
  height: 100%;
}
.exchangeAxis::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:1px;
  background:#e2e8f0;
}
.exchangeAxisLabel{
  position:absolute;
  right: 10px;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.exchangeChartWrap{position: relative; min-width: 0;}
.exchangePrice{text-align:right; min-width: 140px;}
.exchangePrice__label{font-size: 11px; font-weight: 800; color:#64748b;}
.exchangePrice__value{font-size: 18px; font-weight: 900;}
.exchangePrice__delta{font-size: 11px; font-weight: 900;}
.exchangePrice__delta--up{color:#047857;}
.exchangePrice__delta--down{color:#b91c1c;}
.exchangeChart{
  position:relative;
  height:220px;
  margin-top: 0;
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background: linear-gradient(180deg,#f8fafc,#ffffff);
  overflow:hidden;
  cursor: crosshair;
}
.exchangeChart::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(148,163,184,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.25) 1px, transparent 1px);
  background-size: 100% 25%, 20% 100%;
  opacity:.4;
  pointer-events:none;
}
.exchangeChart__svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.exchangeChart__area{fill: rgba(15,23,42,.12);}
.exchangeChart__line{fill:none; stroke:#0f172a; stroke-width:2.5;}
.exchangeChart__dot{fill:#0f172a; stroke:#fff; stroke-width:2;}
.exchangeChart__marker-line{stroke: rgba(15,23,42,.35); stroke-width:1.5; stroke-dasharray: 4 3;}
.exchangeChart__marker-dot{fill:#0f172a; stroke:#fff; stroke-width:2;}
.exchangeChartTooltip{
  position:absolute;
  padding: 4px 8px;
  border-radius: 999px;
  background:#0f172a;
  color:#fff;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transform: translate(-50%, -10px);
  opacity:0;
  z-index: 2;
  pointer-events:none;
  transition: .12s ease;
}
.exchangeChartTooltip.isOpen{opacity:1;}
.exchangeEmpty{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  font-weight: 800;
  color:#64748b;
}
.exchangeChartMeta{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  color:#64748b;
  margin-top: 6px;
}
.exchangeBook{margin-top: 12px;}
.exchangeBookTable{margin-top: 10px; display:flex; flex-direction: column; gap: 8px;}
.exchangeBookHeader{display:grid; grid-template-columns: 1fr 1fr; font-size: 12px; font-weight: 900; color:#475569;}
.exchangeBookRows{display:flex; flex-direction: column; gap: 6px;}
.exchangeBookRow{display:grid; grid-template-columns: 1fr 1fr; gap: 8px;}
.exchangeBookCell{
  display:flex;
  align-items:center;
  justify-content: space-between;
  border-radius: 12px;
  padding: 8px 10px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size: 12px;
  font-weight: 900;
}
.exchangeBookCell--buy{background:#ecfdf5; border-color:#bbf7d0; color:#047857;}
.exchangeBookCell--sell{background:#fef2f2; border-color:#fecaca; color:#b91c1c;}
.exchangeBookCell--empty{background:#f8fafc; border-style: dashed; color:#94a3b8;}
.exchangeBookPrice{font-variant-numeric: tabular-nums;}
.exchangeBookAmount{font-size: 11px; font-weight: 800; opacity: .85;}
.exchangeActions{
  margin-top: 12px;
  display:flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: nowrap;
}
.exchangeAction{
  width:100%;
  justify-content:center;
  flex: 1 1 0;
}
.exchangeAction--sell{border-color:#0f172a; background:#fff; color:#0f172a;}

.card-promo-bonus{
  border-radius: 16px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 14px;
  margin-top: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.card-video-bonus{
  border-radius: 16px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 14px;
  margin-top: 12px;
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

/* Accordion */
.accordion + .accordion{margin-top: 10px;}
.grid2 .accordion + .accordion{margin-top: 0;}
.accHeader{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size: 13px;
  font-weight: 900;
  transition:.15s ease;
}
.accChevron{transition:.15s ease;}
.accBody{display:none; padding-top: 10px;}
.accordion.isOpen .accBody{display:block;}
.accordion.isOpen .accChevron{transform: rotate(180deg);}
.accHeader--rich{background:#fff; border-radius: 14px; padding: 12px;}
.accHeader__left{display:flex; align-items:center; gap: 10px;}
.accIcon{
  height:36px; width:36px;
  border-radius: 12px;
  border:1px solid #e2e8f0;
  display:grid; place-items:center;
  background:#f8fafc;
  flex: 0 0 auto;
}
.accTitle{display:block; font-size: 13px; font-weight: 900; color:#0f172a;}
.accSub{display:block; font-size: 11px; font-weight: 800; color:#64748b; margin-top: 2px;}
.accMeta{display:flex; align-items:center; gap: 8px; color:#94a3b8;}
.accBodyInner{padding-top: 2px;}
.accHint{
  font-size: 12px;
  font-weight: 800;
  color:#475569;
  background:#f8fafc;
  border:1px dashed #e2e8f0;
  border-radius: 12px;
  padding: 8px 10px;
  margin-bottom: 10px;
}
.modalTrigger{
  width:100%;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-size: 13px;
  font-weight: 900;
  text-align:left;
  cursor:pointer;
  transition:.15s ease;
}
.modalTrigger:hover{transform: translateY(-1px)}
.formGrid{display:grid; grid-template-columns: 1fr; gap: 10px;}
@media (min-width: 640px){ .formGrid{grid-template-columns: 1fr 1fr;} }

/* Form */
.form{display:flex; flex-direction:column; gap: 10px; margin-top: 10px;}
.field span{display:block; font-size: 12px; font-weight: 900; color:#334155; margin-bottom: 6px;}
.field input,.field select,.field textarea,.input{
  width:100%;
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 10px 12px;
  font-size: 14px;
  outline:none;
}
.field input:disabled,
.field textarea:disabled,
.field select:disabled{
  background:#f8fafc;
  color:#94a3b8;
  border-style: dashed;
  cursor:not-allowed;
}
.fieldHint{
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  color:#94a3b8;
}
.hint{display:block; font-size: 11px; color:#64748b; font-weight:800; margin-top: 6px;}

/* Modal sections */
.modalSection{
  border-radius: 16px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(15,23,42,.06);
}
.sectionHeader{display:flex; align-items:flex-start; justify-content: space-between; gap: 10px;}
.sectionTitle{font-size: 13px; font-weight: 900; display:flex; align-items:center; gap: 8px;}
.sectionTitle i{font-size: 14px; color:#0f172a;}
.sectionSub{font-size: 12px; font-weight:800; color:#64748b; margin-top: 4px;}
.sectionBody{margin-top: 10px;}
.taskDesc{
  font-size: 13px;
  line-height: 1.5;
  color:#334155;
  margin: 0;
}
.taskLinkRow{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.taskLinkText{
  font-size: 12px;
  font-weight: 800;
  color:#475569;
  display:flex;
  gap: 6px;
  align-items:center;
  min-width:0;
}
.taskLinkUrl{
  color:#0f172a;
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.rowItem--soft{background:#f8fafc; border-style: dashed;}

.adBlock{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.adCardActions{
  display:flex;
  align-items:center;
  gap: 6px;
  justify-content:flex-end;
}
.adCardControls{
  display:flex;
  align-items:center;
  gap: 6px;
  justify-content:flex-end;
}
.iconTilt45{
  display:inline-block;
  transform: rotate(45deg);
}
.adProofs{
  border:1px dashed #e2e8f0;
  border-radius: 14px;
  background:#f8fafc;
  padding: 10px 12px;
}
.adProofs__header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.adProofs__title{
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
}
.adProofs__list{
  display:flex;
  flex-direction:column;
  gap: 8px;
}
.adProofs__empty{
  font-size: 12px;
  font-weight: 800;
  color:#64748b;
}

.proofReviewCard{
  border-radius: 14px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 12px;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.proofReviewHeader{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 10px;
}
.proofReviewTitle{font-size: 13px; font-weight: 900;}
.proofReviewSub{font-size: 12px; font-weight: 800; color:#64748b; margin-top: 2px;}
.proofReviewBadges{display:flex; align-items:center; gap: 6px; flex-wrap: wrap;}
.proofReviewBody{margin-top: 8px; font-size: 12px; font-weight: 800; color:#475569;}
.proofReviewText{margin-top: 4px;}
.proofReviewNote{margin-top: 10px;}
.proofReviewActions{margin-top: 10px; display:flex; gap: 8px; flex-wrap: wrap;}
.actionBadge{
  border-radius: 999px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  display:inline-flex;
  align-items:center;
  gap: 6px;
  transition:.15s ease;
}
.actionBadge:hover{transform: translateY(-1px);}
.actionBadge:disabled{opacity:.5; cursor:not-allowed; transform:none;}
.actionBadge--pay{background:#ecfdf5; border-color:#bbf7d0; color:#047857;}
.actionBadge--reject{background:#fef2f2; border-color:#fecaca; color:#b91c1c;}
.actionBadge--rework{background:#fff7ed; border-color:#fed7aa; color:#c2410c;}

.proofMedia{
  display:flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.proofThumbBtn{
  height:64px; width:64px;
  border-radius: 10px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding: 4px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.15s ease;
}
.proofThumbBtn:hover{transform: translateY(-1px);}
.proofThumbBtn img{
  height:100%;
  width:100%;
  object-fit: cover;
  border-radius: 8px;
  display:block;
}

.imageOverlay{
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.65);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 16px;
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
  z-index: 100;
}
.imageOverlay.isOpen{opacity:1; pointer-events:auto;}
.imageOverlay__content{
  position: relative;
  max-width: 96vw;
  max-height: 92vh;
}
.imageOverlay__img{
  display:block;
  width: 96vw;
  height: auto;
  max-height: 92vh;
  border-radius: 16px;
  border:1px solid #e2e8f0;
  background:#fff;
  box-shadow: 0 30px 80px rgba(15,23,42,.35);
}
.imageOverlay__close{
  position:absolute;
  top:-16px;
  right:-16px;
  box-shadow: 0 12px 30px rgba(15,23,42,.2);
}

.proofForm{margin-top: 12px;}
.proofSection{padding: 8px; margin-bottom: 14px;}
.proofGrid{display:grid; grid-template-columns: 1fr; gap: 10px;}
@media (min-width: 720px){ .proofGrid{grid-template-columns: 1.2fr 0.8fr; align-items:start;} }
.fileDrop{
  position: relative;
  border-radius: 14px;
  border:1px dashed #cbd5e1;
  background:#f8fafc;
  min-height: 120px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.fileDrop input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.fileDrop__content{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color:#475569;
}
.fileDrop__content i{font-size: 18px; color:#0f172a;}
.fileDrop__title{font-size: 13px; font-weight: 900; color:#0f172a;}
.fileDrop__sub{font-size: 11px; color:#64748b;}
.proofActions{display:flex; flex-direction: column; gap: 10px; padding-bottom: 4px; align-items: stretch;}
  .proofActions__buttons{display:flex; align-items:center; gap: 8px; flex-wrap: nowrap; justify-content: space-between; width:100%;}
  .proofActions__buttons .ghostBtn,
  .proofActions__buttons .primaryBtn{flex:1 1 0; width:100%; justify-content:center;}
  @media (min-width: 540px){
    .proofActions{flex-direction: column; align-items: stretch;}
    .proofActions__buttons .primaryBtn{padding-left: 18px; padding-right: 18px;}
  }
.proofPreview{display:grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 10px;}
.proofThumb{
  border:1px solid #e2e8f0;
  border-radius: 10px;
  background:#fff;
  padding: 4px;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.proofThumb img{width:100%; height:100%; object-fit: cover; border-radius: 8px; display:block;}
.proofView{
  margin-top: 8px;
  padding: 10px;
  border:1px solid #e2e8f0;
  border-radius: 12px;
  background:#f8fafc;
}
.proofView__title{
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
  margin-bottom: 6px;
}
.proofView__text{
  font-size: 12px;
  font-weight: 800;
  color:#475569;
  white-space: pre-wrap;
}
.proofView .proofPreview{margin-top: 8px;}
.proofEmpty{
  grid-column: 1 / -1;
  font-size: 11px;
  font-weight: 800;
  color:#64748b;
  border:1px dashed #cbd5e1;
  border-radius: 10px;
  background:#fff;
  padding: 8px;
  text-align:center;
}
.taskStatusNote{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid #e2e8f0;
  background:#f8fafc;
  font-size: 12px;
  font-weight: 900;
  color:#0f172a;
}
.taskStatusNote--success{border-color:#bbf7d0; background:#ecfdf5; color:#047857;}
.taskStatusNote--danger{border-color:#fecaca; background:#fef2f2; color:#b91c1c;}
.taskStatusNote--warning{border-color:#fed7aa; background:#fff7ed; color:#c2410c;}
.taskStatusNote--info{border-color:#bae6fd; background:#f0f9ff; color:#0369a1;}

/* Row items */
.rowItem{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  border:1px solid #e2e8f0;
  border-radius: 16px;
  padding: 10px 12px;
  background: #fff;
}
.rowItem--clickable{
  cursor:pointer;
  transition:.15s ease;
}
.rowItem--clickable:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(15,23,42,.08);
}
.rowLeft{display:flex; align-items:center; gap: 10px;}
.rowIcon{height:40px; width:40px; border-radius: 16px; border:1px solid #e2e8f0; display:grid; place-items:center;}
.rowTitle{font-weight: 900; font-size: 13px;}
.rowSub{font-weight: 800; font-size: 12px; color:#64748b; margin-top: 2px;}
.rowRight{display:flex; align-items:center; gap: 8px;}

/* Task card (based on your template) */
.statsInfoWrap{position:relative;}
.statsInfoTrigger{
  cursor:pointer;
  transition:.15s ease;
}
.statsInfoTrigger:hover{transform: translateY(-1px)}
.statsPopover{
  position:absolute;
  right:0;
  bottom:calc(100% + 8px);
  min-width: 220px;
  max-width: 260px;
  padding:8px 10px;
  border-radius: 10px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#0f172a;
  font-size:12px;
  font-weight:800;
  box-shadow: 0 10px 30px rgba(15,23,42,.08);
  opacity:0;
  transform: translateY(6px);
  pointer-events:none;
  transition:.15s ease;
  z-index: 10;
}
.statsInfoWrap.open .statsPopover{opacity:1; transform: translateY(0); pointer-events:auto;}

.taskCard{border-radius: 16px; border:1px solid #e2e8f0; background:#fff; box-shadow: 0 10px 30px rgba(15,23,42,.06); padding: 14px;}
.taskCard--active{
  border-color:#0f172a;
  box-shadow: 0 16px 36px rgba(15,23,42,.12);
}
.taskTop{display:flex; align-items:flex-start; justify-content: space-between; gap: 12px;}
.taskLeft{display:flex; gap: 12px; min-width:0;}
.taskIcon{height:48px; width:48px; border-radius: 16px; border:1px solid #e2e8f0; display:grid; place-items:center; flex: 0 0 auto;}
.taskMeta{min-width:0;}
.taskBadges{display:flex; gap: 8px; flex-wrap:wrap; align-items:center;}
.modalHeader .modalSub{margin-top: 4px;}
.badge{font-size: 11px; font-weight: 900; color:#64748b; border:1px solid #e2e8f0; border-radius: 999px; padding: 5px 10px; background:#fff;}
.badge--tag{color:#4338ca; background:#eef2ff; border-color:#e0e7ff;}
.badge--like{display:inline-flex; gap: 6px; align-items:center;}
.badge--success{border-color:#bbf7d0; color:#047857; background:#ecfdf5;}
.badge--danger{border-color:#fecaca; color:#b91c1c; background:#fef2f2;}

.taskTitle{margin-top: 8px; font-weight: 900; font-size: 15px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.taskUrl{margin-top: 4px; font-size: 12px; font-weight: 800; color:#64748b; display:flex; gap: 8px; align-items:center; min-width:0;}
.taskUrl span{white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}

.taskRight{display:flex; flex-direction:column; align-items:flex-end; gap: 10px;}
.money{font-size: 14px; font-weight: 900; display:inline-flex; gap: 8px; align-items:flex-start;}
.moneyText{display:flex; flex-direction:column; line-height:1.1;}
.moneyValue{font-size: 14px; font-weight: 900;}
.moneyCurrency{font-size: 11px; font-weight: 800; color:#64748b; margin-top: 2px;}
.verifyBadge{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#475569;
}
.verifyBadge i{font-size: 12px;}
.verifyBadge--human{background:#ecfeff; color:#0e7490; border-color:#cffafe;}
.verifyBadge--bot{background:#eef2ff; color:#4338ca; border-color:#e0e7ff;}

.taskBottom{margin-top: 12px; padding-top: 12px; border-top: 1px dashed #e2e8f0; display:flex; align-items:center; justify-content: space-between; gap: 10px; flex-wrap: wrap;}
.miniTag{padding: 6px 8px; border-radius: 999px; font-size: 11px; font-weight: 900; display:inline-flex; align-items:center; gap: 6px; border:1px solid #e2e8f0; background:#f8fafc; color:#475569;}
  .miniTag--ok{border-color:#bbf7d0; background:#ecfdf5; color:#047857;}
  .miniTag--bad{border-color:#fecaca; background:#fef2f2; color:#dc2626;}
  .miniTag--wait{border-color:#e2e8f0; background:#f8fafc; color:#475569;}
  .miniTag--rework{border-color:#bfdbfe; background:#eff6ff; color:#1d4ed8;}
  .slotBadge{
    font-size: 11px;
    font-weight: 900;
    border-radius: 999px;
    padding: 4px 8px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#0f172a;
  }
  .slotBadge--full{
    background:#fef2f2;
    border-color:#fecaca;
    color:#b91c1c;
  }
  .slotTimer{
    display:inline-flex;
    align-items:center;
    gap: 6px;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
    border-radius: 999px;
    border:1px solid #e2e8f0;
    background:#f8fafc;
    color:#0f172a;
    white-space: nowrap;
  }
  .slotCountdown{font-variant-numeric: tabular-nums;}

/* Task pager */
.taskPager{display:flex; flex-direction:column; align-items:center; gap: 6px; padding: 10px 0 4px;}
.taskPager__meta{font-size: 12px; font-weight: 800; color:#64748b;}
.taskPager__actions{display:flex; gap: 10px; flex-wrap: wrap; justify-content:center;}

/* Modal */
.modalBackdrop{
  position: fixed;
  inset:0;
  background: rgba(15,23,42,.35);
  opacity:0;
  pointer-events:none;
  transition: .15s ease;
  z-index: 60;
}
.modalBackdrop.isOpen{opacity:1; pointer-events:auto;}

.modal{
  position: fixed;
  left: 50%;
  top: 52%;
  transform: translate(-50%,-50%) scale(.98);
  width: min(720px, calc(100vw - 24px));
  max-height: min(82vh, 820px);
  background:#fff;
  border-radius: 18px;
  border:1px solid #e2e8f0;
  box-shadow: 0 25px 80px rgba(15,23,42,.25);
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  transition:.15s ease;
  z-index: 70;
}
.modal.isOpen{opacity:1; pointer-events:auto; transform: translate(-50%,-50%) scale(1);}
.modalHeader{display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid #e2e8f0;}
.modalTitle{font-size: 14px; font-weight: 900;}
.modalSub{font-size: 12px; font-weight: 800; color:#64748b; margin-top: 2px;}
.modalBody{padding: 14px; overflow:auto; max-height: calc(82vh - 60px);}

/* Drawer */
.drawer{
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: min(420px, 92vw);
  background:#fff;
  border-left: 1px solid #e2e8f0;
  box-shadow: -20px 0 70px rgba(15,23,42,.18);
  transform: translateX(104%);
  transition: .18s ease;
  z-index: 80;
  display:flex;
  flex-direction: column;
}
.drawer.isOpen{transform: translateX(0)}
.drawerHeader{display:flex; align-items:center; justify-content: space-between; gap: 10px; padding: 14px; border-bottom: 1px solid #e2e8f0;}
.drawerBody{padding: 14px; overflow:auto; display:flex; flex-direction: column; gap: 10px;}
.drawerActions{display:flex; gap: 10px; align-items:center; justify-content: space-between;}
.drawerActions .primaryBtn{width:auto;}

.chips{display:flex; flex-wrap: wrap; gap: 8px; margin-top: 10px;}
.chip{
  border-radius: 999px;
  border: 1px solid #e2e8f0;
  background:#fff;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 900;
  color:#475569;
  display:inline-flex;
  align-items:center;
  gap: 8px;
}
.chip.isActive{background:#fff; color:#0f172a; border-color:#0f172a;}
.sortIcon{font-size: 14px;}
.sortIcon--new{color:#0ea5e9;}
.sortIcon--budget{color:#f59e0b;}
.sortIcon--auto{color:#16a34a;}
.sortIcon--manual{color:#2563eb;}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: calc(92px + var(--safe-bottom));
  transform: translateX(-50%);
  background:#0f172a;
  color:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 20px 60px rgba(15,23,42,.25);
  opacity:0;
  pointer-events:none;
  transition: .15s ease;
  z-index: 90;
  max-width: min(520px, calc(100vw - 24px));
}
.toast.isOpen{opacity:1;}