/* ══════════════════════════════════════════════════════════
   DJIMLYSTORE Employee Portal — Modern Dark UI v2
   Works inside any WordPress theme (no full-page takeover fight)
   Full-screen override handled in PHP via wp_head injection
══════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  /* Backgrounds */
  --bg:   #0d0f14;
  --bg2:  #13161f;
  --bg3:  #181c27;
  --card: #1a1e2e;
  --card2:#1e2336;

  /* Borders */
  --b:    rgba(255,255,255,.07);
  --b2:   rgba(255,255,255,.12);

  /* Text */
  --tx:   #f1f5fb;
  --tx2:  #8892a4;
  --tx3:  #4a5568;

  /* Accents */
  --blue:   #6c8fff;
  --blue2:  #4f6ef0;
  --purple: #a78bfa;
  --green:  #34d399;
  --red:    #f87171;
  --gold:   #fbbf24;
  --cyan:   #38bdf8;

  /* Gradients */
  --grad:   linear-gradient(135deg,#6c8fff,#a78bfa);
  --grad2:  linear-gradient(135deg,#34d399,#06b6d4);

  /* Glow */
  --glow-blue:   0 0 20px rgba(108,143,255,.25);
  --glow-purple: 0 0 20px rgba(167,139,250,.2);

  /* Radius */
  --r:  14px;
  --r2: 10px;
  --r3: 8px;
  --r4: 6px;

  /* Shadow */
  --sh:  0 1px 3px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.3);
  --sh2: 0 8px 40px rgba(0,0,0,.5);

  /* Font */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
}

/* ── Base ── */
.dep-wrap,
.dep-auth-wrap,
.dep-dash-wrap {
  font-family: var(--font);
  color: var(--tx);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after { box-sizing: border-box; }

/* ══════════════════════════════════════════════════════════
   AUTH PAGES (Login / Register)
══════════════════════════════════════════════════════════ */
.dep-auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

/* Animated background glow */
.dep-auth-wrap::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108,143,255,.12) 0%, transparent 70%);
  top: -200px; left: -200px;
  pointer-events: none;
}
.dep-auth-wrap::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(167,139,250,.1) 0%, transparent 70%);
  bottom: -150px; right: -150px;
  pointer-events: none;
}

.dep-auth-box {
  background: var(--card);
  border: 1px solid var(--b2);
  border-radius: 24px;
  padding: 44px 40px;
  width: 100%;
  max-width: 440px;
  box-shadow: var(--sh2);
  position: relative;
  z-index: 1;
}

/* Top accent line */
.dep-auth-box::before {
  content: '';
  position: absolute;
  top: 0; left: 20%; right: 20%; height: 2px;
  background: var(--grad);
  border-radius: 0 0 4px 4px;
}

.dep-auth-logo {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 28px;
}
.dep-logo-icon {
  width: 46px; height: 46px; border-radius: var(--r2);
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 14px; color: #fff;
  box-shadow: var(--glow-blue);
  flex-shrink: 0;
}
.dep-logo-name { font-size: 17px; font-weight: 900; color: var(--tx); letter-spacing: .03em; }
.dep-logo-sub  { font-size: 12px; color: var(--tx3); margin-top: 1px; }
.dep-auth-title {
  font-size: 24px; font-weight: 800; color: var(--tx);
  margin: 0 0 24px; letter-spacing: -.02em;
}
.dep-auth-link {
  text-align: center; font-size: 13px; color: var(--tx3); margin-top: 18px;
}
.dep-auth-link a { color: var(--blue); font-weight: 700; text-decoration: none; }
.dep-auth-link a:hover { color: var(--purple); }

/* ══════════════════════════════════════════════════════════
   FORM ELEMENTS
══════════════════════════════════════════════════════════ */
.dep-field { margin-bottom: 16px; }
.dep-field label {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--tx2);
  margin-bottom: 6px;
}
.dep-field input,
.dep-field select,
.dep-field textarea {
  width: 100%; padding: 12px 16px;
  font-size: 16px; font-family: var(--font);
  background: var(--bg3); border: 1.5px solid var(--b);
  border-radius: var(--r3); color: var(--tx);
  outline: none; transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
}
.dep-field input::placeholder,
.dep-field textarea::placeholder { color: var(--tx3); }
.dep-field input:focus,
.dep-field select:focus,
.dep-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(108,143,255,.15);
  background: var(--bg2);
}
.dep-field select { cursor: pointer; }
.dep-field select option { background: var(--bg3); color: var(--tx); }
.dep-field textarea { min-height: 90px; resize: vertical; line-height: 1.6; }
.dep-field input[type="file"] {
  padding: 10px 14px; font-size: 13px; cursor: pointer;
}
.dep-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dep-full   { grid-column: 1 / -1; }

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.dep-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  padding: 13px 28px; border-radius: 12px; border: none;
  background: var(--grad); color: #fff;
  font-size: 14px; font-weight: 700; font-family: var(--font);
  cursor: pointer; text-decoration: none; letter-spacing: .01em;
  transition: transform .15s, box-shadow .15s, opacity .15s;
  box-shadow: 0 4px 16px rgba(108,143,255,.3);
  position: relative; overflow: hidden;
}
.dep-btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: rgba(255,255,255,0);
  transition: background .15s;
}
.dep-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(108,143,255,.4);
}
.dep-btn-primary:active { transform: translateY(0); }
.dep-btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.dep-btn-full { width: 100%; display: flex; }

.dep-btn-sm {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 16px; border-radius: var(--r4); border: none;
  background: rgba(108,143,255,.15); color: var(--blue);
  font-size: 12px; font-weight: 700; font-family: var(--font);
  cursor: pointer; transition: all .15s; text-decoration: none;
  border: 1px solid rgba(108,143,255,.2);
}
.dep-btn-sm:hover { background: rgba(108,143,255,.25); color: var(--blue); }

.dep-btn-ghost {
  background: transparent; border: 1px solid var(--b2); color: var(--tx2);
}
.dep-btn-ghost:hover { background: var(--card2); color: var(--tx); }

/* ══════════════════════════════════════════════════════════
   ALERTS
══════════════════════════════════════════════════════════ */
.dep-alert {
  padding: 13px 18px; border-radius: var(--r3);
  font-size: 13px; font-weight: 600; line-height: 1.5;
  display: flex; align-items: flex-start; gap: 10px;
}
.dep-alert-ok   { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25); color: var(--green); }
.dep-alert-err  { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); color: var(--red); }
.dep-alert-warn { background: rgba(251,191,36,.1);  border: 1px solid rgba(251,191,36,.25);  color: var(--gold); }
.dep-alert-info { background: rgba(56,189,248,.1);  border: 1px solid rgba(56,189,248,.25);  color: var(--cyan); }

