/* ═══ ProCash Design System v3 — modern SaaS (lime + violet brand kept) ═══ */
/* Fonts are loaded via <link> in the header with preconnect — faster than @import */
:root{
  /* ── surfaces (light default; html.dark overrides below) ── */
  --t-bg:#F4F6FB; --t-card:#FFFFFF; --t-soft:#F7F9FC;
  --t-head:#0B1220; --t-text:#4A5568; --t-mut:#8A94A6; --t-line:#E7EBF2;
  --t-line2:#DDE3EC;
  --ink:#0B1020; --ink2:#141B33; --panel:#161d38;
  --lime:#C6F24E; --lime2:#B4E82F; --lime-d:#8FB81E;
  --violet:#6D5DF6; --violet2:#8B7FF8; --violet-d:#5646E0;
  --cloud:#F5F7FB; --mut:#8A93AB; --line:rgba(255,255,255,.08);
  --grn:#15A34A; --grn-soft:#E7F7EE; --red:#E23D3D; --red-soft:#FDECEC;
  --amber:#E68A00; --amber-soft:#FDF3E2; --blue:#2F6FED; --blue-soft:#EAF1FE;
  /* elevation scale — soft, layered SaaS shadows */
  --sh-xs:0 1px 2px rgba(11,18,32,.04);
  --sh-sm:0 1px 3px rgba(11,18,32,.05),0 1px 2px rgba(11,18,32,.03);
  --sh:0 2px 6px rgba(11,18,32,.05),0 8px 24px rgba(11,18,32,.05);
  --sh-lg:0 4px 12px rgba(11,18,32,.07),0 20px 48px rgba(11,18,32,.09);
  --sh-violet:0 6px 18px rgba(109,93,246,.28);
  /* radius scale */
  --r-sm:9px; --r:13px; --r-lg:18px; --r-xl:24px;
  /* these follow the light/dark theme */
  --card:var(--t-card); --bd:var(--t-line); --ink-soft:var(--t-text);
}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;color:var(--t-text);background:var(--t-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.005em}
h1,h2,h3,h4,.disp{font-family:'Sora',sans-serif;letter-spacing:-.02em}
/* buttons */
.btn{font-family:'Inter';font-weight:600;border:1px solid transparent;cursor:pointer;border-radius:var(--r-sm);transition:transform .14s cubic-bezier(.2,.8,.2,1),box-shadow .14s,background .14s,border-color .14s;display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-size:14px;padding:10px 18px;line-height:1.2}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.99)}
.btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.btn-primary{background:var(--violet);color:#fff;box-shadow:var(--sh-violet)}
.btn-primary:hover{background:var(--violet-d);box-shadow:0 10px 26px rgba(109,93,246,.4)}
.btn-lime{background:var(--lime);color:var(--ink);font-weight:700}
.btn-lime:hover{background:var(--lime2)}
.btn-success{background:var(--grn);color:#fff}
.btn-success:hover{filter:brightness(1.06)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{filter:brightness(1.06)}
.btn-gray{background:var(--t-card);color:var(--t-text);border-color:var(--t-line2)}
.btn-gray:hover{background:var(--t-soft);border-color:var(--t-mut)}
.btn-sm{padding:7px 13px;font-size:12.5px;border-radius:8px}
.btn-lg{padding:13px 24px;font-size:15px;border-radius:var(--r)}
/* forms */
.form-group{margin-bottom:16px}
.form-label{display:block;font-size:12.5px;font-weight:600;color:var(--t-head);margin-bottom:7px;letter-spacing:0}
.form-control{width:100%;padding:11px 14px;border:1px solid var(--t-line2);border-radius:var(--r-sm);font-size:14px;font-family:inherit;color:var(--t-head);transition:border-color .15s,box-shadow .15s;background:var(--t-card)}
.form-control:hover{border-color:var(--t-mut)}
.form-control:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 3px rgba(109,93,246,.13)}
.form-control::placeholder{color:var(--t-mut)}
/* cards */
.card{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--sh-sm)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:15.5px;font-weight:700;color:var(--t-head);font-family:'Sora'}
/* badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 11px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.01em}
.badge-success{background:var(--grn-soft);color:#0F7A38}.badge-warning{background:var(--amber-soft);color:#B4690A}
.badge-danger{background:var(--red-soft);color:#C42B2B}.badge-info{background:var(--blue-soft);color:#1E5AD1}
.badge-gray{background:var(--t-soft);color:var(--t-text);border:1px solid var(--t-line)}
/* flash */
.flash{padding:13px 16px;border-radius:var(--r);font-size:13.5px;font-weight:500;margin-bottom:16px;display:flex;align-items:center;gap:9px;border:1px solid transparent}
.flash-success{background:var(--grn-soft);color:#0F7A38;border-color:#C4EAD3}
.flash-danger{background:var(--red-soft);color:#C42B2B;border-color:#F6D2D2}
.flash-info{background:var(--blue-soft);color:#1E5AD1;border-color:#D2E1FB}
.flash-warning{background:var(--amber-soft);color:#B4690A;border-color:#F6E2C0}
/* 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:600;text-transform:uppercase;letter-spacing:.06em;color:var(--t-mut);padding:12px 14px;border-bottom:1px solid var(--t-line)}
td{padding:13px 14px;border-bottom:1px solid var(--t-line);font-size:13.5px;color:var(--t-text)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--t-soft)}
.page-title{font-size:23px;font-weight:700;color:var(--t-head);font-family:'Sora'}
.page-sub{font-size:13.5px;color:var(--t-mut);margin-top:3px}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:22px}
.stat-card{background:var(--t-card);border:1px solid var(--t-line);border-radius:var(--r-lg);padding:18px;display:flex;align-items:center;gap:14px;box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.stat-icon{width:46px;height:46px;border-radius:var(--r);display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.stat-label{font-size:11.5px;color:var(--t-mut);font-weight:500}
.stat-value{font-size:22px;font-weight:700;color:var(--t-head);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→v3: DARK MODE (user area) — refined SaaS surfaces ═══ */
html.dark{--t-bg:#0B111C;--t-card:#131C2E;--t-soft:#182437;--t-head:#EAF0F9;--t-text:#B4C0D4;--t-mut:#7C879E;--t-line:#233149;--t-line2:#2C3B57}
html.dark body{background:var(--t-bg);color:var(--t-text)}
html.dark .card{background:var(--t-card);border-color:var(--t-line);color:var(--t-text);box-shadow:none}
html.dark .card-title,html.dark .page-title,html.dark h1,html.dark h2,html.dark h3{color:var(--t-head)}
html.dark .page-sub{color:var(--t-mut)}
html.dark table th{color:var(--t-mut);border-color:var(--t-line)}
html.dark table td{border-color:var(--t-line);color:var(--t-text)}
html.dark tr:hover td{background:var(--t-soft)}
html.dark .form-control,html.dark input,html.dark select,html.dark textarea{background:var(--t-soft);border-color:var(--t-line2);color:var(--t-head)}
html.dark .form-control::placeholder{color:var(--t-mut)}
html.dark .form-label{color:var(--t-text)}
html.dark .btn-gray{background:var(--t-soft);color:var(--t-text);border-color:var(--t-line2)}
html.dark .btn-gray:hover{background:var(--t-line)}
html.dark .stat-card,html.dark .task-card{background:var(--t-card);border-color:var(--t-line)}
html.dark a:not([class]){color:#93b0f5}
html.dark .btn-lime,html.dark a.breg,html.dark a.cta-p{color:#0B1020}
html.dark .btn-primary,html.dark .btn-success,html.dark .btn-danger{color:#fff}
html.dark .flash{border-color:var(--t-line2)}
html.dark .badge-gray{background:var(--t-soft);border-color:var(--t-line2);color:var(--t-text)}

/* loading skeleton — modern SaaS shimmer */
.skeleton{background:linear-gradient(90deg,var(--t-soft) 25%,var(--t-line) 37%,var(--t-soft) 63%);background-size:400% 100%;animation:pc-shimmer 1.3s ease-in-out infinite;border-radius:8px}
@keyframes pc-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.is-loading{position:relative;pointer-events:none;opacity:.65}
.spinner{width:18px;height:18px;border:2px solid var(--t-line);border-top-color:var(--violet);border-radius:50%;display:inline-block;animation:pc-spin .7s linear infinite}
@keyframes pc-spin{to{transform:rotate(360deg)}}

/* ═══ 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:var(--t-mut)}
td, th{font-size:13px}
::placeholder{color:var(--t-mut);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}
}

/* ═══ v37: user-area mobile navigation ═══ */
@media(max-width:820px){
  /* the horizontal top-nav links overflow on phones — hide, keep the sidebar drawer */
  .topbar-nav{display:none}
  /* task cards & grids: single column, comfortable spacing */
  .task-grid,.tgrid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr !important;gap:12px !important}
  .stats-split,.split-2{grid-template-columns:1fr !important}
  .stat-row{flex-wrap:wrap;gap:8px}
  /* the top stat pills row on the tasks page */
  .task-stats{flex-wrap:wrap;gap:8px}
  .task-stats > *{flex:1;min-width:90px}
  /* category filter tabs scroll sideways instead of wrapping messily */
  .cat-tabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .cat-tab{white-space:nowrap;flex-shrink:0}
}
@media(max-width:560px){
  .pub-main,.app-main,main{padding-left:14px !important;padding-right:14px !important}
  .card{padding:14px}
  .page-title{font-size:20px}
  h1{font-size:23px}
  h2{font-size:19px}
  /* buttons full-width so they're easy to tap */
  .btn-primary.btn-lg,.btn-block{width:100%}
}


/* v37: dashboard inline grids stack on mobile */
@media(max-width:760px){ .dash-grid{grid-template-columns:1fr !important} }

/* ═══ v4: SaaS polish layer — glass nav, gradient accents, motion ═══ */
html{scroll-behavior:smooth}
::selection{background:rgba(109,93,246,.22)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#C3CCDA;border-radius:8px;border:2px solid var(--t-bg)}
::-webkit-scrollbar-thumb:hover{background:#A9B4C7}
html.dark ::-webkit-scrollbar-thumb{background:#2C3B57;border-color:#0B111C}
/* glassy sticky topbar (user area) */
.topbar{backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px)}
/* gradient accent for hero/emphasis text */
.hero h1 em,.grad-text{background:linear-gradient(92deg,var(--lime) 10%,#8FE64E 55%,var(--violet2) 120%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* card + interactive hover lifts, sitewide */
.card{transition:box-shadow .18s,transform .18s,border-color .18s}
.card:hover{box-shadow:var(--sh)}
a{transition:color .14s}
/* pill-style inputs feel */
.topbar-search input,.form-control{border-radius:11px}
/* section rhythm on public pages */
section{scroll-margin-top:80px}
/* subtle fade-up on load for main content areas */
@media(prefers-reduced-motion:no-preference){
  .app-main>.card,.stats-grid .stat-card,main>.card{animation:pc-rise .45s cubic-bezier(.2,.8,.2,1) both}
  @keyframes pc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  .stats-grid .stat-card:nth-child(2){animation-delay:.05s}
  .stats-grid .stat-card:nth-child(3){animation-delay:.1s}
  .stats-grid .stat-card:nth-child(4){animation-delay:.15s}
}
/* focus visibility everywhere */
a:focus-visible,button:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px}