/* ═══ ProCash Design System v2 — lime + violet on navy ═══ */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{
  --ink:#0B1020; --ink2:#141B33; --panel:#161d38;
  --lime:#C6F24E; --lime2:#a3e635; --violet:#6D5DF6; --violet2:#8b7ff8;
  --cloud:#F5F7FB; --mut:#8A93AB; --line:rgba(255,255,255,.08);
  --card:#fff; --bd:#e8ecf3; --ink-soft:#1a2036; --grn:#16a34a; --red:#dc2626;
}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink-soft)}
h1,h2,h3,h4,.disp{font-family:'Sora',sans-serif}
/* buttons */
.btn{font-family:'Inter';font-weight:700;border:none;cursor:pointer;border-radius:10px;transition:.16s;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-size:14px;padding:10px 18px}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 4px 14px rgba(109,93,246,.3)}
.btn-primary:hover{box-shadow:0 8px 22px rgba(109,93,246,.42)}
.btn-lime{background:var(--lime);color:var(--ink)}
.btn-success{background:var(--grn);color:#fff}
.btn-danger{background:var(--red);color:#fff}
.btn-gray{background:#eef1f6;color:#475569}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:8px}
.btn-lg{padding:14px 26px;font-size:15px;border-radius:12px}
/* forms */
.form-group{margin-bottom:15px}
.form-label{display:block;font-size:12.5px;font-weight:600;color:#334155;margin-bottom:6px}
.form-control{width:100%;padding:11px 14px;border:1.5px solid var(--bd);border-radius:10px;font-size:14px;font-family:inherit;color:#0f172a;transition:.15s;background:#fff}
.form-control:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,93,246,.12)}
.form-control::placeholder{color:#9aa3b5}
/* cards */
.card{background:#fff;border:1px solid var(--bd);border-radius:16px;padding:22px;box-shadow:0 1px 3px rgba(15,23,42,.05)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:15px;font-weight:800;color:#0f172a;font-family:'Sora'}
/* badges */
.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:700}
.badge-success{background:#dcfce7;color:#15803d}.badge-warning{background:#fef3c7;color:#b45309}
.badge-danger{background:#fee2e2;color:#b91c1c}.badge-info{background:#dbeafe;color:#1d4ed8}
.badge-gray{background:#f1f5f9;color:#475569}
/* flash */
.flash{padding:12px 16px;border-radius:11px;font-size:13.5px;font-weight:600;margin-bottom:16px}
.flash-success{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}
.flash-danger{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}
.flash-info{background:#dbeafe;color:#1d4ed8;border:1px solid #bfdbfe}
.flash-warning{background:#fef3c7;color:#b45309;border:1px solid #fde68a}
/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
th{text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#64748b;padding:11px 12px;border-bottom:2px solid #f1f5f9}
td{padding:12px;border-bottom:1px solid #f4f6fa;font-size:13.5px;color:#1e293b}
tr:hover td{background:#fafbfd}
.page-title{font-size:22px;font-weight:800;color:#0f172a;font-family:'Sora'}
.page-sub{font-size:13.5px;color:#64748b;margin-top:2px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px}
.stat-card{background:#fff;border:1px solid var(--bd);border-radius:15px;padding:18px;display:flex;align-items:center;gap:14px}
.stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.stat-label{font-size:11.5px;color:#64748b;font-weight:500}
.stat-value{font-size:21px;font-weight:800;color:#0f172a;font-family:'Sora'}

/* ═══ v5: search bar + mobile polish ═══ */
@media(max-width:820px){
  .topbar-search{display:none}
  .balance-pill{font-size:11px;padding:5px 9px}
}
@media(max-width:640px){
  .page-header{flex-direction:column;align-items:flex-start}
  .card{padding:14px}
  img,video,iframe{max-width:100%}
  .uf-grid{gap:18px}
}


/* ═══ v12: DARK MODE (user area) ═══ */
html.dark body{background:#0f1524;color:#c5cdde}
html.dark .card{background:#161d31;border-color:#242d47;color:#cbd5e1;box-shadow:none}
html.dark .card-title,html.dark .page-title,html.dark h1,html.dark h2,html.dark h3{color:#eef1f8}
html.dark .page-sub{color:#7c87a3}
html.dark table th{background:#1a2138;color:#8b96b5;border-color:#242d47}
html.dark table td{border-color:#242d47;color:#c5cdde}
html.dark tr:hover td{background:#1a2138}
html.dark .form-control,html.dark input,html.dark select,html.dark textarea{background:#0f1524;border-color:#2a3350;color:#e2e8f0}
html.dark .form-label{color:#8b96b5}
html.dark .btn-gray{background:#242d47;color:#c5cdde;border-color:#2f3a5c}
html.dark .stat-card,html.dark .task-card{background:#161d31;border-color:#242d47}
html.dark a{color:#93b0f5}
html.dark .flash{border-color:#2a3350}

/* ═══ v12: MOBILE POLISH ═══ */
@media(max-width:820px){
  .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .card table{min-width:520px}
  .btn{min-height:36px}
  input,select,textarea{font-size:16px !important} /* prevents iOS zoom-on-focus */
}
@media(max-width:640px){
  .page-title{font-size:19px}
  body{font-size:14px}
}

/* ═══ v12: VISIBILITY / CONTRAST ═══ */
.page-sub{color:#64748b}
td, th{font-size:13px}
::placeholder{color:#94a3b8;opacity:1}


/* ═══ v16: MOBILE TOPBAR — compact & fits every phone ═══ */
@media(max-width:640px){
  .topbar{padding:0 8px;gap:4px}
  .topbar .hamburger{font-size:20px;padding:4px 6px}
  .topbar-brand{gap:6px}
  .topbar-brand img, .topbar-brand > div:first-child{width:26px !important;height:26px !important}
  .brand-text{font-size:14px;white-space:nowrap}
  .topbar-right{gap:5px}
  .topbar-right a[href*="notifications"]{font-size:15px}
  #pc-theme-btn{padding:4px 6px;font-size:11px;border-radius:7px}
  .balance-pill{font-size:10px;padding:4px 6px;white-space:nowrap}
  .topbar-right a[href*="logout"]{display:none} /* logout stays in the sidebar menu */
  .announcement-bar{font-size:11px;padding:6px 10px;line-height:1.45;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
@media(max-width:400px){
  .brand-text span{display:none} /* hide "Earn" on very small phones */
  .balance-pill{font-size:9.5px}
}
/* tables inside scrollable cards: no ugly mid-word wrapping */
@media(max-width:820px){
  .card td, .card th{white-space:nowrap}
}