/* ══════════════════════════════════════════════════════════
   DASHBOARD LAYOUT
══════════════════════════════════════════════════════════ */
.dep-dash-wrap {
  min-height: 100vh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* ── Topbar ── */
.dep-topbar {
  position: sticky; top: 0; z-index: 300;
  height: 60px;
  background: rgba(13,15,20,.92);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom: 1px solid var(--b);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
}
.dep-topbar-left  { display: flex; align-items: center; gap: 12px; }
.dep-topbar-right { display: flex; align-items: center; gap: 10px; }

.dep-clock-btn {
  height: 34px; padding: 0 16px;
  border-radius: 20px; border: none; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: var(--font);
  transition: all .2s; display: flex; align-items: center; gap: 6px;
}
.dep-clock-in  { background: rgba(52,211,153,.15); color: var(--green); border: 1px solid rgba(52,211,153,.3); }
.dep-clock-out { background: rgba(248,113,113,.15); color: var(--red);   border: 1px solid rgba(248,113,113,.3); }
.dep-clock-in:hover  { background: var(--green); color: #000; box-shadow: 0 0 16px rgba(52,211,153,.4); }
.dep-clock-out:hover { background: var(--red);   color: #fff; box-shadow: 0 0 16px rgba(248,113,113,.4); }

.dep-logout-btn {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.05); border: 1px solid var(--b);
  color: var(--tx3); cursor: pointer; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.dep-logout-btn:hover { background: rgba(248,113,113,.15); color: var(--red); border-color: rgba(248,113,113,.3); }

/* ── Avatar ── */
.dep-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #fff;
  flex-shrink: 0; box-shadow: var(--glow-blue);
}
.dep-avatar-sm { width: 30px; height: 30px; font-size: 11px; }

/* ── Body ── */
.dep-dash-body {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* ── Sidebar ── */
.dep-sidebar {
  width: 230px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--b);
  position: sticky; top: 60px;
  height: calc(100vh - 60px);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: var(--b2) transparent;
}
.dep-sidebar::-webkit-scrollbar { width: 4px; }
.dep-sidebar::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 2px; }

.dep-sb-nav { padding: 12px 10px; flex: 1; }

.dep-sb-btn {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 10px 12px; border-radius: var(--r3);
  border: none; background: none; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--tx2);
  font-family: var(--font); text-align: left;
  transition: all .15s; position: relative; margin-bottom: 2px;
  white-space: nowrap;
}
.dep-sb-btn span { font-size: 16px; flex-shrink: 0; }
.dep-sb-btn:hover { background: rgba(255,255,255,.05); color: var(--tx); }
.dep-sb-btn.on    { background: rgba(108,143,255,.12); color: var(--blue); }
.dep-sb-btn.on::before {
  content: ''; position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--grad);
}

.dep-badge-count {
  margin-left: auto;
  min-width: 18px; height: 18px;
  background: var(--red); color: #fff;
  border-radius: 20px; font-size: 9px; font-weight: 800;
  padding: 0 5px; display: flex; align-items: center; justify-content: center;
}
.dep-badge-count.warn { background: var(--gold); color: #000; }

.dep-sb-foot {
  padding: 14px 16px;
  border-top: 1px solid var(--b);
  display: flex; align-items: center; gap: 10px;
}
.dep-sb-foot-name { font-size: 13px; font-weight: 700; color: var(--tx); }
.dep-sb-foot-role { font-size: 11px; color: var(--blue); }

/* ── Main content ── */
.dep-main {
  flex: 1; min-width: 0;
  padding: 28px;
  overflow-y: auto;
}

/* ── Pages ── */
.dep-page { display: none; }
.dep-page.on { display: block; animation: depFadeIn .2s ease; }
@keyframes depFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.dep-page-title {
  font-size: 22px; font-weight: 800; color: var(--tx);
  margin: 0 0 24px; letter-spacing: -.02em;
}

/* ── Stats grid ── */
.dep-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}
.dep-stat {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: var(--r);
  padding: 20px; position: relative;
  overflow: hidden; transition: transform .15s, box-shadow .15s;
}
.dep-stat:hover { transform: translateY(-3px); box-shadow: var(--sh); }
.dep-stat::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
}
.dep-stat-blue   { border-bottom-color: var(--blue);   }
.dep-stat-blue::after   { background: var(--blue); }
.dep-stat-green  { border-bottom-color: var(--green);  }
.dep-stat-green::after  { background: var(--green); }
.dep-stat-orange { border-bottom-color: var(--gold);   }
.dep-stat-orange::after { background: var(--gold); }
.dep-stat-purple { border-bottom-color: var(--purple); }
.dep-stat-purple::after { background: var(--purple); }
.dep-stat-red    { border-bottom-color: var(--red);    }
.dep-stat-red::after    { background: var(--red); }
.dep-stat-lbl {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--tx3); margin-bottom: 8px;
}
.dep-stat-val {
  font-size: 26px; font-weight: 900; color: var(--tx);
  letter-spacing: -.03em; line-height: 1;
}

/* ── Cards ── */
.dep-card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: var(--r);
  overflow: hidden; margin-bottom: 16px;
}
.dep-card-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--b);
  background: rgba(255,255,255,.02);
  font-size: 13px; font-weight: 700; color: var(--tx2);
  display: flex; align-items: center; justify-content: space-between;
}
.dep-card-body { padding: 18px 20px; }

/* ── Wallet card ── */
.dep-wallet-card {
  background: linear-gradient(145deg, var(--card2), #0d1226);
  border: 1px solid var(--b2); border-radius: 20px;
  padding: 32px 28px; margin-bottom: 20px;
  position: relative; overflow: hidden;
}
.dep-wallet-card::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad);
}
.dep-wallet-card::after {
  content: ''; position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle, rgba(108,143,255,.08) 0%, transparent 70%);
}
.dep-wallet-lbl {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--tx3); margin-bottom: 10px;
}
.dep-wallet-amount {
  font-size: 44px; font-weight: 900; color: var(--tx);
  letter-spacing: -.04em; line-height: 1;
  font-family: var(--mono);
}
.dep-wallet-usd {
  font-size: 14px; color: var(--tx3); margin-top: 6px;
}

/* ── Task rows ── */
.dep-task-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 20px; border-bottom: 1px solid var(--b);
  transition: background .15s;
}
.dep-task-row:last-child { border-bottom: none; }
.dep-task-row:hover { background: rgba(255,255,255,.02); }

.dep-task-check {
  width: 20px; height: 20px; flex-shrink: 0;
  border: 2px solid var(--b2); border-radius: 6px;
  cursor: pointer; display: flex; align-items: center;
  justify-content: center; font-size: 12px;
  transition: all .15s; margin-top: 1px;
}
.dep-task-check:hover { border-color: var(--green); color: var(--green); }
.dep-task-title { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 5px; }
.dep-task-meta  { display: flex; gap: 10px; font-size: 11px; color: var(--tx3); flex-wrap: wrap; }
.dep-pri-h { color: var(--red);    font-weight: 700; }
.dep-pri-m { color: var(--gold);   font-weight: 700; }
.dep-pri-l { color: var(--green);  font-weight: 700; }

/* ── Messages ── */
.dep-msg-row { display: flex; gap: 10px; align-items: flex-start; }
.dep-msg-me  { flex-direction: row-reverse; }

