/* =========================================================================
   TASKFLOW PRO — DESIGN SYSTEM
   A fictional enterprise SaaS product for task, wallet & workflow management.
   Font: Inter (display + body + data), Bootstrap Icons for iconography.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,500&display=swap');

:root{
  /* ---------- Brand palette ---------- */
  --primary:        #2563EB;
  --primary-600:    #1D4ED8;
  --primary-700:    #1E40AF;
  --primary-50:     #EFF6FF;
  --primary-100:    #DBEAFE;

  --secondary:      #0F172A;
  --secondary-700:  #1E293B;
  --secondary-500:  #334155;

  --accent:         #10B981;
  --accent-600:     #059669;
  --accent-50:      #ECFDF5;

  --success:        #16A34A;
  --success-50:     #F0FDF4;
  --warning:         #F59E0B;
  --warning-50:      #FFFBEB;
  --danger:          #EF4444;
  --danger-50:       #FEF2F2;
  --info:            #0EA5E9;
  --info-50:         #F0F9FF;

  --bg:             #F8FAFC;
  --bg-shell:       #F1F5F9;
  --card:           #FFFFFF;
  --border:         #E2E8F0;
  --border-strong:  #CBD5E1;

  --text-1:         #0F172A;   /* headings */
  --text-2:         #334155;   /* body */
  --text-3:         #64748B;   /* secondary */
  --text-4:         #94A3B8;   /* muted / placeholder */
  --text-inverse:   #F8FAFC;

  /* ---------- Gradients ---------- */
  --gradient-primary: linear-gradient(135deg, #2563EB 0%, #1E3A8A 100%);
  --gradient-flow:    linear-gradient(90deg, #2563EB 0%, #3B82F6 45%, #10B981 100%);
  --gradient-accent:  linear-gradient(135deg, #10B981 0%, #059669 100%);
  --gradient-mesh:    radial-gradient(60% 60% at 15% 10%, rgba(37,99,235,.14) 0%, rgba(37,99,235,0) 60%),
                       radial-gradient(50% 50% at 90% 20%, rgba(16,185,129,.12) 0%, rgba(16,185,129,0) 60%);

  /* ---------- Spacing (8px grid) ---------- */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --sp-7: 64px;

  /* ---------- Radius ---------- */
  --r-card: 20px;
  --r-btn: 14px;
  --r-input: 14px;
  --r-modal: 24px;
  --r-pill: 999px;
  --r-sm: 10px;

  /* ---------- Shadows (soft & blurred) ---------- */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.04);
  --shadow-sm: 0 2px 8px rgba(15,23,42,.06);
  --shadow-md: 0 8px 24px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.12);
  --shadow-primary: 0 12px 28px rgba(37,99,235,.24);
  --shadow-accent: 0 12px 28px rgba(16,185,129,.22);

  /* ---------- Layout ---------- */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 84px;
  --topbar-h: 76px;
  --bottomnav-h: 72px;

  --ease: cubic-bezier(.4,0,.2,1);
}

