/* GLOBAL MOBILE APP STYLES */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Inter', sans-serif;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  background-color: #0d0e12;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

/* MOBILE DEVICE CONTAINER */
.app-container {
  width: 100%;
  max-width: 430px;
  height: 100vh;
  max-height: 932px;
  background-color: #12141c;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

@media (min-width: 500px) {
  .app-container {
    height: 92vh;
    border-radius: 36px;
    border: 8px solid #232634;
  }
}

/* HEADER BAR */
.app-header {
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #181b26;
  border-bottom: 1px solid #262a3b;
  z-index: 10;
}

.app-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #38ef7d;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.coin-badge {
  background: rgba(56, 239, 125, 0.15);
  color: #38ef7d;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* MAIN CONTENT AREA */
.page-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 20px;
}

.page-content.fullscreen {
  padding: 0;
  background: #000;
}

/* BOTTOM NAVIGATION BAR */
.nav-bar {
  height: 65px;
  background: #181b26;
  border-top: 1px solid #262a3b;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #727996;
  font-size: 0.75rem;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s;
}

.nav-item i {
  font-size: 1.2rem;
}

.nav-item.active {
  color: #38ef7d;
}

/* SHARED FOOTER NAVIGATION */
.nav-bar { position: fixed; left: 248px; right: 0; bottom: 0; height: 65px; background: var(--surface, #fff); border-top: 1px solid var(--line, #e8edf4); box-shadow: 0 -5px 18px rgba(20,42,73,.06); }
.nav-item { color: var(--muted, #7c879b); }
.nav-item.active { color: var(--blue, #22b8f0); background: rgba(34,184,240,.09); }
.nav-item.active::before { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 3px; border-radius: 0 0 4px 4px; background: var(--blue, #22b8f0); }
.transaction-page .nav-bar { left: 0; }
.validation-page .nav-bar { left: 0; }

/* UI COMPONENTS & FORM CONTROLS */
.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  color: #a0a7c4;
  margin-bottom: 6px;
}

.form-control {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: #1c202e;
  border: 1px solid #2e3447;
  color: #fff;
  font-size: 0.95rem;
  outline: none;
}

.form-control:focus {
  border-color: #38ef7d;
}

.btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #11998e, #38ef7d);
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  text-align: center;
}

.btn:active {
  opacity: 0.9;
  transform: scale(0.99);
}

.btn-secondary {
  background: #262a3b;
  color: #fff;
}

.btn-danger {
  background: #ff4757;
}

.card {
  background: #1c202e;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #2e3447;
  margin-bottom: 16px;
}

/* AUTH & SPECIAL LAYOUTS */
.auth-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  padding: 30px;
}
.auth-page .page-content.fullscreen { padding:0; overflow-y:auto; }
.auth-page .auth-container { min-height:100%; padding:clamp(24px, 7vh, 64px) 20px; }
.auth-page .auth-box { animation:auth-panel-in .55s cubic-bezier(.2,.75,.25,1) both; }
.auth-page .auth-brand { animation:auth-brand-in .45s ease both; }
@keyframes auth-brand-in { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }
@keyframes auth-panel-in { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:translateY(0) scale(1); } }

.auth-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.auth-subtitle {
  color: #727996;
  font-size: 0.9rem;
  margin-bottom: 24px;
}

/* REEL PLAYER COMPONENTS */
.reel-container {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.reel-video-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(45deg, #111, #222);
}
.reel-video { width:100%; height:100%; object-fit:cover; background:#07111d; }
.reel-player-copy { position:absolute; top:50%; left:20px; right:20px; transform:translateY(-50%); text-align:center; pointer-events:none; text-shadow:0 2px 14px rgba(0,0,0,.45); }
.reel-video:not([src]) + .reel-player-copy { display:block; }
.reel-video.is-playing + .reel-player-copy { opacity:0; }

.reel-overlay {
  position: absolute;
  bottom: 20px;
  left: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.telemetry-box {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  color: #00ffcc;
  font-family: monospace;
}

.progress-bar-bg {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: #38ef7d;
  transition: width 0.2s linear;
}

/* LIST & STATUS */
.status-list {
  list-style: none;
}

.status-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid #2a2e3d;
  font-size: 0.85rem;
}

.status-item i {
  margin-right: 8px;
}

.status-pass { color: #38ef7d; }
.status-pending { color: #ffa500; }
.hidden { display: none !important; }
.text-center { text-align: center; }

/* TRANSACTION CELEBRATION */
.transaction-page { background: linear-gradient(135deg, #effcf7, #f7fbff 54%, #edf7ff); }
.transaction-page .app-container { position: relative; isolation: isolate; }
.transaction-page .page-content { position: relative; z-index: 2; }
.transaction-page .app-header, .transaction-page .nav-bar { position: relative; z-index: 4; }
.transaction-page .page-content > div:first-child { animation: transaction-rise .6s ease both; }
.transaction-page .card { animation: transaction-rise .6s .12s ease both; }
.success-orb { width:88px; height:88px; margin:20px auto 16px; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:3rem; background:linear-gradient(135deg,#16b979,#48dba3); box-shadow:0 12px 28px rgba(22,185,121,.28); animation: success-pop .6s cubic-bezier(.2,.8,.2,1) both, success-glow 2.2s 1s ease-in-out infinite; }
.transaction-cta { position:relative; z-index:3; }
.money-rain { position:fixed; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.money { position:absolute; top:-60px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:#fff; background:linear-gradient(135deg,#12a96e,#47d69f); box-shadow:0 5px 12px rgba(22,185,121,.22); font-size:1.05rem; font-weight:700; opacity:0; animation: money-fall 4.8s linear infinite; }
.money:nth-child(3n) { width:28px; height:28px; color:#896117; background:linear-gradient(135deg,#ffd76a,#f3a928); }.money:nth-child(4n) { border-radius:7px; transform:rotate(18deg); background:linear-gradient(135deg,#25aee0,#6bd6f4); }
.money-1 { left:7%; animation-delay:.2s; animation-duration:4.4s; }.money-2 { left:17%; animation-delay:2.1s; animation-duration:5.5s; }.money-3 { left:27%; animation-delay:1.2s; animation-duration:4.7s; }.money-4 { left:38%; animation-delay:3.2s; animation-duration:5.8s; }.money-5 { left:49%; animation-delay:.8s; animation-duration:4.9s; }.money-6 { left:59%; animation-delay:2.6s; animation-duration:5.4s; }.money-7 { left:69%; animation-delay:1.6s; animation-duration:4.6s; }.money-8 { left:78%; animation-delay:3.5s; animation-duration:5.7s; }.money-9 { left:88%; animation-delay:.5s; animation-duration:4.8s; }.money-10 { left:94%; animation-delay:2.9s; animation-duration:5.2s; }.money-11 { left:32%; animation-delay:4s; animation-duration:5.9s; }.money-12 { left:84%; animation-delay:4.4s; animation-duration:4.5s; }
@keyframes money-fall { 0% { opacity:0; transform:translate3d(0,-70px,0) rotate(0deg); } 12% { opacity:.9; } 88% { opacity:.9; } 100% { opacity:0; transform:translate3d(35px,105vh,0) rotate(360deg); } }
@keyframes success-pop { 0% { opacity:0; transform:scale(.55); } 100% { opacity:1; transform:scale(1); } }
@keyframes success-glow { 0%,100% { box-shadow:0 12px 28px rgba(22,185,121,.28); } 50% { box-shadow:0 12px 36px rgba(22,185,121,.48); } }
@keyframes transaction-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .money, .success-orb, .transaction-page .page-content > div:first-child, .transaction-page .card { animation:none; opacity:1; transform:none; } }

/* REWARD VALIDATION */
.validation-page { background: linear-gradient(135deg, #eef8fc 0%, #f7f9fc 48%, #eef4ff 100%); color: var(--ink); overflow-y: auto; }
.validation-shell { min-height: 100vh; display: flex; flex-direction: column; }
.validation-page .side-nav { display:block; }
.validation-page .validation-header { position:fixed; top:0; left:248px; right:0; margin-left:0; z-index:20; }
.validation-page .validation-main { margin-left:248px; width:calc(100% - 288px); max-width:920px; padding-top:136px; }
.validation-footer { display:none; }
.validation-header { height: 78px; flex: 0 0 78px; display:flex; align-items:center; justify-content:space-between; padding:0 max(24px, calc((100vw - 1060px) / 2)); background:rgba(255,255,255,.88); border-bottom:1px solid rgba(219,229,239,.9); }
.validation-brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:700; font-size:1.12rem; }.validation-brand i { color:var(--blue); font-size:1.5rem; }
.secure-label { color:var(--muted); font-size:.74rem; }.secure-label i { color:var(--green); margin-right:5px; }
.validation-main { width:min(100% - 40px, 920px); margin:0 auto; padding:58px 0 42px; }
.validation-intro { display:flex; align-items:center; gap:18px; }.validation-icon { width:60px; height:60px; flex:0 0 60px; display:grid; place-items:center; border-radius:18px; color:#fff; font-size:1.55rem; background:linear-gradient(135deg,#1bb9dd,#477de9); box-shadow:0 10px 22px rgba(34,184,240,.25); }.validation-intro h1 { font-size:1.85rem; margin-bottom:7px; }.validation-intro p { color:var(--muted); font-size:.86rem; }
.validation-progress { height:8px; margin-top:36px; background:#dceaf1; border-radius:8px; overflow:hidden; }.validation-progress span { display:block; width:100%; height:100%; background:linear-gradient(90deg,var(--blue),var(--green)); border-radius:inherit; }.validation-progress-label { display:flex; justify-content:space-between; margin-top:9px; color:var(--muted); font-size:.72rem; }.validation-progress-label strong { color:var(--green); }
.validation-layout { display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-top:25px; }.validation-card { background:rgba(255,255,255,.94); border:1px solid var(--line); border-radius:13px; padding:23px; box-shadow:0 12px 30px rgba(25,62,96,.06); }.validation-card-title { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }.validation-card-title > div { display:flex; align-items:center; gap:10px; }.validation-card-title h2 { font-size:1rem; }.step-number { width:25px; height:25px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--green); font-size:.72rem; font-weight:700; }.blue-step { background:var(--blue); }
.validation-checks { list-style:none; }.validation-checks li { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); font-size:.8rem; }.validation-checks li:last-child { border-bottom:0; padding-bottom:0; }.check-name { color:#536177; }.check-name i { width:22px; color:var(--blue); }.check-result { color:var(--green); text-transform:capitalize; font-size:.74rem; font-weight:600; }.check-result i { margin-right:5px; }
.session-detail { display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); color:var(--muted); font-size:.8rem; }.session-detail:last-child { border-bottom:0; padding-bottom:0; }.session-detail strong { color:var(--ink); }
.reward-preview { display:flex; align-items:center; gap:14px; margin-top:18px; padding:17px 20px; border:1px solid #c9eee0; border-radius:13px; background:linear-gradient(100deg,#edfcf6,#f7fffb); }.reward-coin { width:43px; height:43px; display:grid; place-items:center; border-radius:12px; background:#c8f2df; color:#0b9c68; font-size:1.15rem; }.reward-preview span,.reward-preview strong,.reward-preview small { display:block; }.reward-preview span { color:#587468; font-size:.72rem; }.reward-preview strong { color:#0b9c68; font-size:1.35rem; margin:2px 0; }.reward-preview small { color:#779187; font-size:.68rem; }.reward-arrow { margin-left:auto; color:#7ac7a9; }
.validation-action { display:flex; align-items:center; gap:18px; margin-top:24px; }.validation-action .btn { min-width:230px; justify-content:center; }.validation-back { color:var(--muted); font-size:.78rem; text-decoration:none; }.validation-back:hover { color:var(--blue); }.validation-note { margin-top:22px; text-align:center; color:var(--muted); font-size:.7rem; }.validation-note i { color:var(--green); margin-right:5px; }.validation-footer { margin-top:auto; padding:20px; color:var(--muted); font-size:.7rem; text-align:center; }
@media (max-width:650px) { .validation-header { height:68px; flex-basis:68px; padding:0 18px; }.secure-label { font-size:0; }.secure-label i { font-size:.95rem; margin:0; }.validation-main { width:min(100% - 28px, 520px); padding:102px 0 25px; }.validation-intro { align-items:flex-start; gap:13px; }.validation-icon { width:48px; height:48px; flex-basis:48px; border-radius:14px; font-size:1.2rem; }.validation-intro h1 { font-size:1.35rem; }.validation-intro p { font-size:.78rem; line-height:1.55; }.validation-progress { margin-top:27px; }.validation-layout { grid-template-columns:1fr; gap:12px; }.validation-card { padding:18px; }.reward-preview { padding:14px; }.validation-action { flex-direction:column; align-items:stretch; gap:13px; }.validation-action .btn { width:100%; }.validation-back { text-align:center; }.validation-note { line-height:1.5; padding:0 10px; } }
@media (max-width:850px) { .validation-page .validation-header { left:0; }.validation-page .validation-main { margin-left:0; width:min(100% - 28px, 520px); padding-top:112px; }.validation-page .side-nav { transform:translateX(-100%); }.validation-page .side-nav.open { transform:translateX(0); } }

/* REELCASH DESKTOP DASHBOARD SYSTEM */
:root {
  --navy: #0f172a;
  --navy-2: #16233c;
  --blue: #22b8f0;
  --blue-soft: #eaf8ff;
  --ink: #172238;
  --muted: #7c879b;
  --line: #e8edf4;
  --surface: #ffffff;
  --canvas: #f5f8fc;
  --green: #16b979;
  --orange: #f5a623;
  --red: #ed6871;
}
* { font-family: 'Inter', sans-serif; user-select: auto; }
body { background: var(--canvas); color: var(--ink); display: block; height: 100vh; overflow: hidden; }
.app-container { max-width: none; width: 100%; height: 100vh; min-height: 0; background: var(--canvas); display: block; box-shadow: none; overflow: hidden; }
.app-header { position: fixed; left: 248px; right: 0; top: 0; height: 78px; padding: 0 42px; background: var(--surface); border-bottom: 1px solid var(--line); color: var(--ink); z-index: 20; }
.app-header h2 { color: var(--ink); font-size: 1.1rem; }
.brand-mark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark i { color: var(--blue); font-size: 1.45rem; }
.header-title { font-size: 1.05rem; font-weight: 700; }
.header-actions { gap: 18px; }
.coin-badge { background: var(--blue-soft); color: #078fc9; border-radius: 9px; padding: 9px 13px; }
.top-user { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .82rem; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #d8f3ff; color: #078fc9; font-weight: 700; }
.menu-toggle { display: block; border: 0; background: transparent; font-size: 1.2rem; color: var(--ink); cursor: pointer; }
.side-nav { position: fixed; inset: 0 auto 0 0; width: 248px; background: var(--navy); color: #fff; padding: 23px 14px; z-index: 30; }
.side-brand { height: 52px; padding: 0 12px 22px; display: flex; align-items: center; gap: 11px; border-bottom: 1px solid rgba(255,255,255,.06); font-weight: 700; font-size: 1.15rem; }
.side-brand i { color: var(--blue); font-size: 1.45rem; }
.side-nav nav { padding-top: 20px; }
.side-nav a { display: flex; align-items: center; gap: 14px; color: #9aaec9; text-decoration: none; padding: 12px 15px; margin: 3px 0; border-radius: 8px; font-size: .84rem; transition: .2s; }
.side-nav a:hover, .side-nav a.active { color: #54cfff; background: #15314d; }
.side-nav a i { width: 16px; text-align: center; font-size: .94rem; }
.page-content { position: fixed; inset: 0 0 0 248px; margin-left: 0; padding: 112px 42px 100px; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scroll-padding-top: 96px; scroll-padding-bottom: 86px; }
.page-content.fullscreen { inset: 0; margin: 0; padding: 0; min-height: 100vh; background: var(--canvas); }
.content-wrap { max-width: 1180px; margin: 0 auto; }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom: 28px; }
.page-heading h1 { font-size: 1.7rem; margin-bottom: 6px; }
.page-heading p { color: var(--muted); font-size: .86rem; }
.eyebrow { color: var(--blue); text-transform: uppercase; font-weight: 700; font-size: .7rem; letter-spacing: .08em; margin-bottom: 7px; }
.grid { display: grid; gap: 18px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 21px; margin-bottom: 18px; box-shadow: 0 6px 20px rgba(20, 42, 73, .035); }
.stat-card { display:flex; align-items:flex-start; justify-content:space-between; min-height: 112px; }
.stat-card .label { color: var(--muted); font-size: .76rem; margin-bottom: 9px; }
.stat-card h2 { font-size: 1.45rem; }
.stat-card p { color: var(--green); font-size: .74rem; margin-top: 7px; }
.stat-icon { width: 39px; height: 39px; border-radius: 9px; display:grid; place-items:center; background: var(--blue-soft); color: var(--blue); }
.stat-icon.green { background: #e9fbf4; color: var(--green); }
.stat-icon.orange { background: #fff6e8; color: var(--orange); }
.card-title { display:flex; justify-content:space-between; align-items:center; margin-bottom: 17px; }
.card-title h3 { font-size: .98rem; }
.card-title a, .link { color: #079bd7; text-decoration: none; font-size: .78rem; }
.section-kicker { display:block; color:var(--blue); font-size:.65rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; margin-bottom:5px; }
.transaction-card { padding:24px; }
.transaction-card .card-title { align-items:flex-end; margin-bottom:20px; }
.transaction-card .card-title h3 { font-size:1.08rem; }
.transaction-card .card-title a i { margin-left:4px; font-size:.68rem; }
.filter-control { display:flex; align-items:center; gap:9px; color:var(--blue); }
.filter-control .form-control { width:150px; padding:10px 12px; }
.transaction-summary { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-bottom:22px; }
.transaction-summary > div { display:flex; flex-direction:column; gap:4px; padding:13px 16px; background:#f8fbfe; }
.transaction-summary strong { color:var(--ink); font-size:1rem; }.transaction-summary span { color:var(--muted); font-size:.68rem; }.transaction-summary .summary-positive { color:var(--green); }
.type-label { display:inline-flex; align-items:center; gap:5px; font-weight:600; font-size:.72rem; }.type-label::before { content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }.type-label.reward { color:#078fc9; }.type-label.income { color:#0a9c64; }.type-label.recharge { color:#c88412; }.type-label.payout { color:#d4555f; }
.empty-state { padding:22px; text-align:center; color:var(--muted); font-size:.8rem; background:#f8fbfe; border:1px dashed var(--line); border-radius:8px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.btn { width: auto; min-height: 42px; padding: 11px 17px; border-radius: 7px; background: var(--blue); color: #fff; font-size: .84rem; box-shadow: none; }
.btn:hover { background: #079bd7; }
.btn-secondary { background: #edf1f6; color: var(--ink); }
.btn-danger { background: var(--red); }
.btn-sm { min-height: 34px; padding: 8px 12px; font-size: .74rem; }
.form-group label { color: #657189; font-size: .76rem; }
.form-control { background: #fbfcfe; border: 1px solid #dce3ed; border-radius: 7px; color: var(--ink); padding: 12px 13px; font-size: .84rem; }
.form-control:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(34,184,240,.12); }
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:.8rem; }
.data-table th { color: var(--muted); font-size: .7rem; text-align:left; font-weight:600; padding: 0 12px 12px; border-bottom:1px solid var(--line); }
.data-table td { padding: 14px 12px; border-bottom:1px solid var(--line); white-space: nowrap; }
.data-table tr:last-child td { border-bottom: 0; }
.dashboard-recent-transactions .data-table tbody tr { transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.dashboard-recent-transactions .data-table tbody tr:hover { background:#fbfdff; transform:translateX(3px); }
.dashboard-recent-transactions .data-table td:first-child { color:var(--ink); font-weight:700; }
.dashboard-recent-transactions .data-table td:nth-child(2) { color:var(--muted); font-size:.74rem; }
.dashboard-recent-transactions .data-table td:nth-child(4) { font-weight:800; }
.transaction-ledger .data-table tbody tr { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease; }
.transaction-ledger .data-table tbody tr:hover { background:#fbfdff; transform:translateX(3px); }
.transaction-ledger .data-table td:nth-child(1) { color:#71809a; font-size:.72rem; font-weight:700; }
.transaction-ledger .data-table td:nth-child(2) { color:var(--ink); font-weight:600; }
.transaction-ledger .data-table td:nth-child(5) { font-weight:800; letter-spacing:.01em; }
.transaction-ledger .data-table tbody tr[data-type="reward"] td:first-child { border-left:3px solid #22b8f0; }
.transaction-ledger .data-table tbody tr[data-type="income"] td:first-child { border-left:3px solid #16b979; }
.transaction-ledger .data-table tbody tr[data-type="recharge"] td:first-child { border-left:3px solid #f5a623; }
.transaction-ledger .data-table tbody tr[data-type="payout"] td:first-child { border-left:3px solid #ed6871; }
.transaction-ledger .data-table .type-label { padding:5px 9px; border-radius:999px; background:color-mix(in srgb, currentColor 12%, white); }
@keyframes ledger-card-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
.badge { display:inline-flex; padding:5px 9px; border-radius:20px; font-size:.68rem; font-weight:600; }
.badge.success { color:#0a9c64; background:#e9fbf4; }.badge.pending { color:#c88412; background:#fff6e8; }.badge.danger { color:#d4555f; background:#fff0f1; }
.progress-track { background:#edf1f6; height:8px; border-radius:8px; overflow:hidden; }.progress-value { height:100%; background:var(--blue); border-radius:8px; }
.quick-link { display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; font-size:.83rem; }.quick-link:last-child { border:0; }.quick-link i { color:var(--blue); width:20px; text-align:center; }
.reel-card { padding:0; overflow:hidden; }.reel-thumb { position:relative; height:148px; display:grid; place-items:center; background: linear-gradient(135deg,#122844,#199bc4); color:#fff; font-size:2.6rem; }.reel-play { position:absolute; right:14px; bottom:12px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.92); color:#087cae; font-size:.75rem; box-shadow:0 5px 14px rgba(4,32,54,.22); }.reel-card .reel-body { padding:17px; }.reel-meta { display:flex; justify-content:space-between; color:var(--muted); font-size:.73rem; margin:8px 0 16px; }
.footer { display:none; }
.admin-page { background:#f4f7fb; color:var(--ink); }
.admin-login-page { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(circle at 15% 15%, #dff5fb, transparent 34%), #f4f7fb; }
.admin-login-card { width:min(100%, 420px); box-sizing:border-box; padding:32px; border:1px solid #dce8ed; border-radius:12px; background:#fff; box-shadow:0 18px 50px rgba(23,59,79,.1); }.admin-login-brand { display:flex; align-items:center; gap:10px; margin-bottom:28px; color:#173a4f; font-size:1.05rem; font-weight:800; }.admin-login-brand > i { color:#20a8cc; font-size:1.6rem; }.admin-login-brand span { display:flex; flex-direction:column; gap:3px; }.admin-login-brand small { color:#8399a5; font-size:.52rem; letter-spacing:.12em; }.admin-login-card h1 { margin:0; color:#173a4f; font-size:1.45rem; }.admin-login-card > p { margin:9px 0 22px; color:#8397a2; font-size:.78rem; line-height:1.5; }.admin-login-note { display:block; margin-top:18px; color:#9a7d49; font-size:.65rem; line-height:1.5; }.admin-login-card .admin-cancel { display:block; margin-top:18px; }
.admin-shell { min-height:100vh; display:flex; }
.admin-sidebar { width:248px; flex:0 0 248px; background:#10283b; color:#d9e9f2; display:flex; flex-direction:column; padding:28px 16px 20px; }
.admin-brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-weight:800; font-size:1rem; padding:0 12px 32px; }
.admin-brand > i { color:#46c6ec; font-size:1.55rem; }.admin-brand span { display:flex; flex-direction:column; gap:3px; }.admin-brand small { color:#8da7b7; font-size:.52rem; letter-spacing:.12em; }
.admin-nav { display:grid; gap:6px; }.admin-nav a, .admin-sidebar-foot a { display:flex; align-items:center; gap:12px; padding:12px 13px; border-radius:8px; color:#a9c0cd; text-decoration:none; font-size:.78rem; }.admin-nav a i, .admin-sidebar-foot a i { width:18px; text-align:center; }.admin-nav a:hover, .admin-nav a.active { color:#fff; background:#1c4055; }.admin-nav a.active { box-shadow:inset 3px 0 #46c6ec; }.admin-nav b { margin-left:auto; min-width:20px; padding:3px 6px; border-radius:10px; background:#ebaa53; color:#3d2913; text-align:center; font-size:.65rem; }.admin-sidebar-foot { display:grid; gap:3px; margin-top:auto; border-top:1px solid rgba(255,255,255,.1); padding-top:16px; }.admin-sidebar-foot a { font-size:.7rem; padding:9px 13px; }
.admin-main { min-width:0; flex:1; padding:36px clamp(20px,4vw,58px) 60px; }.admin-topbar { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:28px; }.admin-topbar h1 { margin:5px 0 0; font-size:1.75rem; }.admin-kicker { color:#7892a3; font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }.admin-view-site, .admin-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:1px solid #d7e2e9; border-radius:7px; padding:10px 13px; color:#3b647a; background:#fff; text-decoration:none; font-size:.72rem; font-weight:700; }.admin-button.primary { border:0; color:#fff; background:#147d9f; cursor:pointer; }.admin-alert { display:flex; align-items:center; gap:9px; margin-bottom:18px; padding:12px 15px; border-radius:8px; font-size:.78rem; }.admin-alert.success { color:#146b4e; background:#e6f7ef; }.admin-alert.error { color:#a63f45; background:#fff0f0; }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }.admin-stat, .admin-panel { background:#fff; border:1px solid #e1eaf0; border-radius:10px; box-shadow:0 5px 18px rgba(23,59,79,.04); }.admin-stat { padding:18px; }.admin-stat span { display:flex; align-items:center; gap:8px; color:#71899a; font-size:.68rem; font-weight:700; }.admin-stat span i { color:#27a2c5; }.admin-stat strong { display:block; margin:12px 0 3px; color:#173a4f; font-size:1.55rem; }.admin-stat strong em { color:#91a5b0; font-size:.78rem; font-style:normal; font-weight:600; }.admin-stat small { color:#9aabb5; font-size:.65rem; }.admin-stat.warning { border-top:3px solid #edb15e; }.admin-stat.warning span i { color:#df9938; }.admin-stat.green { border-top:3px solid #4dbb8c; }.admin-stat.green span i { color:#36a879; }
.admin-two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }.admin-panel { padding:21px; margin-bottom:18px; }.admin-two-col .admin-panel { margin-bottom:0; }.admin-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:18px; }.admin-panel h2 { margin:5px 0 0; color:#173a4f; font-size:1rem; }.admin-mini-list { display:grid; gap:2px; }.admin-mini-list > div { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #edf2f5; }.admin-mini-list > div:last-child { border:0; }.admin-mini-list > div > span:nth-child(2) { flex:1; }.admin-mini-list strong, .admin-mini-list small { display:block; }.admin-mini-list strong { color:#31586b; font-size:.76rem; }.admin-mini-list small { margin-top:4px; color:#94a6b0; font-size:.64rem; }.admin-mini-list > div > i { color:#bac8cf; font-size:.65rem; }.admin-reel-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:8px; color:#147d9f; background:#e7f7fb; }.admin-payout-callout { display:flex; align-items:center; gap:13px; padding:16px; border-radius:8px; background:#fff8ea; color:#90652a; }.admin-payout-callout > i { font-size:1.35rem; }.admin-payout-callout strong, .admin-payout-callout small { display:block; }.admin-payout-callout strong { font-size:.78rem; }.admin-payout-callout small { margin-top:5px; color:#a9885d; font-size:.66rem; }.admin-empty { padding:25px 0; text-align:center; color:#8aa0ac; font-size:.75rem; }.admin-empty i { color:#48b888; font-size:1.5rem; }.admin-empty p { margin:8px 0 0; }
.admin-table-wrap { overflow-x:auto; }.admin-table { width:100%; border-collapse:collapse; font-size:.72rem; }.admin-table th { padding:9px 10px; border-bottom:1px solid #e4edf1; color:#91a2ad; font-size:.59rem; letter-spacing:.07em; text-align:left; text-transform:uppercase; white-space:nowrap; }.admin-table td { padding:12px 10px; border-bottom:1px solid #edf2f5; color:#557181; white-space:nowrap; }.admin-table td strong, .admin-table td small { display:block; }.admin-table td strong { color:#31586b; }.admin-table td small { margin-top:4px; color:#96a7b1; font-size:.62rem; }.admin-table tr:last-child td { border-bottom:0; }.money { color:#23865f !important; font-weight:800; }.admin-status, .admin-type { display:inline-block; padding:4px 8px; border-radius:20px; font-size:.6rem; font-weight:700; }.admin-status.live { color:#167b58; background:#e6f7ef; }.admin-status.pending { color:#a2691c; background:#fff2d7; }.admin-status.paused { color:#8c6870; background:#f8e9ec; }.admin-type { color:#34738b; background:#eaf5f8; }.admin-actions { display:flex; align-items:center; gap:8px; }.admin-actions a, .admin-actions button, .admin-icon-button { border:0; color:#5e8b9c; background:transparent; cursor:pointer; }.admin-actions button { color:#c2787d; }.admin-actions form { display:inline; }.admin-action-row { display:flex; gap:5px; }.admin-action-row button { border:0; border-radius:5px; padding:6px 8px; cursor:pointer; font-size:.62rem; font-weight:700; }.admin-action-row .approve { color:#146b4e; background:#e2f6ed; }.admin-action-row .reject { color:#a63f45; background:#fff0f0; }.admin-count { color:#8499a4; font-size:.67rem; }.admin-form { display:grid; gap:13px; }.admin-form label { display:grid; gap:6px; color:#577384; font-size:.68rem; font-weight:700; }.admin-form label small { display:inline; color:#9aabb5; font-weight:400; }.admin-form input { width:100%; box-sizing:border-box; border:1px solid #d9e5ea; border-radius:6px; padding:10px; color:#31586b; font:inherit; font-size:.76rem; outline:0; }.admin-form input:focus, .inline-form input:focus { border-color:#40afd0; box-shadow:0 0 0 3px #e6f8fc; }.admin-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; }.admin-check { display:flex !important; grid-template-columns:auto 1fr; align-items:center; gap:8px !important; min-height:38px; }.admin-check input { width:auto; }.admin-cancel { color:#718b99; font-size:.7rem; text-align:center; }.inline-form { display:flex; align-items:center; gap:5px; }.inline-form input { width:105px; border:1px solid #d9e5ea; border-radius:5px; padding:7px; font:inherit; font-size:.65rem; }.admin-icon-button { padding:7px; }.admin-reel-layout { align-items:start; }
.admin-page-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }.admin-page-card { display:flex; align-items:center; gap:13px; min-height:108px; padding:18px; border:1px solid #e1eaf0; border-radius:10px; background:#fff; box-shadow:0 5px 18px rgba(23,59,79,.04); color:#31586b; text-decoration:none; transition:.2s; }.admin-page-card:hover { transform:translateY(-3px); border-color:#a7dbe8; box-shadow:0 12px 25px rgba(23,59,79,.09); }.admin-page-card > span:nth-child(2) { flex:1; }.admin-page-card strong, .admin-page-card small { display:block; }.admin-page-card small { margin-top:5px; color:#8ba0aa; font-size:.64rem; line-height:1.4; }.admin-page-card > i { color:#a8bac3; font-size:.7rem; }.admin-page-icon { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:10px; color:#167f9f; background:#e8f7fb; }
.admin-select { border:1px solid #d9e5ea; border-radius:5px; padding:7px; color:#31586b; background:#fff; font:inherit; font-size:.65rem; }.admin-help { color:#8096a1; font-size:.72rem; line-height:1.6; }
.dataTables_wrapper { margin-top:4px; color:#6e8793; font-size:.7rem; }.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border:1px solid #d9e5ea; border-radius:5px; padding:6px 8px; color:#31586b; background:#fff; }.dataTables_wrapper .dataTables_filter input { margin-left:7px; }.dataTables_wrapper .dataTables_length select { margin:0 5px; }.dataTables_wrapper .dataTables_info { padding-top:13px; }.dataTables_wrapper .dataTables_paginate { padding-top:9px; }.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius:5px !important; padding:4px 8px !important; }.dataTables_wrapper .dataTables_paginate .paginate_button.current { color:#fff !important; border-color:#147d9f !important; background:#147d9f !important; }.dataTables_wrapper .dataTables_paginate .paginate_button:hover { color:#fff !important; border-color:#147d9f !important; background:#147d9f !important; }
.admin-level-grid { display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; align-items:end; }.admin-level-grid label { display:grid; gap:7px; color:#577384; font-size:.7rem; font-weight:700; }.admin-level-grid label small { color:#91a3ad; font-size:.6rem; font-weight:400; }.admin-percent-input { display:flex; align-items:center; border:1px solid #d9e5ea; border-radius:6px; background:#fff; overflow:hidden; }.admin-percent-input input { min-width:0; width:100%; border:0; padding:10px; color:#31586b; font:inherit; font-size:.78rem; outline:0; }.admin-percent-input b { padding-right:10px; color:#7f98a4; font-size:.75rem; }.admin-level-grid .admin-button { grid-column:1 / -1; justify-self:start; }
.admin-menu-toggle { display:none; width:38px; height:38px; margin-right:12px; border:1px solid #d7e2e9; border-radius:8px; color:#2c647a; background:#fff; cursor:pointer; }.admin-sidebar-backdrop, .admin-footer-actions { display:none; }
@media (max-width:1000px) { .admin-sidebar { width:210px; flex-basis:210px; }.admin-stat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:900px) { .admin-page-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px) { .admin-page-grid { grid-template-columns:1fr; } }
@media (max-width:700px) { .admin-shell { display:block; }.admin-sidebar { width:auto; padding:17px 14px; }.admin-brand { padding:0 5px 17px; }.admin-nav { display:flex; overflow-x:auto; gap:4px; }.admin-nav a { flex:0 0 auto; padding:9px 10px; font-size:.68rem; }.admin-nav a b { display:none; }.admin-nav a.active { box-shadow:inset 0 -3px #46c6ec; }.admin-sidebar-foot { display:flex; margin-top:12px; padding-top:10px; }.admin-main { padding:24px 14px 40px; }.admin-topbar { align-items:flex-start; flex-direction:column; margin-bottom:20px; }.admin-topbar h1 { font-size:1.4rem; }.admin-stat-grid, .admin-two-col { grid-template-columns:1fr; }.admin-two-col .admin-panel { margin-bottom:18px; }.admin-panel { padding:16px; }.admin-form-row { grid-template-columns:1fr; }.admin-reel-layout { display:flex; flex-direction:column; }.admin-reel-layout > .admin-panel { width:100%; box-sizing:border-box; } }
@media (max-width:700px) { .admin-menu-toggle { display:block; }.admin-sidebar { position:fixed; z-index:80; top:0; bottom:0; left:0; width:min(290px, 86vw); transform:translateX(-105%); transition:transform .22s ease; box-shadow:14px 0 35px rgba(11,43,61,.2); }.admin-sidebar.is-open { transform:translateX(0); }.admin-sidebar-backdrop { position:fixed; z-index:70; inset:0; background:rgba(10,30,43,.38); }.admin-sidebar-backdrop.is-visible { display:block; }.admin-topbar { flex-direction:row; align-items:center; }.admin-footer-actions { position:fixed; z-index:60; display:flex; left:0; right:0; bottom:0; height:64px; justify-content:space-around; align-items:center; background:#fff; border-top:1px solid #dfe9ee; box-shadow:0 -7px 22px rgba(23,59,79,.1); }.admin-footer-actions a { display:flex; flex-direction:column; align-items:center; gap:4px; min-width:62px; color:#78919d; text-decoration:none; font-size:.6rem; }.admin-footer-actions a i { font-size:1rem; }.admin-footer-actions a:hover, .admin-footer-actions a:focus { color:#147d9f; }.admin-main { padding-bottom:86px; }.admin-level-grid { grid-template-columns:repeat(2, 1fr); }.admin-level-grid .admin-button { grid-column:1 / -1; width:100%; } }
.auth-container { max-width: 460px; width:100%; min-height:100vh; margin:auto; padding: 45px 25px; justify-content:center; }.auth-brand { color:var(--ink); text-align:center; margin-bottom:44px; font-size:1.25rem; font-weight:700; }.auth-brand i { color:var(--blue); margin-right:8px; }.auth-box { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:30px; box-shadow:0 12px 35px rgba(20,42,73,.07); }.auth-title { color:var(--ink); font-size:1.55rem; }.auth-subtitle { color:var(--muted); }
.status-list { background:var(--surface); padding: 18px 22px; border-radius:10px; border:1px solid var(--line); }.status-item { border-color:var(--line); color:var(--ink); }.status-pass { color:var(--green); }
.watch-page { background:#07111d !important; }.watch-page .reel-container { min-height:100vh; background:radial-gradient(circle at 70% 20%,#174969,#07111d 55%); }.watch-page .reel-video-placeholder { background: transparent; color:#fff; }.watch-page .reel-overlay { max-width:600px; margin:auto; }.watch-page .telemetry-box { border-color:rgba(255,255,255,.15); color:#a9eaff; }.watch-page .reel-overlay .btn-secondary { background:rgba(255,255,255,.12); color:#fff; }
@media (max-width: 850px) { .side-nav { transform:translateX(-100%); transition:.25s; box-shadow:8px 0 30px rgba(0,0,0,.18); }.side-nav.open { transform:translateX(0); }.app-header { left:0; padding:0 20px; }.menu-toggle { display:block; }.header-title { display:none; }.page-content { inset:0; padding:100px 20px 90px; }.nav-bar { left:0; }.grid-4 { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 850px) { body { overflow-x:hidden; } .app-container, .page-content, .content-wrap { width:100%; max-width:100%; } .page-content { overflow-x:hidden; } }
@media (min-width: 851px) { .side-nav.open { width:78px; }.side-nav.open .side-brand { justify-content:center; padding-left:0; padding-right:0; font-size:0; }.side-nav.open .side-brand i { font-size:1.45rem; }.side-nav.open nav a { justify-content:center; padding-left:0; padding-right:0; font-size:0; }.side-nav.open nav a i { font-size:.94rem; }.side-nav.open ~ .app-header { left:78px; }.side-nav.open ~ .page-content { margin-left:78px; }.side-nav.open ~ .footer { left:78px; } }
@media (max-width: 560px) { .page-heading { align-items:flex-start; flex-direction:column; margin-bottom:20px; }.page-heading h1 { font-size:1.4rem; }.grid-3,.grid-2 { grid-template-columns:1fr; }.grid-4 { gap:10px; }.stat-card { padding:15px; min-height:100px; }.stat-card h2 { font-size:1.1rem; }.stat-icon { width:32px;height:32px; font-size:.8rem; }.card { padding:16px; }.data-table { min-width:610px; }.auth-box { padding:22px; } }

/* Polished responsive card treatment */
.card { position: relative; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--blue), #79d8f7); opacity: .72; }
.stat-card:nth-child(2)::before { background: linear-gradient(90deg, var(--green), #7de6bd); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg, var(--orange), #ffd27e); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg, #7c68e8, #c3baff); }
.reel-card { transition: transform .2s ease, box-shadow .2s ease; }
.reel-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(20,42,73,.11); }
.reel-feed { display:flex; flex-direction:column; gap:18px; max-width:780px; margin:0 auto; padding-bottom:36px; scroll-snap-type:y mandatory; }
.reel-feed-item { padding:0; overflow:hidden; scroll-snap-align:start; transition:opacity .3s ease, transform .3s ease, filter .3s ease; }
.reel-feed-media { position:relative; aspect-ratio:9 / 14; max-height:70vh; background:#07111d; overflow:hidden; }
.reel-feed-media video { width:100%; height:100%; display:block; object-fit:cover; }
.reel-feed-overlay { position:absolute; inset:14px 14px auto; display:flex; justify-content:space-between; align-items:flex-start; gap:10px; color:#fff; font-size:.72rem; }
.reel-counter, .reel-lock { padding:7px 10px; border-radius:999px; background:rgba(7,17,29,.72); backdrop-filter:blur(8px); }
.reel-lock { color:#dceeff; }
.reel-sound { position:absolute; right:14px; bottom:14px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--ink); cursor:pointer; }
.reel-feed-info { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:17px 19px; }
.reel-feed-info h2 { font-size:1.12rem; margin-bottom:5px; }.reel-feed-info p { color:var(--muted); font-size:.76rem; }.reel-reward { color:var(--green); white-space:nowrap; }
.reel-watch-progress { height:5px; background:#eaf0f5; }.reel-watch-progress span { display:block; width:0; height:100%; background:linear-gradient(90deg,var(--blue),var(--green)); transition:width .2s linear; }
.reel-feed-item.is-locked { display:none; opacity:.58; filter:saturate(.45); }.reel-feed-item.is-locked video { pointer-events:none; }.reel-feed-item.is-complete .reel-lock { color:#8bf0c4; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; display: flex; align-items: center; gap: 10px; max-width: min(360px, calc(100vw - 32px)); padding: 13px 16px; border-radius: 9px; color: #fff; background: #172238; box-shadow: 0 12px 30px rgba(15,23,42,.22); font-size: .82rem; animation: toast-in .25s ease; }
.toast.success { background: #0d9b68; }.toast.error { background: #d85460; }.toast i { font-size: 1rem; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 560px) {
  .toast { right: 16px; bottom: 16px; }
  .data-table, .data-table tbody { display: block; min-width: 0; }
  .data-table thead { display: none; }
  .data-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid #dfe8f2; border-radius: 10px; background: #fff; box-shadow: 0 5px 16px rgba(20,42,73,.06); }
  .data-table tbody tr:last-child { margin-bottom: 0; }
  .data-table td { display:flex; justify-content:space-between; align-items:center; min-width:0; min-height:35px; padding:7px 5px; border:0; border-bottom:1px solid #edf2f7; white-space:normal; text-align:right; font-size:.75rem; line-height:1.25; }
  .data-table td::before { flex:0 0 auto; color:#7c8ca3; font-size:.6rem; font-weight:700; letter-spacing:.02em; text-align:left; margin-right:8px; }
  .data-table td:nth-child(1)::before { content:'REFERENCE'; }.data-table td:nth-child(2)::before { content:'DESCRIPTION'; }.data-table td:nth-child(3)::before { content:'DATE'; }.data-table td:nth-child(4)::before { content:'TYPE'; }.data-table td:nth-child(5)::before { content:'AMOUNT'; }.data-table td:nth-child(6)::before { content:'STATUS'; }
  .data-table td:nth-child(1), .data-table td:nth-child(2) { background:#f5f9fd; border-bottom-color:#e4edf5; }.data-table td:nth-child(1) { border-radius:6px 0 0 6px; }.data-table td:nth-child(2) { border-radius:0 6px 6px 0; }
  .data-table td:nth-child(2) { color:var(--ink); font-weight:600; }.data-table td:nth-child(5) { color:var(--green); font-weight:700; }.data-table td:nth-child(4) .type-label { padding:4px 7px; border-radius:12px; background:currentColor; color:#fff; }.data-table td:nth-child(4) .type-label::before { background:#fff; }
  .data-table td:nth-child(6) { border-bottom:0; }.transaction-card { padding:16px; }.transaction-card .card-title { align-items:flex-start; gap:14px; }.transaction-card .card-title h3 { font-size:.96rem; }.filter-control .form-control { width:124px; padding:9px 8px; font-size:.75rem; }.transaction-summary { grid-template-columns:1fr 1fr; }.transaction-summary > div:first-child { grid-column:1 / -1; }.transaction-summary > div { padding:11px 12px; }.transaction-summary strong { font-size:.9rem; }
  .dashboard-recent-transactions .card-title { align-items:center; }
  .dashboard-recent-transactions .card-title a { white-space:nowrap; }
  .dashboard-recent-transactions .data-table tbody tr { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 10px; margin-bottom:10px; padding:12px; border:1px solid #dfe8f2; border-radius:10px; background:#fff; box-shadow:0 5px 16px rgba(20,42,73,.06); animation:dashboard-row-in .42s ease both; }
  .dashboard-recent-transactions .data-table tbody tr:nth-child(2) { animation-delay:.07s; }.dashboard-recent-transactions .data-table tbody tr:nth-child(3) { animation-delay:.14s; }
  .dashboard-recent-transactions .data-table td { min-height:34px; padding:7px 5px; border:0; border-bottom:1px solid #edf2f7; white-space:normal; }
  .dashboard-recent-transactions .data-table td::before { flex:0 0 auto; color:#7c8ca3; font-size:.6rem; font-weight:700; letter-spacing:.02em; margin-right:8px; }
  .dashboard-recent-transactions .data-table td:nth-child(1) { grid-column:1 / -1; grid-row:1; text-align:left; padding-bottom:10px; }
  .dashboard-recent-transactions .data-table td:nth-child(1)::before { content:'TRANSACTION'; }
  .dashboard-recent-transactions .data-table td:nth-child(2) { grid-column:1; grid-row:2; text-align:left; }
  .dashboard-recent-transactions .data-table td:nth-child(2)::before { content:'DATE'; }
  .dashboard-recent-transactions .data-table td:nth-child(3) { grid-column:2; grid-row:2; text-align:right; }
  .dashboard-recent-transactions .data-table td:nth-child(3)::before { content:'TYPE'; }
  .dashboard-recent-transactions .data-table td:nth-child(4) { grid-column:1; grid-row:3; text-align:left; color:var(--green); }
  .dashboard-recent-transactions .data-table td:nth-child(4)::before { content:'AMOUNT'; color:#3f9f78; }
  .dashboard-recent-transactions .data-table td:nth-child(5) { grid-column:2; grid-row:3; text-align:right; border-bottom:0; }
  .dashboard-recent-transactions .data-table td:nth-child(5)::before { content:'STATUS'; }
  .auth-page .auth-container { width:100%; min-height:100%; padding:28px 14px 36px; justify-content:flex-start; }
  .auth-page .auth-brand { margin-bottom:24px; }
  .auth-page .auth-box { width:100%; padding:22px 18px; border-radius:14px; }
  .auth-page .auth-title { font-size:1.35rem; }
  .auth-page .auth-subtitle { margin-bottom:20px; line-height:1.45; }
  .auth-page .form-group { margin-bottom:13px; }
  .auth-page .form-control { min-height:46px; }
  .auth-page .btn { min-height:46px; }
  .reel-feed { gap:12px; margin:0 -4px; }.reel-feed-media { aspect-ratio:9 / 13; max-height:none; }.reel-feed-info { align-items:flex-start; padding:14px; }.reel-feed-info h2 { font-size:1rem; }.reel-feed-info p { line-height:1.45; }.reel-reward { font-size:.8rem; }
  .transaction-ledger .data-table tbody tr { animation:ledger-card-in .42s ease both; }
  .transaction-ledger .data-table tbody tr:nth-child(2) { animation-delay:.06s; }.transaction-ledger .data-table tbody tr:nth-child(3) { animation-delay:.12s; }.transaction-ledger .data-table tbody tr:nth-child(4) { animation-delay:.18s; }
  .transaction-ledger .data-table td { min-height:34px; }
  .transaction-ledger .data-table td:nth-child(1) { grid-column:1; grid-row:1; border-left:0; border-radius:6px 0 0 6px; }
  .transaction-ledger .data-table td:nth-child(5) { grid-column:2; grid-row:1; background:#effbf6; color:var(--green); border-radius:0 6px 6px 0; }
  .transaction-ledger .data-table td:nth-child(2) { grid-column:1 / -1; grid-row:2; text-align:left; padding-top:11px; padding-bottom:11px; }
  .transaction-ledger .data-table td:nth-child(3) { grid-column:1; grid-row:3; }
  .transaction-ledger .data-table td:nth-child(4) { grid-column:2; grid-row:3; }
  .transaction-ledger .data-table td:nth-child(6) { grid-column:1 / -1; grid-row:4; justify-content:flex-start; gap:10px; padding-top:10px; }
  .transaction-ledger .data-table td:nth-child(5)::before { color:#3f9f78; }
  .transaction-ledger .data-table tbody tr[data-type="payout"] td:nth-child(5) { background:#fff1f2; color:var(--red) !important; }
  .transaction-ledger .data-table tbody tr[data-type="payout"] td:nth-child(5)::before { color:#b96b72; }
  .transaction-ledger .data-table tbody tr[data-type="reward"] { border-left:3px solid #22b8f0; }
  .transaction-ledger .data-table tbody tr[data-type="income"] { border-left:3px solid #16b979; }
  .transaction-ledger .data-table tbody tr[data-type="recharge"] { border-left:3px solid #f5a623; }
  .transaction-ledger .data-table tbody tr[data-type="payout"] { border-left:3px solid #ed6871; }
  .page-content { inset:0; padding-bottom:90px; min-height:0; overflow-y:auto; }
  .nav-bar { position:fixed; left:0; right:0; bottom:0; height:65px; z-index:25; }
}
@keyframes dashboard-row-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) { .auth-page .auth-box, .auth-page .auth-brand, .dashboard-recent-transactions .data-table tbody tr { animation:none; } }
@media (prefers-reduced-motion: reduce) { .transaction-ledger .data-table tbody tr, .transaction-ledger .data-table tbody tr:hover { animation:none; transform:none; } }