.dep-msg-bubble {
  background: var(--card2);
  border: 1px solid var(--b);
  border-radius: 4px 16px 16px 16px;
  padding: 10px 14px; max-width: 68%;
}
.dep-msg-me .dep-msg-bubble {
  background: rgba(108,143,255,.12);
  border-color: rgba(108,143,255,.2);
  border-radius: 16px 4px 16px 16px;
}
.dep-msg-name { font-size: 10px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.dep-msg-text { font-size: 13px; color: var(--tx); line-height: 1.5; }
.dep-msg-time { font-size: 10px; color: var(--tx3); margin-top: 5px; }

.dep-msg-bar {
  padding: 12px 16px; border-top: 1px solid var(--b);
  display: flex; gap: 10px; background: var(--bg2);
}
.dep-msg-inp {
  flex: 1; padding: 10px 16px;
  background: var(--bg3); border: 1.5px solid var(--b);
  border-radius: 10px; color: var(--tx); font-size: 16px;
  outline: none; font-family: var(--font);
}
.dep-msg-inp:focus { border-color: var(--blue); }
.dep-msg-inp::placeholder { color: var(--tx3); }

/* ── Transaction rows ── */
.dep-txn-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 20px; border-bottom: 1px solid var(--b);
  transition: background .15s;
}
.dep-txn-row:last-child { border-bottom: none; }
.dep-txn-row:hover { background: rgba(255,255,255,.02); }
.dep-txn-label { font-size: 13px; font-weight: 600; color: var(--tx); }
.dep-txn-sub   { font-size: 11px; color: var(--tx3); margin-top: 2px; }
.dep-txn-credit { font-weight: 800; color: var(--green); font-family: var(--mono); font-size: 14px; }
.dep-txn-debit  { font-weight: 800; color: var(--red);   font-family: var(--mono); font-size: 14px; }