/* =========================================================================
   RESET & BASE
   ========================================================================= */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,h2,h3,h4,h5,h6{
  color: var(--text-1);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

a{ text-decoration: none; color: var(--primary); }
img{ max-width: 100%; display:block; }

::selection{ background: var(--primary-100); color: var(--primary-700); }

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-thumb{ background: var(--border-strong); border-radius: var(--r-pill); }
::-webkit-scrollbar-track{ background: transparent; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline: 2.5px solid var(--primary);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   TYPE SCALE
   ========================================================================= */
.eyebrow{
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before{
  content: '';
  width: 18px; height: 2px;
  background: var(--gradient-flow);
  border-radius: 2px;
}
.display-1, .display-2, .display-3{ font-weight: 800; letter-spacing: -0.03em; }
.text-muted-2{ color: var(--text-3) !important; }
.text-muted-3{ color: var(--text-4) !important; }
.fw-600{ font-weight: 600; }
.tabular{ font-variant-numeric: tabular-nums; }

/* =========================================================================
   BUTTONS
   ========================================================================= */
.btn{
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 14.5px;
  padding: 11px 22px;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
  background: var(--gradient-primary);
  border-color: var(--primary-700);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover{ color:#fff; box-shadow: 0 16px 32px rgba(37,99,235,.32); transform: translateY(-1px); }
.btn-primary:focus{ color:#fff; }

.btn-accent{
  background: var(--gradient-accent);
  border-color: var(--accent-600);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-accent:hover{ color:#fff; transform: translateY(-1px); box-shadow: 0 16px 32px rgba(16,185,129,.3); }

.btn-secondary{
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
}
.btn-secondary:hover{ background: var(--secondary-700); color:#fff; transform: translateY(-1px); }

.btn-outline-brand{
  background: #fff;
  border-color: var(--border-strong);
  color: var(--text-1);
}
.btn-outline-brand:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-50); }

.btn-ghost{
  background: transparent;
  border-color: transparent;
  color: var(--text-2);
}
.btn-ghost:hover{ background: var(--bg-shell); color: var(--text-1); }

.btn-danger-soft{
  background: var(--danger-50);
  border-color: var(--danger-50);
  color: var(--danger);
}
.btn-danger-soft:hover{ background: #FEE2E2; color: var(--danger); }

.btn-lg{ padding: 14px 30px; font-size: 15.5px; }
.btn-sm{ padding: 8px 16px; font-size: 13.5px; border-radius: 11px; }
.btn-icon{ width: 42px; height: 42px; padding: 0; border-radius: var(--r-btn); }

.btn[disabled], .btn.disabled{ opacity: .55; pointer-events: none; box-shadow: none; }

.btn-loading{ position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after{
  content:'';
  position: absolute;
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,.5);
  border-top-color: #fff;
  animation: spin .7s linear infinite;
}
.btn-outline-brand.btn-loading::after{ border-color: rgba(37,99,235,.25); border-top-color: var(--primary); }
@keyframes spin{ to{ transform: rotate(360deg); } }

/* =========================================================================
   CARDS
   ========================================================================= */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}
.card-body{ padding: var(--sp-3); }
.card-hover:hover{
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--border-strong);
}
.card-flat{ box-shadow: none; }

.stat-card{
  padding: var(--sp-3);
  border-radius: var(--r-card);
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.stat-card .stat-icon{
  width: 46px; height: 46px;
  border-radius: 13px;
  display: flex; align-items:center; justify-content:center;
  font-size: 20px;
  margin-bottom: var(--sp-2);
}
.stat-card .stat-value{ font-size: 26px; font-weight: 800; color: var(--text-1); letter-spacing: -0.02em; }
.stat-card .stat-label{ font-size: 13px; color: var(--text-3); font-weight: 600; }
.stat-card .stat-delta{ font-size: 12.5px; font-weight: 700; display:inline-flex; align-items:center; gap:4px; }
.stat-delta.up{ color: var(--accent-600); }
.stat-delta.down{ color: var(--danger); }

.icon-tile{
  width: 46px; height: 46px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center; font-size: 19px; flex-shrink:0;
}
.icon-tile.tile-primary{ background: var(--primary-50); color: var(--primary); }
.icon-tile.tile-accent{ background: var(--accent-50); color: var(--accent-600); }
.icon-tile.tile-warning{ background: var(--warning-50); color: var(--warning); }
.icon-tile.tile-danger{ background: var(--danger-50); color: var(--danger); }
.icon-tile.tile-info{ background: var(--info-50); color: var(--info); }
.icon-tile.tile-dark{ background: var(--secondary); color: #fff; }

/* =========================================================================
   BADGES / STATUS
   ========================================================================= */
.badge-soft{
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: .01em;
}
.badge-soft .dot{ width:6px; height:6px; border-radius:50%; background: currentColor; }
.badge-primary{ background: var(--primary-50); color: var(--primary-700); }
.badge-accent{ background: var(--accent-50); color: var(--accent-600); }
.badge-success{ background: var(--success-50); color: var(--success); }
.badge-warning{ background: var(--warning-50); color: #B45309; }
.badge-danger{ background: var(--danger-50); color: var(--danger); }
.badge-neutral{ background: var(--bg-shell); color: var(--text-3); }
.badge-info{ background: var(--info-50); color: #0369A1; }

/* Task status specific */
.status-pending{ background: var(--warning-50); color: #B45309; }
.status-progress{ background: var(--primary-50); color: var(--primary-700); }
.status-completed{ background: var(--accent-50); color: var(--accent-600); }
.status-archived{ background: var(--bg-shell); color: var(--text-3); }

.priority-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.priority-high{ background: var(--danger); }
.priority-medium{ background: var(--warning); }
.priority-low{ background: var(--accent); }
.priority-urgent{ background: var(--danger); box-shadow: 0 0 0 3px var(--danger-50); }

/* =========================================================================
   FORMS
   ========================================================================= */
.form-control, .form-select{
  border-radius: var(--r-input);
  border: 1.5px solid var(--border);
  padding: 11px 16px;
  font-size: 14.5px;
  color: var(--text-1);
  background: #fff;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-control:focus, .form-select:focus{
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-50);
}
.form-control.is-valid{ border-color: var(--accent); background-image:none; }
.form-control.is-invalid{ border-color: var(--danger); background-image:none; }
.valid-feedback{ color: var(--accent-600); font-weight: 600; font-size: 12.5px; }
.invalid-feedback{ color: var(--danger); font-weight: 600; font-size: 12.5px; }

.form-floating > label{ color: var(--text-3); padding: 12px 16px; }
.form-floating > .form-control{ padding: 1.5rem 1rem .5rem; height: calc(3.4rem + 2px); }
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label{
  color: var(--primary); font-weight: 600; opacity:1; transform: scale(.8) translateY(-.7rem) translateX(.2rem);
}

.input-group-app{ position: relative; }
.input-group-app .form-control{ padding-left: 44px; }
.input-group-app i{
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-4); font-size: 16px; z-index: 5;
}
.pw-toggle{
  position:absolute; right: 14px; top:50%; transform: translateY(-50%);
  background:none; border:none; color: var(--text-4); cursor:pointer; z-index:5; padding:4px;
}
.pw-toggle:hover{ color: var(--text-2); }

.form-check-input{ border-radius: 6px; width: 1.15em; height: 1.15em; border: 1.5px solid var(--border-strong); }
.form-check-input:checked{ background-color: var(--primary); border-color: var(--primary); }
.form-check-input:focus{ box-shadow: 0 0 0 4px var(--primary-50); }

.form-switch .form-check-input{ width: 2.6em; height: 1.4em; border-radius: var(--r-pill); }
.form-switch .form-check-input:checked{ background-color: var(--accent); border-color: var(--accent); }

.form-label{ font-weight: 600; font-size: 13.5px; color: var(--text-1); margin-bottom: 7px; }
.form-hint{ font-size: 12.5px; color: var(--text-3); }

/* =========================================================================
   NAV / APP SHELL
   ========================================================================= */
.app-shell{ display:flex; min-height: 100vh; background: var(--bg-shell); }

.sidebar{
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--secondary);
  color: var(--text-inverse);
  min-height: 100vh;
  position: fixed;
  top:0; left:0; bottom:0;
  z-index: 1030;
  display: flex;
  flex-direction: column;
  transition: width .25s var(--ease), transform .25s var(--ease);
}
.sidebar-brand{
  display:flex; align-items:center; gap: 12px;
  padding: 24px 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sidebar-brand .sidebar-logo{
  width: 38px;
  height: 38px;
  object-fit: contain;
  border-radius: 11px;
  flex-shrink: 0;
}
.sidebar-brand .brand-mark{
  width: 38px; height:38px; border-radius: 11px;
  background: var(--gradient-flow);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size: 17px; flex-shrink:0;
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.sidebar-brand .brand-name{ font-weight: 800; color:#fff; font-size: 17px; letter-spacing:-0.02em; white-space:nowrap; }
.sidebar-brand .brand-sub{ font-size: 11px; color: rgba(248,250,252,.5); font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

.sidebar-nav{ padding: 18px 14px; flex:1; overflow-y:auto; }
.sidebar-section-label{
  font-size: 11px; font-weight: 700; letter-spacing:.08em; text-transform:uppercase;
  color: rgba(248,250,252,.35); padding: 14px 12px 8px;
}
.sidebar-link{
  display:flex; align-items:center; gap:13px;
  padding: 11px 14px; border-radius: 12px;
  color: rgba(248,250,252,.68);
  font-weight: 600; font-size: 14.5px;
  margin-bottom: 3px;
  transition: background-color .2s var(--ease), color .2s var(--ease);
  position: relative;
  white-space: nowrap;
}
.sidebar-link i{ font-size: 18px; width: 22px; text-align:center; flex-shrink:0; }
.sidebar-link:hover{ background: rgba(255,255,255,.06); color:#fff; }
.sidebar-link.active{ background: rgba(37,99,235,.22); color:#fff; }
.sidebar-link.active::before{
  content:''; position:absolute; left:-14px; top:8px; bottom:8px; width:4px;
  background: var(--gradient-flow); border-radius: 0 4px 4px 0;
}
.sidebar-link .badge-soft{ margin-left:auto; }

.sidebar-foot{
  padding: 16px; border-top: 1px solid rgba(255,255,255,.08);
}
.sidebar-user{ display:flex; align-items:center; gap:12px; padding: 8px; border-radius: 12px; }
.sidebar-user:hover{ background: rgba(255,255,255,.06); cursor:pointer; }

.main-content{ margin-left: var(--sidebar-w); flex:1; min-width:0; transition: margin-left .25s var(--ease); padding-bottom: var(--sp-6); }

.topbar{
  height: var(--topbar-h);
  background: rgba(248,250,252,.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 var(--sp-4);
  position: sticky; top:0; z-index: 1020;
}
.topbar-search{ position: relative; max-width: 380px; width:100%; }
.topbar-search input{ background:#fff; }
.topbar-icon-btn{
  width:44px; height:44px; border-radius: 13px;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); color: var(--text-2); font-size:18px;
  position: relative; transition: all .2s var(--ease);
}
.topbar-icon-btn:hover{ border-color: var(--primary); color: var(--primary); }
.topbar-icon-btn .ping{
  position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:50%;
  background: var(--danger); border: 2px solid #fff;
}
.avatar-ring{
  width:44px; height:44px; border-radius: 13px;
  background: var(--gradient-primary); color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
.avatar-lg{ width:88px; height:88px; border-radius:22px; font-size: 30px; }
.sidebar-toggle-btn{ display:none; }

.page-wrap{ padding: var(--sp-4); max-width: 1360px; }

/* Bottom nav (mobile) */
.bottom-nav{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index:1040;
  background: #fff; border-top:1px solid var(--border);
  height: var(--bottomnav-h);
  align-items: stretch;
  box-shadow: 0 -8px 24px rgba(15,23,42,.06);
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; color: var(--text-4); font-size:11px; font-weight:600;
}
.bottom-nav a i{ font-size: 21px; }
.bottom-nav a.active{ color: var(--primary); }
.bottom-nav a.active i{
  background: var(--primary-50); border-radius: 10px; padding:4px 14px;
}

@media (max-width: 991.98px){
  .sidebar{ transform: translateX(-100%); }
  .sidebar.open{ transform: translateX(0); box-shadow: var(--shadow-lg); }
  .main-content{ margin-left:0; padding-bottom: calc(var(--bottomnav-h) + 24px); }
  .bottom-nav{ display:flex; }
  .sidebar-toggle-btn{ display:flex; }
  .sidebar-backdrop{
    display:none; position:fixed; inset:0; background: rgba(15,23,42,.5); z-index: 1025;
  }
  .sidebar-backdrop.show{ display:block; }
}

/* =========================================================================
   TABLES
   ========================================================================= */
.table-app{ width:100%; border-collapse: separate; border-spacing: 0; }
.table-app thead th{
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-3); font-weight:700; padding: 12px 18px; border-bottom: 1.5px solid var(--border);
  white-space:nowrap;
  cursor: pointer; user-select:none;
}
.table-app thead th i{ font-size: 12px; margin-left: 4px; opacity:.5; }
.table-app tbody td{ padding: 16px 18px; border-bottom: 1px solid var(--border); vertical-align:middle; font-size: 14px; color: var(--text-2); }
.table-app tbody tr{ transition: background-color .15s var(--ease); }
.table-app tbody tr:hover{ background: var(--bg-shell); }
.table-app tbody tr:last-child td{ border-bottom:none; }
.table-responsive-app{ overflow-x:auto; border-radius: var(--r-card); }

/* =========================================================================
   PROGRESS / FLOW SIGNATURE
   ========================================================================= */
.progress-app{ height: 8px; border-radius: var(--r-pill); background: var(--bg-shell); overflow:hidden; }
.progress-app .bar{ height:100%; border-radius: var(--r-pill); background: var(--gradient-flow); transition: width .6s var(--ease); }

/* The "Flow Path" — TaskFlow Pro's signature element:
   a connected pipeline visualizing work moving through stages. */
.flow-path{ display:flex; align-items:flex-start; position:relative; }
.flow-path::before{
  content:'';
  position:absolute; top:23px; left:5%; right:5%; height:3px;
  background: linear-gradient(90deg, var(--border) 0%, var(--border) 100%);
  z-index:0;
}
.flow-path .flow-progress{
  position:absolute; top:23px; left:5%; height:3px; z-index:1;
  background: var(--gradient-flow); border-radius:4px;
  transition: width 1s var(--ease);
}
.flow-node{ flex:1; text-align:center; position:relative; z-index:2; padding: 0 10px; }
.flow-node .flow-dot{
  width: 48px; height:48px; border-radius:50%; background:#fff; border: 3px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin: 0 auto 16px;
  font-weight:700; color: var(--text-3); font-size:17px; transition: all .3s var(--ease);
}
.flow-node.is-done .flow-dot{ background: var(--gradient-flow); border-color: transparent; color:#fff; }
.flow-node.is-current .flow-dot{ border-color: var(--primary); color: var(--primary); box-shadow: 0 0 0 6px var(--primary-50); }
.flow-node h6{ font-size:14.5px; margin-bottom:4px; }
.flow-node p{ font-size:12.5px; color: var(--text-3); margin:0; }

/* =========================================================================
   ACCORDION / FAQ
   ========================================================================= */
.accordion-app .accordion-item{
  border: 1px solid var(--border); border-radius: 16px !important; overflow:hidden; margin-bottom: 12px; background:#fff;
}
.accordion-app .accordion-button{
  font-weight: 700; color: var(--text-1); padding: 18px 22px; font-size: 15px;
}
.accordion-app .accordion-button:not(.collapsed){ background: var(--primary-50); color: var(--primary-700); box-shadow:none; }
.accordion-app .accordion-button:focus{ box-shadow:none; }
.accordion-app .accordion-button::after{ width: 18px; height:18px; background-size:18px; }
.accordion-app .accordion-body{ padding: 4px 22px 22px; color: var(--text-3); font-size:14.5px; }

/* =========================================================================
   MODALS
   ========================================================================= */
.modal-content{ border-radius: var(--r-modal); border:none; box-shadow: var(--shadow-lg); }
.modal-header{ border-bottom:1px solid var(--border); padding: 22px 26px; }
.modal-body{ padding: 26px; }
.modal-footer{ border-top:1px solid var(--border); padding: 18px 26px; }
.modal-title{ font-weight:800; }

/* =========================================================================
   TOASTS
   ========================================================================= */
.toast-app{
  border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  background:#fff; min-width: 320px;
}

/* =========================================================================
   MISC UTILITIES
   ========================================================================= */
.divider-v{ width:1px; background: var(--border); align-self:stretch; }
.skeleton{
  background: linear-gradient(90deg, var(--bg-shell) 25%, #E9EEF4 37%, var(--bg-shell) 63%);
  background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 10px;
}
@keyframes skeleton-loading{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

.empty-state{ text-align:center; padding: var(--sp-6) var(--sp-3); }
.empty-state .empty-icon{
  width: 76px; height:76px; border-radius: 22px; background: var(--primary-50); color: var(--primary);
  display:flex; align-items:center; justify-content:center; font-size: 32px; margin: 0 auto var(--sp-2);
}

.fade-up{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fade-up.in-view{ opacity:1; transform: translateY(0); }

.hover-lift{ transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.hover-lift:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.chip{
  display:inline-flex; align-items:center; gap:6px; padding: 7px 14px; border-radius: var(--r-pill);
  border: 1.5px solid var(--border); font-size:13px; font-weight:600; color: var(--text-2); background:#fff;
  cursor:pointer; transition: all .2s var(--ease);
}
.chip.active, .chip:hover{ border-color: var(--primary); color: var(--primary); background: var(--primary-50); }

.section-pad{ padding: var(--sp-7) 0; }
@media (max-width: 767.98px){ .section-pad{ padding: var(--sp-6) 0; } }

.bg-mesh{ background: var(--gradient-mesh), var(--bg); }

.kbd{
  font-family: inherit; font-size: 11.5px; font-weight:700; color: var(--text-3);
  background: var(--bg-shell); border: 1px solid var(--border); border-bottom-width:2px;
  padding: 3px 7px; border-radius: 6px;
}

/* Landing page navbar */
.navbar-landing{
  padding: 16px 0; position: sticky; top:0; z-index: 1030;
  background: rgba(248,250,252,.82); backdrop-filter: blur(14px); border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.navbar-landing.scrolled{ border-color: var(--border); box-shadow: var(--shadow-sm); }
.navbar-landing .nav-link{ font-weight:600; color: var(--text-2); padding: 8px 16px !important; }
.navbar-landing .nav-link:hover{ color: var(--primary); }
.brand-logo{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:19px; color: var(--text-1); }
.brand-logo .brand-mark{
  width:38px; height:38px; border-radius:11px; background: var(--gradient-flow);
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800;
  box-shadow: 0 6px 16px rgba(37,99,235,.3);
}

.hero-shape{
  position:absolute; border-radius:50%; filter: blur(60px); z-index:0; opacity:.55;
}

.pricing-card{ border-radius: var(--r-card); border:1.5px solid var(--border); background:#fff; padding: var(--sp-4); transition: all .3s var(--ease); }
.pricing-card.featured{ border-color: var(--primary); box-shadow: var(--shadow-primary); transform: scale(1.03); position:relative; }
.pricing-card.featured::before{
  content:'Most Popular'; position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background: var(--gradient-primary); color:#fff; font-size:11.5px; font-weight:700; padding:6px 16px; border-radius: var(--r-pill);
  letter-spacing:.03em;
}

.testimonial-card{ border-radius: var(--r-card); border:1px solid var(--border); background:#fff; padding: var(--sp-3); height:100%; }
.testimonial-card .stars{ color: var(--warning); font-size:14px; letter-spacing:2px; }

.footer-app{ background: var(--secondary); color: rgba(248,250,252,.7); }
.footer-app a{ color: rgba(248,250,252,.6); }
.footer-app a:hover{ color:#fff; }
.footer-app h6{ color:#fff; font-weight:700; font-size:13.5px; text-transform:uppercase; letter-spacing:.05em; }

/* Kanban */
.kanban-col{ background: #EEF2F7; border-radius: 18px; padding: 14px; min-height: 200px; }
.kanban-col-head{ display:flex; align-items:center; justify-content:space-between; padding: 4px 6px 12px; }
.kanban-card{
  background:#fff; border-radius: 14px; padding: 14px; margin-bottom: 10px; border:1px solid var(--border);
  box-shadow: var(--shadow-xs); cursor:grab; transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.kanban-card:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }
.kanban-card.dragging{ opacity:.5; }
.kanban-col.drag-over{ background: var(--primary-50); outline: 2px dashed var(--primary); outline-offset:-2px; }

/* Wallet transaction icon */
.txn-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }

/* Toggle switch cards (settings) */
.setting-row{ display:flex; align-items:center; justify-content:space-between; padding: 16px 4px; border-bottom: 1px solid var(--border); gap: 16px; }
.setting-row:last-child{ border-bottom:none; }
.setting-row h6{ font-size:14.5px; margin-bottom:2px; }
.setting-row p{ font-size:13px; color: var(--text-3); margin:0; }

.nav-tabs-app{ border-bottom: 1.5px solid var(--border); gap: 4px; }
.nav-tabs-app .nav-link{
  border:none; color: var(--text-3); font-weight:600; font-size:14px; padding: 12px 6px; margin-right: 22px; border-radius:0;
  border-bottom: 2.5px solid transparent;
}
.nav-tabs-app .nav-link.active{ color: var(--primary); border-bottom-color: var(--primary); background:none; }

/* Scroll reveal container */
[data-animate]{ opacity:0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-animate].in-view{ opacity:1; transform:none; }

/* =========================================================================
   EARNING TASKS / MY TASKS
   ========================================================================= */
.balance-pill{display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px solid var(--border);border-radius:14px;background:var(--card);box-shadow:var(--shadow-xs)}
.balance-pill i{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font-size:17px}
.balance-pill span{display:flex;flex-direction:column;line-height:1.15}
.balance-pill small{font-size:10px;color:var(--text-3);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.balance-pill strong{font-size:14px;color:var(--text-1);margin-top:3px}
.balance-pill.main i{background:var(--primary-50);color:var(--primary)}
.balance-pill.income i{background:var(--accent-50);color:var(--accent-600)}
.earning-batch{border-radius:var(--r-card)}
.earning-task-card{display:flex;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow-sm);margin-bottom:14px;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.earning-task-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.earning-task-card.is-completed{opacity:.82}
.earning-task-media{position:relative;flex:0 0 220px;min-height:205px;background:var(--secondary);overflow:hidden}
.earning-task-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.earning-task-placeholder{height:100%;min-height:205px;display:grid;place-items:center;color:#fff;font-size:54px;background:var(--gradient-primary)}
.earning-offer-badge{position:absolute;top:10px;left:10px;background:var(--danger);color:#fff;font-size:10px;font-weight:800;padding:5px 9px;border-radius:7px;letter-spacing:.03em}
.earning-task-content{flex:1;padding:20px 22px}
.earning-task-title{font-size:17px;margin:2px 0 0;color:var(--text-1)}
.earning-amount span{display:block;color:var(--text-4);font-size:10px}.earning-amount strong{display:block;color:var(--accent-600);font-size:18px;margin-top:2px}
.earning-meta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;background:var(--bg);border-radius:14px;padding:13px 14px}
.earning-meta-grid div{display:flex;flex-direction:column}.earning-meta-grid span{font-size:10px;color:var(--text-4)}.earning-meta-grid strong{font-size:14px;color:var(--text-1);margin-top:2px}
.earning-action{width:100%;padding:12px 16px;border-radius:12px;text-align:center;font-weight:700;background:#64748B;color:#fff}.earning-action.completed{background:var(--success-50);color:var(--success)}
.earning-batch-footer{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:12px 16px;box-shadow:var(--shadow-xs)}
.earning-batch-footer>div{text-align:center;padding:4px 8px;border-right:1px solid var(--border)}.earning-batch-footer>div:last-child{border-right:0}.earning-batch-footer strong{display:block;font-size:16px;color:var(--text-1)}.earning-batch-footer span{display:block;font-size:10px;color:var(--text-3);font-weight:600;margin-top:1px}
.earning-detail-card{overflow:hidden}.earning-detail-image{width:100%;max-height:330px;object-fit:cover}.earning-detail-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.earning-detail-meta div{background:var(--bg);padding:13px;border-radius:12px}.earning-detail-meta span{display:block;font-size:10px;color:var(--text-4)}.earning-detail-meta strong{display:block;margin-top:3px;color:var(--text-1)}
@media(max-width:767.98px){.earning-task-card{display:block}.earning-task-media{height:190px;min-height:190px}.earning-task-placeholder{min-height:190px}.earning-meta-grid{grid-template-columns:1fr 1fr}.earning-detail-meta{grid-template-columns:1fr 1fr}.balance-pill{flex:1}.batch-progress-wrap{width:100%}.batch-progress-wrap .progress-app{width:100%!important}}