/* ── Badges ── */
.dep-badge {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 20px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.dep-badge-ok     { background: rgba(52,211,153,.12);  border: 1px solid rgba(52,211,153,.25);  color: var(--green); }
.dep-badge-warn   { background: rgba(251,191,36,.12);   border: 1px solid rgba(251,191,36,.25);   color: var(--gold); }
.dep-badge-err    { background: rgba(248,113,113,.12);  border: 1px solid rgba(248,113,113,.25);  color: var(--red); }
.dep-badge-info   { background: rgba(56,189,248,.12);   border: 1px solid rgba(56,189,248,.25);   color: var(--cyan); }
.dep-badge-purple { background: rgba(167,139,250,.12);  border: 1px solid rgba(167,139,250,.25);  color: var(--purple); }

/* ── Modals ── */
.dep-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dep-modal {
  background: var(--card);
  border: 1px solid var(--b2);
  border-radius: 20px; width: 100%; max-width: 460px;
  box-shadow: var(--sh2); overflow: hidden;
  animation: depModalIn .2s ease;
}
@keyframes depModalIn {
  from { opacity: 0; transform: scale(.96) translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.dep-modal-head {
  padding: 18px 22px; border-bottom: 1px solid var(--b);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px; font-weight: 800; color: var(--tx);
  background: rgba(255,255,255,.02);
}
.dep-modal-close {
  width: 30px; height: 30px; border-radius: 8px;
  background: rgba(255,255,255,.06); border: none;
  color: var(--tx3); cursor: pointer; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.dep-modal-close:hover { background: rgba(248,113,113,.15); color: var(--red); }
.dep-modal-body { padding: 22px; }

/* ── Toast notifications ── */
.dep-toast {
  position: fixed; top: 72px; right: 20px; z-index: 99999;
  padding: 13px 20px; border-radius: var(--r2);
  font-size: 13px; font-weight: 700; max-width: 340px;
  box-shadow: var(--sh); animation: depToastIn .25s ease;
  display: flex; align-items: center; gap: 10px;
  backdrop-filter: blur(12px);
}
.dep-toast-ok  { background: rgba(52,211,153,.15);  border: 1px solid rgba(52,211,153,.3);  color: var(--green); }
.dep-toast-err { background: rgba(248,113,113,.15); border: 1px solid rgba(248,113,113,.3); color: var(--red); }
@keyframes depToastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* ── Empty state ── */
.dep-empty {
  text-align: center; padding: 48px 20px;
  color: var(--tx3); font-size: 14px;
}
.dep-empty-icon { font-size: 36px; margin-bottom: 10px; opacity: .4; }

/* ── Order card ── */
.dep-order-card {
  background: var(--card);
  border: 1px solid var(--b);
  border-radius: var(--r);
  padding: 18px 20px; margin-bottom: 12px;
  transition: border-color .15s, transform .15s;
}
.dep-order-card:hover { border-color: var(--b2); transform: translateX(2px); }
.dep-order-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.dep-order-id   { font-size: 13px; font-weight: 800; color: var(--blue); font-family: var(--mono); }
.dep-order-name { font-size: 14px; font-weight: 700; color: var(--tx); margin-bottom: 4px; }
.dep-order-meta { font-size: 12px; color: var(--tx3); }

/* ── Stream view page ── */
.dep-stream-wrap {
  min-height: 100vh; background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px;
}
.dep-stream-box {
  background: var(--card); border: 1px solid var(--b2);
  border-radius: 24px; padding: 36px; width: 100%; max-width: 480px;
  box-shadow: var(--sh2);
}
.dep-countdown {
  text-align: center; padding: 24px;
  background: var(--bg3); border: 1px solid var(--b);
  border-radius: var(--r); margin-bottom: 20px;
}
.dep-days-num {
  font-size: 64px; font-weight: 900; line-height: 1;
  font-family: var(--mono); color: var(--green);
}
.dep-days-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; color: var(--tx3); margin-top: 6px;
}

/* ── Credential input with copy ── */
.dep-cred-row {
  display: flex; gap: 8px; align-items: center;
}
.dep-cred-input {
  flex: 1; background: var(--bg3) !important;
  border: 1.5px solid var(--b) !important;
  border-radius: var(--r3) !important;
  color: var(--tx) !important; padding: 11px 14px !important;
  font-size: 14px !important; font-family: var(--mono) !important;
}
.dep-copy-btn {
  padding: 11px 14px; border-radius: var(--r3); border: 1px solid var(--b);
  background: var(--bg3); color: var(--tx2); cursor: pointer;
  font-size: 12px; transition: all .15s;
}
.dep-copy-btn:hover { background: rgba(108,143,255,.15); color: var(--blue); border-color: var(--blue); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .dep-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .dep-sidebar {
    width: 62px;
  }
  .dep-sb-btn span ~ * { display: none; }
  .dep-sb-btn { justify-content: center; padding: 12px; }
  .dep-sb-btn.on::before { top: 0; left: 10%; width: 80%; height: 2px; bottom: auto; border-radius: 0 0 3px 3px; }
  .dep-sb-foot > *:not(:first-child) { display: none; }
  .dep-sb-foot { justify-content: center; padding: 12px; }
}

@media (max-width: 640px) {
  /* Full-screen on mobile — sidebar becomes bottom nav */
  .dep-dash-body { flex-direction: column-reverse; }

  .dep-sidebar {
    width: 100%; height: auto; position: fixed;
    bottom: 0; left: 0; right: 0; top: auto;
    z-index: 200; border-right: none;
    border-top: 1px solid var(--b);
    background: rgba(19,22,31,.96);
    backdrop-filter: blur(16px);
    flex-direction: row;
  }
  .dep-sb-nav {
    display: flex; flex-direction: row;
    padding: 6px 4px; overflow-x: auto;
    width: 100%;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .dep-sb-nav::-webkit-scrollbar { display: none; }
  .dep-sb-btn {
    flex-direction: column; gap: 3px;
    min-width: 64px; padding: 8px 6px;
    font-size: 9px; justify-content: center;
  }
  .dep-sb-btn span { font-size: 20px; }
  .dep-sb-btn span ~ * { display: flex !important; font-size: 9px; color: var(--tx3); }
  .dep-sb-btn.on span ~ * { color: var(--blue); }
  .dep-sb-foot { display: none; }
  .dep-sb-btn.on::before { top: 0; left: 20%; width: 60%; height: 2px; bottom: auto; border-radius: 0 0 3px 3px; }

  .dep-main {
    padding: 14px 14px 100px; /* space for bottom nav */
  }

  .dep-topbar { padding: 0 14px; }
  .dep-auth-box { padding: 28px 22px; }
  .dep-grid2 { grid-template-columns: 1fr; }
  .dep-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .dep-stat { padding: 14px; }
  .dep-stat-val { font-size: 20px; }
  .dep-wallet-amount { font-size: 34px; }
  .dep-page-title { font-size: 18px; }
}

@media (max-width: 380px) {
  .dep-stats { grid-template-columns: 1fr; }
  .dep-topbar-right .dep-clock-btn { display: none; }
}

/* ══════════════════════════════════════════════════════════
   Premium iOS Dashboard Tabs + Modern SVG Icons
══════════════════════════════════════════════════════════ */
.dep-sidebar {
  background:
    radial-gradient(circle at 0 0, rgba(108,143,255,.16), transparent 28%),
    rgba(13,15,20,.76);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-right: 1px solid rgba(255,255,255,.10);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
.dep-sb-nav { padding: 14px 10px; }
.dep-sb-btn {
  min-height: 46px;
  gap: 12px;
  padding: 10px 13px;
  border-radius: 18px;
  color: rgba(241,245,251,.70);
  font-weight: 750;
  letter-spacing: -.01em;
  background: transparent;
  border: 1px solid transparent;
  transition: transform .22s cubic-bezier(.2,.8,.2,1), background .22s, border-color .22s, color .22s, box-shadow .22s;
}
.dep-sb-btn:hover {
  transform: translateY(-1px);
  color: #fff;
  background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.08);
}
.dep-sb-btn.on {
  color: #fff;
  background:
    linear-gradient(135deg, rgba(0,122,255,.92), rgba(88,86,214,.88)),
    rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 10px 28px rgba(0,122,255,.28), inset 0 1px 0 rgba(255,255,255,.28);
}
.dep-sb-btn.on::before { display:none; }
.dep-sb-btn:active { transform: scale(.985); }
.dep-tab-ico {
  width: 31px;
  height: 31px;
  border-radius: 12px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 31px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  position: relative;
  transition: all .22s cubic-bezier(.2,.8,.2,1);
}
.dep-tab-ico::before {
  content: '';
  width: 18px;
  height: 18px;
  display: block;
  background: currentColor;
  -webkit-mask: var(--dep-icon) center / contain no-repeat;
  mask: var(--dep-icon) center / contain no-repeat;
}
.dep-sb-btn:hover .dep-tab-ico {
  background: rgba(255,255,255,.12);
  transform: translateY(-1px);
}
.dep-sb-btn.on .dep-tab-ico {
  color: #007AFF;
  background: rgba(255,255,255,.94);
  border-color: rgba(255,255,255,.62);
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9);
}
.dep-badge-count {
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  box-shadow: 0 8px 16px rgba(248,113,113,.25);
  border: 1px solid rgba(255,255,255,.25);
}
.dep-i-home { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M9.5 20v-5h5v5'/%3E%3C/svg%3E"); }
.dep-i-orders { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5 12 3l8 4.5-8 4.5-8-4.5Z'/%3E%3Cpath d='M4 7.5V16.5L12 21l8-4.5v-9'/%3E%3Cpath d='M12 12v9'/%3E%3C/svg%3E"); }
.dep-i-tasks { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 11 2 2 4-5'/%3E%3Cpath d='M20 12a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z'/%3E%3C/svg%3E"); }
.dep-i-wallet { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h15a2 2 0 0 1 2 2v8A2.5 2.5 0 0 1 18.5 20h-12A2.5 2.5 0 0 1 4 17.5v-11A2.5 2.5 0 0 1 6.5 4H18'/%3E%3Cpath d='M16 13.5h5'/%3E%3C/svg%3E"); }
.dep-i-messages { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 6.5A3.5 3.5 0 0 1 8.5 3h7A3.5 3.5 0 0 1 19 6.5v4A3.5 3.5 0 0 1 15.5 14H11l-5 4v-4.2A3.5 3.5 0 0 1 5 11.5v-5Z'/%3E%3C/svg%3E"); }
.dep-i-clock { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); }
.dep-i-daysoff { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 14c2-4 6-7 10-8'/%3E%3Cpath d='M7 18c4-1 8-5 10-10'/%3E%3Cpath d='M5 20h14'/%3E%3Cpath d='M14 6c3 1 5 3 6 6'/%3E%3C/svg%3E"); }
.dep-i-insurance { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19 6v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6l7-3Z'/%3E%3Cpath d='M9 12h6'/%3E%3Cpath d='M12 9v6'/%3E%3C/svg%3E"); }
.dep-i-merch { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4 5 6.5 3 10l4 2v8h10v-8l4-2-2-3.5L16 4'/%3E%3Cpath d='M8 4c1 1.5 2.3 2.2 4 2.2S15 5.5 16 4'/%3E%3C/svg%3E"); }
.dep-i-role { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10l-2.5-2.5'/%3E%3Cpath d='M17 17H7l2.5 2.5'/%3E%3Cpath d='M17 7 14.5 9.5'/%3E%3Cpath d='M7 17l2.5-2.5'/%3E%3C/svg%3E"); }
.dep-i-kyc { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='3'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M7 16c.8-1.5 3.2-1.5 4 0'/%3E%3Cpath d='M14 10h3'/%3E%3Cpath d='M14 14h3'/%3E%3C/svg%3E"); }
.dep-i-contract { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3h7l4 4v14H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Z'/%3E%3Cpath d='M14 3v5h5'/%3E%3Cpath d='M8.5 13h7'/%3E%3Cpath d='M8.5 17h5'/%3E%3C/svg%3E"); }
.dep-i-profile { --dep-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M5 20c1.4-4 12.6-4 14 0'/%3E%3C/svg%3E"); }

@media (max-width: 900px) {
  .dep-sb-btn { border-radius: 16px; min-height: 50px; }
  .dep-tab-ico { width: 34px; height: 34px; border-radius: 14px; }
  .dep-sb-btn span ~ * { display: none; }
}
@media (max-width: 640px) {
  .dep-sidebar {
    background: rgba(13,15,20,.82);
    border-top: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 -18px 46px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .dep-sb-nav { padding: 8px 7px; gap: 6px; }
  .dep-sb-btn {
    min-width: 68px;
    min-height: 64px;
    padding: 7px 7px;
    border-radius: 18px;
    font-size: 9px;
  }
  .dep-sb-btn span ~ * { display: flex !important; font-size: 9px; color: rgba(241,245,251,.58); }
  .dep-sb-btn.on span ~ * { color: #fff; }
  .dep-tab-ico { width: 33px; height: 33px; border-radius: 14px; }
  .dep-tab-ico::before { width: 18px; height: 18px; }
  .dep-sb-btn.on { box-shadow: 0 8px 22px rgba(0,122,255,.24), inset 0 1px 0 rgba(255,255,255,.24); }
}

/* DJIMLYSTORE icon visibility fix: inline SVG icons, no external libraries required */
.dep-tab-ico::before { display: none !important; content: none !important; }
.dep-tab-ico svg {
  width: 19px !important;
  height: 19px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  overflow: visible !important;
}
.dep-sb-btn .dep-tab-ico { color: rgba(241,245,251,.92) !important; }
.dep-sb-btn.on .dep-tab-ico { color: #007AFF !important; }
@media (max-width: 640px) {
  .dep-tab-ico svg { width: 18px !important; height: 18px !important; }
}


/* DJIMLYSTORE FINAL ICON HOTFIX - WordPress Dashicons, no CDN */
.dep-tab-ico{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;overflow:visible!important;line-height:1!important;color:inherit!important;font-family:inherit!important;}
.dep-tab-ico svg,.dep-tab-ico::before{display:none!important;content:none!important;}
.dep-tab-ico .dashicons.dep-dashicon{display:inline-block!important;width:21px!important;height:21px!important;font-size:21px!important;line-height:21px!important;color:currentColor!important;opacity:1!important;visibility:visible!important;overflow:visible!important;}
.dep-tab-ico .dashicons.dep-dashicon:before{font-family:dashicons!important;font-size:21px!important;line-height:21px!important;color:currentColor!important;}
.dep-tab-ico .dep-emoji-fallback{display:none!important;font-size:19px!important;line-height:1!important;}
.dep-sb-btn.on .dep-tab-ico{color:#007AFF!important;background:rgba(255,255,255,.96)!important;}
@media (max-width:640px){.dep-tab-ico .dashicons.dep-dashicon:before{font-size:20px!important}.dep-tab-ico .dashicons.dep-dashicon{width:20px!important;height:20px!important;line-height:20px!important}}

/* DJIMLYSTORE HOME TAB iOS MODERN UPDATE */
.dep-home-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:24px;
  margin-bottom:18px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 16% 0%, rgba(0,122,255,.24), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(175,82,222,.22), transparent 30%),
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  box-shadow:0 24px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
  overflow:hidden;
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
}
.dep-home-hero:before{
  content:'';
  position:absolute;
  inset:auto -40px -80px auto;
  width:180px;
  height:180px;
  border-radius:999px;
  background:rgba(52,199,89,.16);
  filter:blur(14px);
}
.dep-home-hero-text{position:relative;z-index:1;min-width:0;}
.dep-home-kicker{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(241,245,251,.76);
  font-size:11px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:10px;
}
.dep-home-title{
  margin:0 0 8px!important;
  font-size:clamp(24px,3vw,38px)!important;
  letter-spacing:-.045em!important;
}
.dep-home-hero p{
  margin:0;
  max-width:560px;
  color:rgba(241,245,251,.68);
  font-size:14px;
  line-height:1.55;
}
.dep-home-profile-pill{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:22px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
.dep-home-profile-pill strong{display:block;color:#fff;font-size:13px;white-space:nowrap;}
.dep-home-profile-pill small{display:block;color:rgba(241,245,251,.58);font-size:11px;margin-top:2px;}
.dep-home-avatar{width:42px!important;height:42px!important;font-size:13px!important;}
.dep-home-card-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0 0 20px;
}
.dep-ios-metric-card{
  position:relative;
  min-height:190px;
  border-radius:28px;
  padding:22px;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.045)),
    rgba(18,22,32,.72);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 20px 56px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter:blur(22px) saturate(175%);
  -webkit-backdrop-filter:blur(22px) saturate(175%);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.dep-ios-metric-card:hover{transform:translateY(-3px);box-shadow:0 26px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16);}
.dep-paycheck-card:before,.dep-performance-card:before{
  content:'';
  position:absolute;
  inset:-70px -80px auto auto;
  width:190px;
  height:190px;
  border-radius:999px;
  filter:blur(2px);
}
.dep-paycheck-card:before{background:radial-gradient(circle, rgba(52,199,89,.32), transparent 68%);}
.dep-performance-card:before{background:radial-gradient(circle, rgba(0,122,255,.34), transparent 68%);}
.dep-ios-card-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;}
.dep-ios-icon{
  width:48px;
  height:48px;
  border-radius:18px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 12px 28px rgba(0,0,0,.18);
}
.dep-ios-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round;}
.dep-ios-icon-green{color:#34C759;}
.dep-ios-icon-blue{color:#0A84FF;}
.dep-ios-badge{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(52,199,89,.14);
  border:1px solid rgba(52,199,89,.22);
  color:#7ff0a2;
  font-size:11px;
  font-weight:850;
  letter-spacing:.02em;
}
.dep-ios-badge-blue{background:rgba(10,132,255,.14);border-color:rgba(10,132,255,.24);color:#8ecaff;}
.dep-ios-card-label{position:relative;z-index:1;color:rgba(241,245,251,.62);font-size:13px;font-weight:750;margin-bottom:8px;}
.dep-ios-card-value{position:relative;z-index:1;color:#fff;font-size:clamp(34px,4vw,48px);font-weight:950;letter-spacing:-.06em;line-height:1;}
.dep-ios-card-foot{position:relative;z-index:1;color:rgba(241,245,251,.55);font-size:12px;margin-top:12px;}
.dep-progress-wrap{position:relative;z-index:1;height:11px;background:rgba(255,255,255,.10);border-radius:999px;overflow:hidden;margin:15px 0 13px;border:1px solid rgba(255,255,255,.10);}
.dep-progress-wrap span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#34C759,#0A84FF);box-shadow:0 0 22px rgba(10,132,255,.35);}
.dep-performance-mini{position:relative;z-index:1;display:flex;gap:10px;flex-wrap:wrap;color:rgba(241,245,251,.66);font-size:12px;}
.dep-performance-mini span{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.09);}
.dep-performance-mini b{color:#fff;font-weight:900;}
@media (max-width:900px){
  .dep-home-hero{align-items:flex-start;flex-direction:column;padding:20px;border-radius:24px;}
  .dep-home-profile-pill{width:100%;justify-content:flex-start;}
  .dep-home-card-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .dep-home-hero{padding:18px;margin-bottom:14px;}
  .dep-home-hero p{font-size:13px;}
  .dep-ios-metric-card{min-height:170px;padding:18px;border-radius:24px;}
  .dep-ios-icon{width:44px;height:44px;border-radius:16px;}
  .dep-ios-card-value{font-size:34px;}
}

/* DJIMLYSTORE iOS Dashboard Cards Full Polish - Stats, Tasks, Hours, Lists */
.dep-stats{
  gap:16px!important;
  margin:18px 0 26px!important;
}
.dep-stat{
  min-height:118px!important;
  padding:18px 18px 16px!important;
  border-radius:26px!important;
  background:
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.14)!important;
  backdrop-filter:blur(22px) saturate(175%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(175%)!important;
  overflow:hidden!important;
}
.dep-stat:before{
  content:'';
  position:absolute;
  right:-26px;
  top:-30px;
  width:104px;
  height:104px;
  border-radius:999px;
  opacity:.55;
  filter:blur(.2px);
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 66%);
  pointer-events:none;
}
.dep-stat:after{
  height:4px!important;
  left:16px!important;
  right:16px!important;
  bottom:12px!important;
  border-radius:999px!important;
  opacity:.9!important;
}
.dep-stat:hover{
  transform:translateY(-4px) scale(1.01)!important;
  box-shadow:0 26px 72px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.16)!important;
}
.dep-stat-lbl{
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  color:rgba(241,245,251,.66)!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.02em!important;
  text-transform:uppercase!important;
}
.dep-stat-lbl:before{
  content:'';
  width:32px;
  height:32px;
  border-radius:13px;
  display:inline-block;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.dep-stat-blue .dep-stat-lbl:before{background:rgba(0,122,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23007AFF' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7Z'/%3E%3Cpath d='M16 11h4'/%3E%3Cpath d='M7 7V5h10v2'/%3E%3C/svg%3E") center/18px 18px no-repeat;}
.dep-stat-green .dep-stat-lbl:before{background:rgba(52,199,89,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2334C759' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/18px 18px no-repeat;}
.dep-stat-orange .dep-stat-lbl:before{background:rgba(255,149,0,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9500' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11l2 2 4-5'/%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3C/svg%3E") center/18px 18px no-repeat;}
.dep-stat-purple .dep-stat-lbl:before{background:rgba(175,82,222,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23AF52DE' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M4 9h16'/%3E%3Crect x='4' y='5' width='16' height='16' rx='3'/%3E%3C/svg%3E") center/18px 18px no-repeat;}
.dep-stat-val{
  margin-top:14px!important;
  color:#fff!important;
  font-size:clamp(24px,2.8vw,34px)!important;
  font-weight:950!important;
  letter-spacing:-.045em!important;
  line-height:1!important;
}
.dep-card{
  border-radius:26px!important;
  background:linear-gradient(145deg, rgba(255,255,255,.095), rgba(255,255,255,.032))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 18px 56px rgba(0,0,0,.19), inset 0 1px 0 rgba(255,255,255,.12)!important;
  backdrop-filter:blur(22px) saturate(170%)!important;
  -webkit-backdrop-filter:blur(22px) saturate(170%)!important;
  overflow:hidden!important;
}
.dep-card-head{
  padding:17px 20px!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.018))!important;
  color:#fff!important;
  font-weight:900!important;
  letter-spacing:-.02em!important;
}
.dep-card-body{padding:18px 20px!important;}
.dep-task-row,
.dep-txn-row,
.dep-order-card{
  border-radius:20px!important;
  margin:10px 0!important;
  padding:15px 16px!important;
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
.dep-task-row:hover,
.dep-txn-row:hover,
.dep-order-card:hover{
  background:rgba(255,255,255,.085)!important;
  transform:translateY(-2px)!important;
}
.dep-task-check{
  width:32px!important;
  height:32px!important;
  border-radius:13px!important;
  background:rgba(0,122,255,.13)!important;
  border:1px solid rgba(0,122,255,.24)!important;
  color:#0A84FF!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.dep-task-title{color:#fff!important;font-weight:850!important;letter-spacing:-.01em!important;}
.dep-task-meta,.dep-txn-sub,.dep-order-meta{color:rgba(241,245,251,.58)!important;}
.dep-wallet-card{
  border-radius:30px!important;
  box-shadow:0 24px 70px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.14)!important;
}
@media(max-width:640px){
  .dep-stats{grid-template-columns:1fr 1fr!important;gap:12px!important;}
  .dep-stat{min-height:104px!important;padding:15px!important;border-radius:22px!important;}
  .dep-stat-lbl{font-size:10.5px!important;gap:7px!important;}
  .dep-stat-lbl:before{width:28px;height:28px;border-radius:11px;background-size:16px 16px!important;}
  .dep-stat-val{font-size:22px!important;margin-top:12px!important;}
  .dep-card{border-radius:22px!important;}
  .dep-card-head{padding:14px 16px!important;}
}
@media(max-width:380px){.dep-stats{grid-template-columns:1fr!important;}}


/* iOS Data Internet Benefit Card */
.dep-data-benefit-card{
  margin:20px 0 18px!important;
  border-radius:30px!important;
  padding:22px!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 8% 0%, rgba(255,59,48,.28), transparent 34%),
    radial-gradient(circle at 94% 10%, rgba(52,199,89,.25), transparent 32%),
    linear-gradient(145deg, rgba(255,255,255,.105), rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 22px 70px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.14)!important;
  backdrop-filter:blur(24px) saturate(180%)!important;
  -webkit-backdrop-filter:blur(24px) saturate(180%)!important;
}
.dep-data-benefit-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;}
.dep-data-benefit-top h3{margin:4px 0 6px!important;font-size:clamp(22px,3vw,32px)!important;line-height:1!important;font-weight:950!important;letter-spacing:-.05em!important;color:#fff!important;}
.dep-data-benefit-top p{margin:0!important;max-width:680px!important;color:rgba(241,245,251,.74)!important;font-size:14px!important;line-height:1.55!important;}
.dep-data-status{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 12px;font-size:12px;font-weight:900;letter-spacing:-.01em;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);}
.dep-data-status.ok{color:#34C759;background:rgba(52,199,89,.14);border-color:rgba(52,199,89,.24);}
.dep-data-status.wait{color:#FFD60A;background:rgba(255,214,10,.13);border-color:rgba(255,214,10,.22);}
.dep-carrier-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:16px 0;}
.dep-carrier-card{min-height:112px!important;border:1px solid rgba(255,255,255,.13)!important;border-radius:24px!important;padding:16px!important;background:rgba(255,255,255,.065)!important;color:#fff!important;cursor:pointer!important;text-align:left!important;display:flex!important;flex-direction:column!important;gap:7px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.10)!important;transition:transform .2s ease, background .2s ease, border-color .2s ease!important;}
.dep-carrier-card:hover:not(:disabled),.dep-carrier-card.selected{transform:translateY(-2px)!important;background:rgba(255,255,255,.12)!important;border-color:rgba(255,255,255,.30)!important;}
.dep-carrier-card:disabled{opacity:.45!important;cursor:not-allowed!important;}
.dep-carrier-card strong{font-size:24px!important;font-weight:950!important;letter-spacing:-.04em!important;}
.dep-carrier-card small{color:rgba(241,245,251,.62)!important;font-size:12px!important;font-weight:800!important;}
.dep-digicel strong{color:#fff!important;text-transform:uppercase!important;}
.dep-digicel{background:linear-gradient(135deg, rgba(230,0,18,.22), rgba(255,255,255,.045))!important;}
.dep-natcom{background:linear-gradient(135deg, rgba(0,153,68,.22), rgba(255,255,255,.045))!important;}
.dep-logo-dot{width:38px;height:38px;border-radius:50%;display:inline-block;background:#E60012;box-shadow:0 0 0 7px rgba(230,0,18,.12), inset 0 2px 8px rgba(255,255,255,.24);}
.dep-logo-nat{width:38px;height:38px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:#009944;color:#fff;font-size:28px;font-weight:950;line-height:1;box-shadow:0 0 0 7px rgba(0,153,68,.12), inset 0 2px 8px rgba(255,255,255,.24);}
.dep-data-form{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:center;}
.dep-data-form input{height:48px;border-radius:18px!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.09)!important;color:#fff!important;padding:0 15px!important;outline:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;}
.dep-data-form input::placeholder{color:rgba(241,245,251,.45)!important;}
.dep-data-form button{height:48px;border:0!important;border-radius:18px!important;padding:0 18px!important;background:linear-gradient(135deg,#0A84FF,#5E5CE6)!important;color:#fff!important;font-weight:950!important;cursor:pointer!important;box-shadow:0 14px 32px rgba(10,132,255,.28)!important;}
.dep-data-form button:disabled{opacity:.45!important;cursor:not-allowed!important;box-shadow:none!important;}
.dep-data-note{margin-top:12px;color:rgba(241,245,251,.58)!important;font-size:12px!important;font-weight:700!important;}
@media(max-width:760px){.dep-data-benefit-top{flex-direction:column}.dep-data-status{white-space:normal}.dep-data-form{grid-template-columns:1fr}.dep-carrier-grid{grid-template-columns:1fr}.dep-data-benefit-card{border-radius:24px!important;padding:18px!important;}}

/* DJIMLYSTORE Responsive iOS Tablet + Laptop Upgrade */
@media (min-width: 901px) {
  .dep-dash-wrap { font-size: 17px !important; }
  .dep-topbar { height: 72px !important; padding: 0 30px !important; }
  .dep-topbar .dep-logo-name { font-size: 18px !important; }
  .dep-clock-btn { height: 44px !important; padding: 0 22px !important; font-size: 15px !important; border-radius: 999px !important; }
  .dep-logout-btn { width: 44px !important; height: 44px !important; border-radius: 16px !important; font-size: 20px !important; }
  .dep-avatar { width: 48px !important; height: 48px !important; font-size: 17px !important; }

  .dep-sidebar { width: 300px !important; top: 72px !important; height: calc(100vh - 72px) !important; }
  .dep-sb-nav { padding: 20px 16px !important; }
  .dep-sb-btn { min-height: 58px !important; padding: 14px 17px !important; font-size: 16px !important; border-radius: 22px !important; gap: 15px !important; margin-bottom: 7px !important; }
  .dep-tab-ico { width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; border-radius: 16px !important; }
  .dep-tab-ico .dashicons { font-size: 22px !important; width: 22px !important; height: 22px !important; line-height: 22px !important; }
  .dep-sb-foot { padding: 18px 20px !important; }

  .dep-main { padding: 42px !important; max-width: 1540px !important; margin: 0 auto !important; width: 100% !important; }
  .dep-page-title { font-size: 34px !important; margin-bottom: 30px !important; }
  .dep-home-title { font-size: clamp(34px, 3vw, 54px) !important; }
  .dep-home-hero { padding: 34px !important; border-radius: 34px !important; margin-bottom: 30px !important; }
  .dep-home-hero p { font-size: 18px !important; max-width: 780px !important; }
  .dep-home-kicker { font-size: 14px !important; }
  .dep-home-profile-pill { padding: 14px 18px !important; border-radius: 24px !important; }
  .dep-home-profile-pill strong { font-size: 17px !important; }
  .dep-home-profile-pill small { font-size: 13px !important; }

  .dep-home-card-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 22px !important; margin-bottom: 26px !important; }
  .dep-ios-metric-card { min-height: 240px !important; padding: 30px !important; border-radius: 34px !important; }
  .dep-ios-icon { width: 62px !important; height: 62px !important; border-radius: 22px !important; }
  .dep-ios-icon svg { width: 30px !important; height: 30px !important; }
  .dep-ios-badge { font-size: 13px !important; padding: 9px 13px !important; }
  .dep-ios-card-label { font-size: 15px !important; margin-top: 24px !important; }
  .dep-ios-card-value { font-size: clamp(46px, 4.2vw, 66px) !important; }
  .dep-ios-card-foot, .dep-performance-mini { font-size: 15px !important; }

  .dep-stats { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 22px !important; }
  .dep-stat { min-height: 150px !important; padding: 24px !important; border-radius: 32px !important; }
  .dep-stat-lbl { font-size: 14px !important; gap: 12px !important; }
  .dep-stat-lbl:before { width: 42px !important; height: 42px !important; border-radius: 16px !important; background-size: 22px 22px !important; }
  .dep-stat-val { font-size: clamp(34px, 3.1vw, 48px) !important; margin-top: 18px !important; }

  .dep-card { border-radius: 32px !important; margin-bottom: 24px !important; }
  .dep-card-head { padding: 22px 26px !important; font-size: 17px !important; }
  .dep-card-body { padding: 24px 26px !important; font-size: 17px !important; }
  .dep-task-row, .dep-txn-row, .dep-order-card { padding: 20px 22px !important; border-radius: 24px !important; margin: 12px 0 !important; }
  .dep-task-title, .dep-order-name, .dep-txn-label { font-size: 17px !important; }
  .dep-task-meta, .dep-order-meta, .dep-txn-sub { font-size: 14px !important; }
  .dep-btn-primary { min-height: 50px !important; padding: 15px 28px !important; font-size: 16px !important; border-radius: 17px !important; }
  .dep-btn-sm { min-height: 42px !important; padding: 11px 18px !important; font-size: 14px !important; border-radius: 14px !important; }
  .dep-field label { font-size: 13px !important; }
  .dep-field input, .dep-field select, .dep-field textarea, .dep-msg-inp { min-height: 52px !important; font-size: 17px !important; border-radius: 16px !important; padding: 15px 18px !important; }
  .dep-wallet-card { padding: 40px 34px !important; border-radius: 36px !important; }
  .dep-wallet-lbl { font-size: 14px !important; }
  .dep-wallet-amount { font-size: clamp(52px, 5vw, 78px) !important; }
  .dep-wallet-usd { font-size: 17px !important; }
}

@media (min-width: 901px) and (max-width: 1199px) {
  .dep-sidebar { width: 260px !important; }
  .dep-main { padding: 34px !important; }
  .dep-sb-btn { font-size: 15px !important; min-height: 55px !important; }
  .dep-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

@media (min-width: 641px) and (max-width: 900px) {
  .dep-dash-wrap { font-size: 16px !important; }
  .dep-topbar { height: 68px !important; padding: 0 24px !important; }
  .dep-main { padding: 32px 28px !important; }
  .dep-sidebar { width: 88px !important; top: 68px !important; height: calc(100vh - 68px) !important; }
  .dep-sb-nav { padding: 16px 10px !important; }
  .dep-sb-btn { min-height: 62px !important; padding: 10px !important; border-radius: 22px !important; margin-bottom: 9px !important; }
  .dep-tab-ico { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; border-radius: 17px !important; }
  .dep-tab-ico .dashicons { font-size: 23px !important; width: 23px !important; height: 23px !important; line-height: 23px !important; }
  .dep-page-title, .dep-home-title { font-size: 34px !important; }
  .dep-home-hero { padding: 28px !important; border-radius: 30px !important; }
  .dep-home-hero p { font-size: 17px !important; }
  .dep-home-card-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  .dep-ios-metric-card { padding: 28px !important; border-radius: 32px !important; min-height: 220px !important; }
  .dep-ios-card-value { font-size: 52px !important; }
  .dep-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 18px !important; }
  .dep-stat { min-height: 136px !important; padding: 22px !important; border-radius: 30px !important; }
  .dep-stat-lbl { font-size: 13px !important; }
  .dep-stat-val { font-size: 38px !important; }
  .dep-card { border-radius: 30px !important; }
  .dep-card-head { padding: 20px 24px !important; font-size: 16px !important; }
  .dep-card-body { padding: 22px 24px !important; font-size: 16px !important; }
  .dep-task-title, .dep-order-name, .dep-txn-label { font-size: 16px !important; }
}

/* DJIMLYSTORE Laptop/Tablet Professional Layout Hotfix 2026-06-08
   Forces the employee dashboard to use the full browser width on laptop/tablet,
   keeps the menu aside, and gives larger iOS bubbles/cards with more spacing. */
body.dep-portal-active .dep-dash-wrap,
body .dep-dash-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 14% 4%, rgba(0,122,255,.16), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(175,82,222,.12), transparent 28%),
    #0d0f14 !important;
}
body.dep-portal-active,
html:has(.dep-dash-wrap),
body:has(.dep-dash-wrap) {
  overflow: hidden !important;
  background: #0d0f14 !important;
}
.dep-dash-wrap .dep-topbar {
  width: 100% !important;
  flex: 0 0 auto !important;
}
.dep-dash-wrap .dep-dash-body {
  width: 100% !important;
  height: calc(100vh - 72px) !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
}

@media (min-width: 1025px) {
  .dep-dash-wrap .dep-topbar {
    height: 78px !important;
    padding: 0 clamp(26px, 3vw, 54px) !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
  }
  .dep-dash-wrap .dep-sidebar {
    position: sticky !important;
    top: 78px !important;
    left: 0 !important;
    width: clamp(300px, 21vw, 370px) !important;
    height: calc(100vh - 78px) !important;
    background: linear-gradient(180deg, rgba(18,22,32,.96), rgba(10,12,18,.98)) !important;
    border-right: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 18px 0 60px rgba(0,0,0,.18) !important;
  }
  .dep-dash-wrap .dep-sb-nav {
    padding: 24px 20px 28px !important;
  }
  .dep-dash-wrap .dep-sb-btn {
    min-height: 66px !important;
    padding: 15px 18px !important;
    margin-bottom: 11px !important;
    border-radius: 24px !important;
    font-size: 17px !important;
    font-weight: 850 !important;
    gap: 17px !important;
    letter-spacing: -.01em !important;
  }
  .dep-dash-wrap .dep-sb-btn:hover {
    background: rgba(255,255,255,.075) !important;
    transform: translateX(3px) !important;
  }
  .dep-dash-wrap .dep-sb-btn.on {
    background: linear-gradient(135deg, #0A84FF, #6E5CFF) !important;
    color: #fff !important;
    box-shadow: 0 18px 38px rgba(10,132,255,.26), inset 0 1px 0 rgba(255,255,255,.28) !important;
  }
  .dep-dash-wrap .dep-sb-btn.on::before { display: none !important; }
  .dep-dash-wrap .dep-tab-ico {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,.095) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    display: inline-grid !important;
    place-items: center !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.13) !important;
  }
  .dep-dash-wrap .dep-sb-btn.on .dep-tab-ico {
    background: rgba(255,255,255,.95) !important;
    color: #0A84FF !important;
  }
  .dep-dash-wrap .dep-tab-ico .dashicons,
  .dep-dash-wrap .dep-tab-ico .dashicons:before {
    font-size: 27px !important;
    width: 27px !important;
    height: 27px !important;
    line-height: 27px !important;
  }
  .dep-dash-wrap .dep-sb-foot {
    padding: 22px 24px !important;
    gap: 14px !important;
  }
  .dep-dash-wrap .dep-main {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    height: calc(100vh - 78px) !important;
    overflow-y: auto !important;
    padding: clamp(34px, 3.4vw, 62px) !important;
  }
  .dep-dash-wrap .dep-page.on {
    width: 100% !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
  }
  .dep-dash-wrap .dep-home-hero {
    width: 100% !important;
    min-height: 330px !important;
    padding: clamp(38px, 4vw, 62px) !important;
    margin-bottom: 34px !important;
    border-radius: 42px !important;
    gap: 36px !important;
    align-items: center !important;
  }
  .dep-dash-wrap .dep-home-hero-text {
    max-width: 840px !important;
    flex: 1 1 auto !important;
  }
  .dep-dash-wrap .dep-home-title {
    font-size: clamp(52px, 5.3vw, 82px) !important;
    line-height: .95 !important;
    margin-bottom: 20px !important;
  }
  .dep-dash-wrap .dep-home-hero p {
    max-width: 760px !important;
    font-size: clamp(19px, 1.35vw, 23px) !important;
    line-height: 1.55 !important;
  }
  .dep-dash-wrap .dep-home-kicker {
    font-size: 15px !important;
    padding: 12px 17px !important;
    margin-bottom: 18px !important;
  }
  .dep-dash-wrap .dep-home-profile-pill {
    padding: 18px 22px !important;
    border-radius: 30px !important;
    min-width: 260px !important;
    gap: 16px !important;
  }
  .dep-dash-wrap .dep-home-profile-pill strong { font-size: 19px !important; }
  .dep-dash-wrap .dep-home-profile-pill small { font-size: 15px !important; }
  .dep-dash-wrap .dep-home-avatar { width: 62px !important; height: 62px !important; font-size: 21px !important; }
  .dep-dash-wrap .dep-home-card-grid,
  .dep-dash-wrap .dep-stats {
    gap: 28px !important;
    margin-bottom: 32px !important;
  }
  .dep-dash-wrap .dep-ios-metric-card,
  .dep-dash-wrap .dep-stat,
  .dep-dash-wrap .dep-card,
  .dep-dash-wrap .dep-wallet-card,
  .dep-dash-wrap .dep-data-benefit-card {
    border-radius: 38px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.13) !important;
  }
  .dep-dash-wrap .dep-ios-metric-card {
    min-height: 280px !important;
    padding: 36px !important;
  }
  .dep-dash-wrap .dep-ios-card-value { font-size: clamp(58px, 4.6vw, 86px) !important; }
  .dep-dash-wrap .dep-ios-card-label,
  .dep-dash-wrap .dep-ios-card-foot,
  .dep-dash-wrap .dep-performance-mini { font-size: 17px !important; }
  .dep-dash-wrap .dep-stats {
    grid-template-columns: repeat(4, minmax(220px, 1fr)) !important;
  }
  .dep-dash-wrap .dep-stat {
    min-height: 178px !important;
    padding: 30px !important;
  }
  .dep-dash-wrap .dep-stat-lbl { font-size: 15px !important; }
  .dep-dash-wrap .dep-stat-val { font-size: clamp(46px, 3.4vw, 66px) !important; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .dep-dash-wrap .dep-topbar { height: 74px !important; padding: 0 28px !important; }
  .dep-dash-wrap .dep-dash-body { height: calc(100vh - 74px) !important; }
  .dep-dash-wrap .dep-sidebar {
    width: 118px !important;
    top: 74px !important;
    height: calc(100vh - 74px) !important;
    background: rgba(18,22,32,.97) !important;
  }
  .dep-dash-wrap .dep-sb-nav { padding: 18px 12px !important; }
  .dep-dash-wrap .dep-sb-btn {
    min-height: 76px !important;
    justify-content: center !important;
    padding: 12px !important;
    margin-bottom: 12px !important;
    border-radius: 26px !important;
  }
  .dep-dash-wrap .dep-sb-btn > span:not(.dep-tab-ico),
  .dep-dash-wrap .dep-sb-btn .dep-badge-count { display: none !important; }
  .dep-dash-wrap .dep-sb-btn { font-size: 0 !important; gap: 0 !important; }
  .dep-dash-wrap .dep-tab-ico {
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    min-height: 58px !important;
    border-radius: 22px !important;
  }
  .dep-dash-wrap .dep-main {
    padding: 34px !important;
    height: calc(100vh - 74px) !important;
    overflow-y: auto !important;
  }
  .dep-dash-wrap .dep-home-hero { min-height: 300px !important; padding: 38px !important; border-radius: 38px !important; }
  .dep-dash-wrap .dep-home-title { font-size: 54px !important; line-height: .98 !important; }
  .dep-dash-wrap .dep-home-hero p { font-size: 20px !important; max-width: 680px !important; }
  .dep-dash-wrap .dep-home-card-grid,
  .dep-dash-wrap .dep-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 24px !important; }
  .dep-dash-wrap .dep-ios-metric-card { min-height: 250px !important; padding: 32px !important; }
  .dep-dash-wrap .dep-stat { min-height: 160px !important; padding: 28px !important; }
}