/* ═══ DASHBOARD — extracted from locked prototype (commit 88ec757) ═══ */
/* Prefixed where needed to avoid collision with portal shell (.p-*) classes */

/* ── Additional Variables (extend portal :root) ── */
:root{
  --card:#161616;--card2:#1c1c1c;
  --lime-dark:#3a4a00;
  --red:#ff4d4d;--orange:#ff9f43;--green:#4ade80;--purple:#a855f7;
  --r:16px;--rs:10px;
}

/* ── Greeting ── */
.greeting{font-family:var(--font-d);font-size:52px;font-weight:800;margin-bottom:4px;line-height:1.05;}
.greeting-sub{font-size:15px;color:var(--gray);margin-bottom:28px;}

/* ── Top KPI Grid (2-row layout) ── */
.top-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.5fr;grid-template-rows:auto auto;gap:14px;margin-bottom:24px;}
.top-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;position:relative;overflow:hidden;}
.top-card.lime-bg{background:var(--lime);border-color:var(--lime);}
.top-card.lime-bg *{color:#000;}
.top-card.dark-bg{background:#1a1a1a;border-color:var(--border);}
.top-card.span2{grid-row:span 2;}

/* Profile Card */
.profile-card{display:flex;flex-direction:column;gap:10px;}
.profile-label{font-size:12px;color:var(--gray);background:var(--card2);display:inline-block;padding:5px 12px;border-radius:8px;margin-bottom:4px;}
.profile-name{font-family:var(--font-d);font-size:24px;font-weight:800;}
.profile-status{font-size:14px;color:var(--lime);font-weight:500;}
.profile-badge{display:inline-block;font-size:12px;font-weight:700;background:var(--lime);color:#000;padding:6px 14px;border-radius:8px;text-transform:uppercase;letter-spacing:.5px;}
.profile-add{position:absolute;bottom:16px;right:16px;width:36px;height:36px;border-radius:50%;background:var(--lime);color:#000;border:none;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;font-weight:700;}

/* Profile Card — Full-bleed background image */
.profile-card{position:relative;overflow:hidden;}
.profile-bg{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;transition:opacity .3s;
}
.profile-card.has-image .profile-bg{opacity:1;}
.profile-card.has-image .profile-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.2) 100%);
}
.profile-card-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;}
.profile-card.has-image .profile-label{background:rgba(255,255,255,.1);}
.profile-upload-hint{
  position:absolute;bottom:12px;right:16px;z-index:2;
  font-size:11px;color:var(--gray);
  opacity:0;transition:opacity .2s;
}
.profile-card:hover .profile-upload-hint{opacity:1;color:var(--lime);}

/* KPI Card */
.kpi-label{font-size:13px;color:var(--lime);font-weight:500;margin-bottom:8px;}
.kpi-val{font-family:var(--font-d);font-size:72px;font-weight:800;line-height:1;}
.kpi-sub{font-size:12px;color:var(--gray);margin-top:8px;}
.ret-dues{margin-top:12px;display:flex;flex-direction:column;gap:6px;width:100%;}
.ret-due-item{display:flex;justify-content:space-between;align-items:center;padding:5px 8px;border-radius:8px;background:rgba(255,255,255,.03);}
.ret-due-name{font-size:11px;color:var(--gray);font-weight:500;}
.ret-due-date{font-size:11px;color:var(--lime);font-weight:600;font-family:var(--font-d);}
.ret-due-date.soon{color:#ff9f43;}
.ret-due-date.overdue{color:#ff6b6b;}
.top-card.lime-bg .kpi-label{color:#333;}
.top-card.lime-bg .kpi-sub{color:#444;}

/* Operations + Calendar Panel */
.ops-panel{display:flex;flex-direction:column;gap:16px;}
.ops-head{display:flex;justify-content:space-between;align-items:flex-start;}
.ops-brand{font-size:12px;color:var(--lime);font-weight:600;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px;}
.ops-title{font-family:var(--font-d);font-size:24px;font-weight:700;}
.ops-stats{display:flex;gap:32px;margin-top:6px;}
.ops-stat-val{font-family:var(--font-d);font-size:40px;font-weight:800;}
.ops-stat-lbl{font-size:11px;color:var(--gray);}
.cal-wrap{min-height:200px;}
.cal-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;gap:8px;}
.cal-mo{font-family:var(--font-d);font-size:14px;font-weight:700;flex:1;text-align:center;}
.cal-info{font-size:11px;color:var(--gray);}
.cal-nav{color:var(--gray);font-weight:700;transition:color .15s,background .15s;border-radius:6px;}
.cal-nav:hover{color:#fff;background:rgba(255,255,255,.08);}
.cal-d[style*="cursor:pointer"]:hover{opacity:.75;transform:scale(1.08);transition:all .12s ease;}
.cal-d.has-note{position:relative;}
/* ── Calendar Note Popup ── */
.cal-note-popup{position:fixed;z-index:9999;width:220px;background:#1a1a1a;border:1px solid #333;border-radius:12px;padding:12px;box-shadow:0 8px 24px rgba(0,0,0,.5);font-family:var(--font-b);animation:calNoteFade .15s ease;}
@keyframes calNoteFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.cal-note-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.cal-note-title{font-size:11px;color:var(--gray);font-weight:600;letter-spacing:.5px;}
.cal-note-close{background:none;border:none;color:var(--gray);font-size:18px;cursor:pointer;padding:0 4px;line-height:1;}
.cal-note-close:hover{color:#fff;}
.cal-note-input{width:100%;background:#111;border:1px solid #333;border-radius:8px;padding:8px 10px;color:#fff;font-size:13px;font-family:var(--font-b);outline:none;box-sizing:border-box;}
.cal-note-input:focus{border-color:var(--lime);}
.cal-note-input::placeholder{color:#555;}
.cal-note-actions{display:flex;gap:8px;margin-top:8px;justify-content:flex-end;}
.cal-note-btn{border:none;border-radius:6px;padding:6px 12px;font-size:11px;font-weight:600;cursor:pointer;font-family:var(--font-b);}
.cal-note-save{background:var(--lime);color:#000;}
.cal-note-save:hover{opacity:.85;}
.cal-note-clear{background:transparent;color:var(--gray);border:1px solid #333;}
.cal-note-clear:hover{color:#fff;border-color:#555;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;text-align:center;}
.cal-dh{font-size:10px;color:var(--muted);padding:4px 0;font-weight:600;text-transform:uppercase;}
.cal-d{font-size:13px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:default;margin:0 auto;font-weight:600;flex-direction:column;line-height:1;}
.cal-d.avail{background:rgba(120,140,20,.45);color:rgba(220,240,120,.95);border:1px solid rgba(160,180,30,.25);}
.cal-d.limited{background:rgba(130,110,50,.4);color:rgba(200,180,100,.85);border:1px solid rgba(140,120,50,.35);}
.cal-d.off{background:rgba(255,255,255,.06);color:rgba(255,255,255,.3);border:1px solid rgba(255,255,255,.06);}
.cal-d.dim{color:rgba(255,255,255,.25);border:1px dashed rgba(255,255,255,.1);background:transparent;}
.cal-d.today{background:var(--lime);color:#000;font-weight:700;border:none;}
.cal-d .ga-sub{font-size:8px;font-weight:700;margin-top:1px;letter-spacing:.5px;}
.cal-d.empty{visibility:hidden;}
.cal-legend{display:flex;gap:14px;margin-top:8px;font-size:10px;color:var(--gray);}
.cal-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}

/* ── 3-Column Middle ── */
.mid-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:24px;}
.col-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;}
.col-head{padding:16px 18px;display:flex;justify-content:space-between;align-items:center;}
.col-title{font-family:var(--font-d);font-size:18px;font-weight:700;}
.col-badge{font-size:11px;padding:4px 10px;border-radius:8px;font-weight:700;background:var(--lime);color:#000;}
.col-badge.outline{background:transparent;border:1px solid var(--border);color:var(--gray);}
.col-body{flex:1;overflow-y:auto;}

/* Message Items */
.msg{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;border-top:1px solid var(--border);cursor:pointer;transition:background .1s;}
.msg:first-child{border-top:none;}
.msg:hover{background:rgba(255,255,255,.02);}
.msg-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#000;}
.msg-body{flex:1;min-width:0;}
.msg-name{font-size:13px;font-weight:600;margin-bottom:2px;}
.msg-prev{font-size:12px;color:var(--gray);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.msg-time{font-size:10px;color:var(--muted);white-space:nowrap;margin-top:2px;display:flex;align-items:center;gap:5px;}
.msg-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.msg-dot.unread{background:var(--lime);}
.msg-dot.read{background:transparent;}

/* Revision Notes */
.rev-item{display:flex;align-items:flex-start;gap:10px;padding:12px 18px;border-top:1px solid var(--border);}
.rev-item:first-child{border-top:none;}
.rev-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#000;}
.rev-body{flex:1;}
.rev-name{font-size:13px;font-weight:600;margin-bottom:2px;}
.rev-text{font-size:12px;color:var(--gray);}
.rev-status{font-size:10px;font-weight:600;padding:3px 8px;border-radius:6px;display:inline-block;letter-spacing:.3px;}
.rev-status.unread{background:rgba(200,255,0,.1);color:var(--lime);}
.rev-status.read{background:rgba(255,255,255,.04);color:var(--muted);}
.rev-status.urgent{background:rgba(255,77,77,.12);color:var(--red);}
.rev-status.ok{background:rgba(74,222,128,.1);color:var(--green);}

/* Client Items */
.client-item{display:flex;align-items:center;gap:10px;padding:11px 18px;border-top:1px solid var(--border);cursor:pointer;}
.client-item:first-child{border-top:none;}
.client-item:hover{background:rgba(255,255,255,.02);}
.client-av{width:32px;height:32px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#000;}
.client-info{flex:1;min-width:0;}
.client-name{font-size:13px;font-weight:600;}
.client-sub{font-size:11px;color:var(--gray);}
.client-view{font-size:11px;color:var(--muted);cursor:pointer;}
.client-view:hover{color:var(--lime);}

/* Action Buttons Row */
.action-row{display:flex;flex-wrap:wrap;gap:6px;padding:12px 18px;border-top:1px solid var(--border);}
.action-btn{padding:7px 14px;border-radius:8px;font-size:11px;font-weight:600;border:1px solid var(--border);background:var(--card2);color:var(--gray);cursor:pointer;font-family:var(--font-b);transition:all .15s;}
.action-btn:hover{border-color:var(--lime);color:var(--lime);}

/* Quick-Action Widgets (Designer + Client dashboards) */
.ret-widgets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.ret-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;border-radius:10px;
  font-size:12px;font-weight:600;font-family:var(--font-b);
  background:var(--card2);color:var(--white);
  border:1px solid var(--border);cursor:pointer;
  transition:all .15s;
}
.ret-btn:hover{border-color:var(--lime);color:var(--lime);}
.ret-icon{font-size:14px;opacity:.6;}
.ret-btn:hover .ret-icon{opacity:1;}
.ret-btn.inv-btn{border-color:rgba(200,255,0,.25);color:var(--lime);}
.ret-btn.inv-btn:hover{background:rgba(200,255,0,.08);border-color:var(--lime);}

/* ── Needs Approval ── */
.approval-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:28px 24px;}
.approval-title{font-family:var(--font-d);font-size:36px;font-weight:800;margin-bottom:24px;}
.approval-rail{display:flex;gap:16px;overflow-x:auto;padding-bottom:8px;}
.approval-rail::-webkit-scrollbar{height:4px;}
.approval-rail::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
.approval-card{flex:0 0 260px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.approval-head{display:flex;align-items:center;gap:8px;padding:12px 14px;font-size:12px;color:var(--gray);}
.approval-head .a-dot{width:8px;height:8px;border-radius:50%;background:var(--green);}
.approval-preview{width:calc(100% - 28px);margin:0 auto;aspect-ratio:9/16;max-height:320px;background:#2a2a2a;border-radius:8px;position:relative;display:flex;align-items:flex-start;padding:12px;}
.approval-preview.sq{aspect-ratio:1/1;max-height:260px;}
.approval-preview.feed{aspect-ratio:4/5;max-height:280px;}
.format-tag{font-size:11px;font-weight:700;background:var(--card2);color:var(--white);padding:4px 10px;border-radius:6px;border:1px solid var(--border);}
.approval-info{padding:10px 14px;}
.approval-client{font-size:12px;color:var(--gray);}
.approval-format{font-size:11px;color:var(--muted);}
.approval-acts{display:flex;gap:6px;padding:8px 14px 14px;}
.ap-btn{padding:8px 16px;border-radius:8px;font-size:12px;font-weight:600;border:none;cursor:pointer;font-family:var(--font-b);transition:all .15s;}
.ap-btn.approve{background:var(--lime);color:#000;}
.ap-btn.approve:hover{background:#d4ff33;}
.ap-btn.reject{background:var(--card2);color:var(--gray);border:1px solid var(--border);}
.ap-btn.reject:hover{border-color:var(--red);color:var(--red);}
.ap-btn.sent{background:#222;color:var(--muted);cursor:default;pointer-events:none;}

/* ── Toast Notification ── */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 24px;font-family:var(--font-b);font-size:13px;font-weight:500;color:var(--white);z-index:9999;display:flex;align-items:center;gap:10px;opacity:0;transition:all .3s ease;pointer-events:none;box-shadow:0 8px 32px rgba(0,0,0,.5);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.toast.success{border-color:rgba(74,222,128,.3);}
.toast.error{border-color:rgba(255,77,77,.3);}
.toast-icon{font-size:18px;flex-shrink:0;}

/* ── Designer Hero Layout (profile + stats + schedule) ── */
.ds-hero{display:grid;grid-template-columns:1fr 1fr 1.4fr;gap:14px;margin-bottom:24px;}
.ds-profile{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:260px;}
.ds-profile-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;}
.ds-profile.has-image .profile-bg{opacity:1;}
.ds-profile.has-image .profile-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.85) 0%,rgba(0,0,0,.4) 50%,rgba(0,0,0,.2) 100%);
}
.ds-profile.has-image .profile-label{background:rgba(255,255,255,.1);}
.ds-profile:hover .profile-upload-hint{opacity:1;color:var(--lime);}

/* 4-stat compact grid */
.ds-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.ds-stat{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;justify-content:center;}
.ds-stat-num{font-family:var(--font-d);font-size:42px;font-weight:800;line-height:1;}
.ds-stat-label{font-size:12px;color:var(--lime);font-weight:500;margin-top:8px;}
.ds-stat-lime{background:var(--lime);border-color:var(--lime);}
.ds-stat-lime .ds-stat-num{color:#000;}
.ds-stat-lime .ds-stat-label{color:#333;}

/* Schedule panel */
.ds-schedule{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;display:flex;flex-direction:column;gap:12px;}

/* ── Submissions (clean rows) ── */
.ds-sub-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px 24px;margin-bottom:20px;}
.ds-sub-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.ds-sub-heading{font-family:var(--font-d);font-size:18px;font-weight:700;}
.ds-sub-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--border);}
.ds-sub-row:first-of-type{border-top:none;}
.ds-sub-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.ds-sub-info{flex:1;min-width:0;}
.ds-sub-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ds-sub-client{color:var(--gray);font-weight:400;}
.ds-sub-date{font-size:11px;color:var(--muted);margin-top:2px;}
.ds-sub-pill{font-size:11px;font-weight:600;padding:4px 12px;border-radius:20px;flex-shrink:0;white-space:nowrap;}

/* ── Dashboard Responsive ── */
@media(max-width:1200px){
  .top-grid{grid-template-columns:1fr 1fr !important;}
  .top-card.span2{grid-row:span 1;}
  .ds-hero{grid-template-columns:1fr 1fr;}
  .ds-schedule{grid-column:1 / -1;}
  .mid-row{grid-template-columns:1fr !important;}
}

/* ── Team Management View ── */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:24px;}
.team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:22px;position:relative;transition:border-color .15s;cursor:pointer;}
.team-card:hover{border-color:rgba(200,255,0,.25);}
.team-card.inactive{opacity:.45;}
.team-card-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.team-av{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#000;flex-shrink:0;}
.team-av img{width:100%;height:100%;border-radius:50%;object-fit:cover;}
.team-card-info{flex:1;min-width:0;}
.team-card-name{font-family:var(--font-d);font-size:18px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.team-card-title{font-size:12px;color:var(--gray);margin-top:2px;}
.team-avail-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.team-avail-dot.available{background:var(--green);}
.team-avail-dot.limited{background:rgba(200,160,60,.85);}
.team-avail-dot.unavailable{background:rgba(255,255,255,.25);}
.team-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.team-stat{background:rgba(255,255,255,.03);border-radius:10px;padding:10px 12px;}
.team-stat-val{font-family:var(--font-d);font-size:22px;font-weight:800;line-height:1;}
.team-stat-lbl{font-size:10px;color:var(--gray);margin-top:4px;}
.team-stat-val.lime{color:var(--lime);}
.team-card-badges{display:flex;gap:6px;flex-wrap:wrap;}
.team-badge{font-size:10px;font-weight:600;padding:4px 10px;border-radius:6px;letter-spacing:.3px;}
.team-badge.role{background:var(--lime);color:#000;text-transform:uppercase;}
.team-badge.rate{background:rgba(255,255,255,.06);color:var(--gray);}
.team-badge.auto{background:rgba(74,222,128,.1);color:var(--green);}
.team-badge.deactivated{background:rgba(255,77,77,.1);color:var(--red);}

/* Add Member Card */
.team-card-add{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:2px dashed rgba(255,255,255,.1);background:transparent;min-height:240px;cursor:pointer;transition:border-color .15s;}
.team-card-add:hover{border-color:var(--lime);}
.team-add-icon{width:48px;height:48px;border-radius:50%;background:var(--lime);color:#000;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;}
.team-add-label{font-size:13px;color:var(--gray);font-weight:500;}

/* Team Modal Overlay */
.team-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.team-modal{background:#1a1a1a;border:1px solid var(--border);border-radius:20px;padding:32px;width:100%;max-width:440px;position:relative;}
.team-modal-title{font-family:var(--font-d);font-size:24px;font-weight:800;margin-bottom:4px;}
.team-modal-sub{font-size:13px;color:var(--gray);margin-bottom:24px;}
.team-modal-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);border:none;color:var(--gray);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;}
.team-modal-close:hover{background:rgba(255,255,255,.12);color:var(--white);}
.tm-field{margin-bottom:16px;}
.tm-label{font-size:12px;color:var(--gray);font-weight:600;margin-bottom:6px;display:block;}
.tm-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--white);font-family:var(--font-b);font-size:14px;}
.tm-input:focus{outline:none;border-color:var(--lime);}
.tm-select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--white);font-family:var(--font-b);font-size:14px;-webkit-appearance:none;appearance:none;}
.tm-select:focus{outline:none;border-color:var(--lime);}
.tm-row{display:flex;gap:12px;}
.tm-row .tm-field{flex:1;}
.tm-btn{width:100%;padding:14px;border:none;border-radius:12px;font-family:var(--font-b);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s;}
.tm-btn.primary{background:var(--lime);color:#000;}
.tm-btn.primary:hover{background:#d4ff33;}
.tm-btn.danger{background:rgba(255,77,77,.12);color:var(--red);margin-top:8px;}
.tm-btn.danger:hover{background:rgba(255,77,77,.2);}
.tm-btn:disabled{opacity:.5;cursor:default;}
.tm-toggle{display:flex;align-items:center;gap:10px;cursor:pointer;}
.tm-toggle-track{width:40px;height:22px;border-radius:11px;background:rgba(255,255,255,.1);position:relative;transition:background .2s;flex-shrink:0;}
.tm-toggle-track.on{background:var(--lime);}
.tm-toggle-thumb{width:18px;height:18px;border-radius:50%;background:var(--white);position:absolute;top:2px;left:2px;transition:left .2s;}
.tm-toggle-track.on .tm-toggle-thumb{left:20px;}
.tm-toggle-label{font-size:13px;color:var(--gray);}
.tm-msg{font-size:13px;margin-top:12px;text-align:center;}
.tm-msg.success{color:var(--green);}
.tm-msg.error{color:var(--red);}

/* Team Summary Bar */
.team-summary{display:flex;gap:24px;margin-bottom:24px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);}
.team-summary-item{display:flex;flex-direction:column;}
.team-summary-val{font-family:var(--font-d);font-size:28px;font-weight:800;}
.team-summary-val.lime{color:var(--lime);}
.team-summary-lbl{font-size:11px;color:var(--gray);margin-top:2px;}

/* Dashboard scrollbar */
.p-content::-webkit-scrollbar{width:6px;}
.p-content::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}

/* ── Designer First-Login Setup ── */
.setup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.8);z-index:3000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);}
.setup-card{background:#1a1a1a;border:1px solid var(--border);border-radius:24px;padding:40px;width:100%;max-width:460px;text-align:center;}
.setup-logo{font-family:var(--font-d);font-size:14px;font-weight:800;color:var(--lime);letter-spacing:1px;margin-bottom:24px;}
.setup-title{font-family:var(--font-d);font-size:28px;font-weight:800;margin-bottom:6px;}
.setup-sub{font-size:13px;color:var(--gray);margin-bottom:28px;}
.setup-avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:24px;}
.setup-avatar{width:80px;height:80px;border-radius:50%;background:var(--card);border:2px dashed rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:28px;color:var(--muted);cursor:pointer;overflow:hidden;transition:border-color .15s;}
.setup-avatar:hover{border-color:var(--lime);}
.setup-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.setup-avatar-label{font-size:11px;color:var(--gray);}
.setup-field{text-align:left;margin-bottom:16px;}
.setup-field label{font-size:12px;color:var(--gray);font-weight:600;margin-bottom:6px;display:block;}
.setup-input{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--border);background:var(--card);color:var(--white);font-family:var(--font-b);font-size:14px;}
.setup-input:focus{outline:none;border-color:var(--lime);}
.setup-terms{display:flex;align-items:flex-start;gap:10px;margin:20px 0;text-align:left;}
.setup-terms input[type="checkbox"]{width:18px;height:18px;accent-color:var(--lime);flex-shrink:0;margin-top:2px;}
.setup-terms label{font-size:12px;color:var(--gray);line-height:1.4;cursor:pointer;}
.setup-terms a{color:var(--lime);text-decoration:underline;}
.setup-btn{width:100%;padding:14px;border:none;border-radius:12px;font-family:var(--font-b);font-size:14px;font-weight:700;cursor:pointer;background:var(--lime);color:#000;transition:all .15s;}
.setup-btn:hover{background:#d4ff33;}
.setup-btn:disabled{opacity:.4;cursor:default;}
.setup-msg{font-size:13px;margin-top:12px;text-align:center;}
.setup-msg.error{color:var(--red);}
.setup-msg.success{color:var(--green);}
.setup-step{display:none;}
.setup-step.active{display:block;}

/* ── Designer Availability Calendar (Interactive) ── */
.avail-section{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:24px;margin-bottom:24px;}
.avail-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.avail-title{font-family:var(--font-d);font-size:20px;font-weight:700;}
.avail-nav{display:flex;gap:8px;}
.avail-nav-btn{width:32px;height:32px;border-radius:8px;background:var(--card2);border:1px solid var(--border);color:var(--gray);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;}
.avail-nav-btn:hover{border-color:var(--lime);color:var(--lime);}
.avail-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center;}
.avail-dh{font-size:10px;color:var(--muted);padding:6px 0;font-weight:600;text-transform:uppercase;}
.avail-day{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;border:1px solid transparent;}
.avail-day.available{background:rgba(120,140,20,.45);color:rgba(220,240,120,.95);border-color:rgba(160,180,30,.25);}
.avail-day.unavailable{background:rgba(255,255,255,.04);color:rgba(255,255,255,.25);border-color:rgba(255,255,255,.06);}
.avail-day.empty{visibility:hidden;cursor:default;}
.avail-day.past{opacity:.35;cursor:default;}
.avail-day.today{box-shadow:inset 0 0 0 2px var(--lime);}
.avail-day:hover:not(.empty):not(.past){transform:scale(1.08);}
.avail-legend{display:flex;gap:16px;margin-top:12px;font-size:11px;color:var(--gray);}
.avail-legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px;vertical-align:middle;}

/* ── My Earnings View ── */
.earnings-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px;}
.earnings-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;}
.earnings-card-val{font-family:var(--font-d);font-size:32px;font-weight:800;line-height:1;}
.earnings-card-val.lime{color:var(--lime);}
.earnings-card-val.green{color:var(--green);}
.earnings-card-lbl{font-size:11px;color:var(--gray);margin-top:6px;}
.earnings-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.earnings-table th{font-size:11px;color:var(--gray);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.earnings-table td{font-size:13px;padding:12px 16px;border-bottom:1px solid var(--border);}
.earnings-table tr:last-child td{border-bottom:none;}
.earnings-table tr:hover{background:rgba(255,255,255,.02);}
.earnings-status{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;display:inline-block;}
.earnings-status.owed{background:rgba(200,255,0,.1);color:var(--lime);}
.earnings-status.paid{background:rgba(74,222,128,.1);color:var(--green);}
.earnings-rush{font-size:11px;color:var(--orange);font-weight:600;}

/* ═══ PROJECTS VIEW ═══ */
.proj-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:12px;flex-wrap:wrap;}
.proj-filters{display:flex;gap:6px;flex-wrap:wrap;}
.proj-filter{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--gray);font-size:12px;font-weight:600;padding:6px 14px;cursor:pointer;transition:all .15s;}
.proj-filter:hover{background:rgba(255,255,255,.1);color:#fff;}
.proj-filter.active{background:var(--lime);color:#000;border-color:var(--lime);}
.proj-create-btn{background:var(--lime);color:#000;border:none;border-radius:8px;font-size:13px;font-weight:700;padding:8px 18px;cursor:pointer;white-space:nowrap;}
.proj-create-btn:hover{opacity:.85;}
.proj-grid{display:flex;flex-direction:column;gap:24px;}
.proj-loading{text-align:center;padding:40px;color:var(--gray);font-size:14px;}
.proj-status-group{}
.proj-status-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.proj-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;}
.proj-status-label{font-size:14px;font-weight:700;color:#fff;}
.proj-status-count{font-size:12px;color:var(--gray);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:10px;}
.proj-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px;}
.proj-empty{font-size:12px;color:rgba(255,255,255,.25);padding:12px 0;}
.proj-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:14px 16px;cursor:pointer;transition:border-color .15s,background .15s;}
.proj-card:hover{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.06);}
.proj-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px;}
.proj-card-title{font-size:14px;font-weight:700;color:#fff;line-height:1.3;}
.proj-rush{font-size:10px;font-weight:700;background:rgba(255,159,67,.15);color:var(--orange);padding:2px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0;}
.proj-type{font-size:10px;font-weight:600;background:rgba(167,139,250,.12);color:#a78bfa;padding:2px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0;}
.proj-card-client{font-size:12px;color:var(--gray);margin-bottom:10px;}
.proj-card-bottom{display:flex;justify-content:space-between;align-items:center;}
.proj-designer{font-size:12px;color:rgba(255,255,255,.7);display:flex;align-items:center;gap:5px;}
.proj-designer-dot{width:7px;height:7px;border-radius:50%;background:var(--lime);flex-shrink:0;}
.proj-assign-btn{background:rgba(200,255,0,.08);color:var(--lime);border:1px solid rgba(200,255,0,.2);border-radius:6px;font-size:11px;font-weight:600;padding:4px 10px;cursor:pointer;display:flex;align-items:center;gap:4px;}
.proj-assign-btn:hover{background:rgba(200,255,0,.15);}
.proj-assign-btn svg{width:12px;height:12px;}
.proj-card-meta{font-size:11px;color:var(--gray);}

/* ── Project Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:2000;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);}
.modal-card{background:#1a1a1a;border:1px solid var(--border);border-radius:20px;padding:32px;width:100%;max-width:440px;position:relative;}
.modal-head{font-family:var(--font-d);font-size:22px;font-weight:800;margin-bottom:4px;color:#fff;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;}

/* Assign Modal */
.assign-list{max-height:260px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;}
.assign-designer-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;transition:all .15s;}
.assign-designer-row:hover{background:rgba(255,255,255,.05);}
.assign-designer-row.selected{border-color:var(--lime);background:rgba(200,255,0,.06);}
.assign-av{width:36px;height:36px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;object-fit:cover;}
img.assign-av{object-fit:cover;}
.assign-info{flex:1;min-width:0;}
.assign-name{font-size:13px;font-weight:600;color:#fff;}
.assign-meta{font-size:11px;color:var(--gray);}

/* Status Flow */
.status-flow{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-bottom:16px;}
.status-btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--gray);font-size:11px;font-weight:600;padding:6px 12px;cursor:pointer;transition:all .15s;}
.status-btn:hover{border-color:var(--sc,var(--lime));color:var(--sc,var(--lime));background:rgba(255,255,255,.08);}
.status-btn.current{border-color:var(--sc,var(--lime));color:var(--sc,var(--lime));background:color-mix(in srgb, var(--sc,var(--lime)) 12%, transparent);}
.status-arrow{color:rgba(255,255,255,.2);font-size:12px;}

/* ── Upload Drop Zone ── */
.upload-drop-zone{border:2px dashed rgba(255,255,255,.15);border-radius:12px;padding:32px 20px;text-align:center;cursor:pointer;transition:all .2s;}
.upload-drop-zone:hover,.upload-drop-zone.drag-over{border-color:var(--lime);background:rgba(200,255,0,.04);}
.upload-drop-icon{font-size:28px;margin-bottom:8px;opacity:.5;}
.upload-drop-text{font-size:13px;font-weight:600;color:#fff;margin-bottom:4px;}
.upload-drop-sub{font-size:11px;color:var(--gray);}
.upload-file-name{font-size:12px;color:var(--lime);font-weight:600;margin-top:8px;}

/* ── Approval Count Badge ── */
.approval-count{font-size:12px;font-weight:600;background:rgba(255,159,67,.15);color:var(--orange);padding:2px 8px;border-radius:8px;margin-left:8px;}

/* ══════════════════════════════════════════
   MESSAGING SYSTEM
   ══════════════════════════════════════════ */

/* Messages View — split panel */
.msg-view{display:grid;grid-template-columns:320px 1fr;gap:0;height:calc(100vh - 180px);min-height:400px;border:1px solid rgba(255,255,255,.06);border-radius:14px;overflow:hidden;background:rgba(255,255,255,.02);}
.msg-threads-panel{border-right:1px solid rgba(255,255,255,.06);overflow-y:auto;}
.msg-thread-detail{display:flex;flex-direction:column;overflow:hidden;}

/* Thread list items */
.msg-thread-item{display:flex;align-items:center;gap:10px;padding:14px 16px;cursor:pointer;transition:background .15s;border-bottom:1px solid rgba(255,255,255,.04);}
.msg-thread-item:hover{background:rgba(255,255,255,.04);}
.msg-thread-item.active{background:rgba(200,255,0,.06);border-left:3px solid var(--lime);}
.msg-thread-item.has-unread .msg-name{color:var(--lime);}

/* Thread detail head */
.thread-detail-head{padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;}
.thread-detail-title{font-weight:700;font-size:15px;}
.thread-detail-meta{font-size:12px;color:var(--gray);background:rgba(255,255,255,.06);padding:3px 10px;border-radius:8px;}

/* Thread empty state */
.thread-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--gray);font-size:14px;}

/* Thread messages container */
.thread-messages{flex:1;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px;}

/* Message bubbles */
.thread-msg{display:flex;align-items:flex-start;gap:10px;max-width:85%;}
.thread-msg.mine{margin-left:auto;justify-content:flex-end;}
.thread-msg-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;}
.thread-msg-body{background:rgba(255,255,255,.06);border-radius:14px;padding:10px 14px;max-width:100%;}
.thread-msg.mine .thread-msg-body{background:rgba(200,255,0,.12);border-radius:14px;}
.thread-msg-sender{font-size:11px;font-weight:700;color:var(--lime);margin-bottom:4px;}
.thread-msg-text{font-size:13px;line-height:1.5;color:#fff;word-break:break-word;}
.thread-msg-time{font-size:10px;color:var(--gray);margin-top:4px;}

/* Compose bar */
.thread-compose{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.2);}
.thread-compose-row{display:flex;gap:8px;}
.msg-confidential{font-size:10px;color:var(--muted);line-height:1.4;padding:0 2px;opacity:.7;}
.thread-input{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px 14px;font-size:13px;color:#fff;outline:none;font-family:inherit;}
.thread-input:focus{border-color:var(--lime);}
.thread-input::placeholder{color:rgba(255,255,255,.3);}
.thread-send{background:var(--lime);border:none;border-radius:10px;padding:8px 14px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#000;transition:opacity .15s;}
.thread-send:hover{opacity:.85;}
.thread-send svg{width:16px;height:16px;stroke:#000;}

/* Thread section in status modal */
.thread-section{margin-top:16px;border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;}
.thread-section .thread-messages{max-height:250px;min-height:80px;}
.thread-head{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:600;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(255,255,255,.02);}
.thread-head svg{width:14px;height:14px;opacity:.5;}

/* Wide modal for project detail with thread */
.modal-card-wide{max-width:580px;width:95%;}

/* ═══ CLIENTS VIEW ═══ */

/* Summary bar */
.clients-summary{display:flex;gap:24px;margin-bottom:24px;padding:16px 20px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);}
.clients-summary-item{display:flex;flex-direction:column;}
.clients-summary-val{font-family:var(--font-d);font-size:28px;font-weight:800;}
.clients-summary-val.lime{color:var(--lime);}
.clients-summary-lbl{font-size:11px;color:var(--gray);margin-top:2px;}

/* Section heads */
.clients-section-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;}
.clients-section-title{font-family:var(--font-d);font-size:20px;font-weight:700;}
.clients-section-count{font-size:12px;color:var(--gray);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:10px;font-weight:600;}

/* Retainer grid */
.retainer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;}
.retainer-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;cursor:pointer;transition:border-color .15s;}
.retainer-card:hover{border-color:rgba(200,255,0,.25);}
.retainer-card.over-limit{border-color:rgba(255,77,77,.3);}
.retainer-card-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.retainer-card-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#000;flex-shrink:0;overflow:hidden;}
.retainer-card-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.retainer-card-info{flex:1;min-width:0;}
.retainer-card-name{font-family:var(--font-d);font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.retainer-card-email{font-size:11px;color:var(--gray);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.retainer-plan-badge{font-size:10px;font-weight:700;padding:4px 10px;border-radius:6px;letter-spacing:.3px;text-transform:uppercase;flex-shrink:0;}
.retainer-plan-badge.platinum{background:rgba(168,85,247,.12);color:#a855f7;}
.retainer-plan-badge.gold{background:rgba(234,179,8,.12);color:#eab308;}
.retainer-plan-badge.silver{background:rgba(148,163,184,.12);color:#94a3b8;}
.retainer-card-amount{font-family:var(--font-d);font-size:28px;font-weight:800;margin-bottom:16px;}
.retainer-card-amount span{font-size:14px;font-weight:500;color:var(--gray);}

/* Usage rings */
.retainer-rings{display:flex;gap:24px;justify-content:center;margin-bottom:16px;}
.ring-group{display:flex;flex-direction:column;align-items:center;gap:6px;}
.usage-ring{position:relative;width:72px;height:72px;}
.usage-ring svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-bg{fill:none;stroke:rgba(255,255,255,.06);stroke-width:3;}
.ring-fill{fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dasharray .6s ease;}
.ring-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-d);font-size:14px;font-weight:800;}
.ring-caption{font-size:11px;color:var(--gray);text-align:center;line-height:1.3;}
.ring-caption span{font-weight:700;color:rgba(255,255,255,.7);}

/* Retainer card footer */
.retainer-card-footer{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--gray);}
.retainer-projects{font-weight:600;color:var(--lime);}

/* Regular customers grid */
.regular-grid{display:flex;flex-direction:column;gap:2px;}
.regular-card{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--card);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .15s;}
.regular-card:hover{border-color:rgba(200,255,0,.15);}
.regular-card-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#000;flex-shrink:0;overflow:hidden;}
.regular-card-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.regular-card-info{flex:1;min-width:0;}
.regular-card-name{font-size:14px;font-weight:600;}
.regular-card-meta{font-size:11px;color:var(--gray);}
.regular-card-active{font-size:12px;font-weight:600;color:var(--lime);white-space:nowrap;}

/* Client detail modal extras */
.client-detail-plan{background:rgba(255,255,255,.03);border-radius:10px;padding:14px 16px;margin-bottom:14px;}
.client-detail-plan-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:13px;}
.client-detail-plan-row span:first-child{color:var(--gray);}
.client-detail-usage{margin-bottom:16px;display:flex;flex-direction:column;gap:10px;}
.client-detail-usage-bar{}
.client-detail-usage-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:4px;}
.client-detail-usage-label span{font-weight:600;color:var(--gray);}
.usage-bar-wrap{height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden;}
.usage-bar-fill{height:100%;border-radius:3px;transition:width .4s ease;}
.usage-bar-fill.lime{background:var(--lime);}
.usage-bar-fill.orange{background:var(--orange);}
.usage-bar-fill.red{background:var(--red);}
.usage-bar-fill.green{background:var(--green);}
.client-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.client-detail-stat{background:rgba(255,255,255,.03);border-radius:10px;padding:12px;text-align:center;}
.client-detail-stat-val{font-family:var(--font-d);font-size:18px;font-weight:800;}
.client-detail-stat-lbl{font-size:10px;color:var(--gray);margin-top:4px;}

/* (mobile rules consolidated in Session 16 block below) */

/* ═══ BILLING VIEW ═══ */

/* KPI summary bar */
.billing-summary{display:flex;gap:20px;margin-bottom:20px;padding:18px 22px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);}
.billing-kpi{display:flex;flex-direction:column;}
.billing-kpi-val{font-family:var(--font-d);font-size:28px;font-weight:800;line-height:1;}
.billing-kpi-val.lime{color:var(--lime);}
.billing-kpi-lbl{font-size:11px;color:var(--gray);margin-top:6px;}

/* Toolbar (filters + create btn) */
.billing-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;gap:12px;flex-wrap:wrap;}
.billing-filters{display:flex;gap:6px;flex-wrap:wrap;}

/* Invoice table */
.billing-table{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;}
.billing-table thead{background:rgba(255,255,255,.03);}
.billing-table th{font-size:11px;color:var(--gray);text-align:left;padding:12px 16px;border-bottom:1px solid var(--border);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.billing-table td{font-size:13px;padding:12px 16px;border-bottom:1px solid var(--border);color:rgba(255,255,255,.85);}
.billing-table tr:last-child td{border-bottom:none;}
.billing-table tr:hover{background:rgba(255,255,255,.02);}
.billing-client{font-weight:600;color:#fff;}
.billing-amount{font-family:var(--font-d);font-weight:700;}
.billing-project{color:var(--gray);font-size:12px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.billing-date{font-size:12px;color:var(--gray);white-space:nowrap;}

/* Status badges */
.billing-status{font-size:11px;font-weight:600;padding:3px 10px;border-radius:6px;display:inline-block;text-transform:capitalize;letter-spacing:.3px;}
.billing-status.paid{background:rgba(74,222,128,.1);color:var(--green);}
.billing-status.sent{background:rgba(200,255,0,.1);color:var(--lime);}
.billing-status.pending{background:rgba(255,159,67,.12);color:var(--orange);}
.billing-status.cancelled{background:rgba(255,255,255,.06);color:var(--muted);text-decoration:line-through;}

/* Type badges */
.billing-type-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:6px;display:inline-block;text-transform:uppercase;letter-spacing:.3px;}
.billing-type-badge.order{background:rgba(200,255,0,.08);color:var(--lime);}
.billing-type-badge.retainer{background:rgba(168,85,247,.12);color:#a855f7;}
.billing-type-badge.overage{background:rgba(255,77,77,.1);color:var(--red);}
.billing-type-badge.custom{background:rgba(255,159,67,.1);color:var(--orange);}
.billing-type-badge.cancellation{background:rgba(255,255,255,.06);color:var(--muted);}

/* Action buttons in table rows */
.billing-actions{display:flex;gap:6px;align-items:center;}
.billing-act-btn{width:28px;height:28px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--gray);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.billing-act-btn:hover{border-color:var(--lime);color:var(--lime);background:rgba(200,255,0,.06);}
.billing-act-btn.cancel:hover{border-color:var(--red);color:var(--red);background:rgba(255,77,77,.08);}
.billing-sq-badge{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--lime);background:rgba(200,255,0,.08);border-radius:4px;}

/* Empty state */
.billing-empty{text-align:center;padding:48px 20px;color:var(--gray);font-size:14px;}

/* Billing responsive */
@media(max-width:1200px){
  .billing-summary{flex-wrap:wrap;gap:16px;}
}

/* ═══ DESIGNER PAY VIEW ═══ */

/* Pay KPI summary */
.pay-summary{display:flex;gap:20px;margin-bottom:20px;padding:18px 22px;background:var(--card);border:1px solid var(--border);border-radius:var(--r);}
.pay-kpi{display:flex;flex-direction:column;}
.pay-kpi-val{font-family:var(--font-d);font-size:28px;font-weight:800;line-height:1;}
.pay-kpi-val.lime{color:var(--lime);}
.pay-kpi-val.green{color:var(--green);}
.pay-kpi-lbl{font-size:11px;color:var(--gray);margin-top:6px;}

/* Rush settings panel */
.pay-rush-settings{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:20px;}
.pay-rush-title{font-family:var(--font-d);font-size:15px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.pay-rush-title svg{opacity:.5;}
.pay-rush-row{display:flex;gap:12px;align-items:flex-end;}
.pay-rush-field{display:flex;flex-direction:column;gap:4px;}
.pay-rush-field label{font-size:11px;color:var(--gray);font-weight:600;}
.pay-rush-field .tm-input{width:120px;}
.pay-rush-save{background:var(--lime);color:#000;border:none;border-radius:8px;font-size:12px;font-weight:700;padding:10px 18px;cursor:pointer;white-space:nowrap;height:42px;}
.pay-rush-save:hover{opacity:.85;}
.pay-rush-note{font-size:11px;color:var(--gray);margin-top:10px;}

/* Designer pay cards grid */
.pay-designer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;}
.pay-designer-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .15s;}
.pay-designer-card.has-owed{border-color:rgba(200,255,0,.2);}
.pay-designer-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.pay-designer-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#000;flex-shrink:0;overflow:hidden;}
.pay-designer-av img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.pay-designer-info{flex:1;min-width:0;}
.pay-designer-name{font-family:var(--font-d);font-size:16px;font-weight:700;}
.pay-designer-title{font-size:11px;color:var(--gray);margin-top:2px;}
.pay-designer-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;}
.pay-stat{background:rgba(255,255,255,.03);border-radius:8px;padding:10px 12px;}
.pay-stat-val{font-family:var(--font-d);font-size:18px;font-weight:800;line-height:1;}
.pay-stat-val.lime{color:var(--lime);}
.pay-stat-val.green{color:var(--green);}
.pay-stat-lbl{font-size:10px;color:var(--gray);margin-top:4px;}
.pay-mark-btn{width:100%;padding:10px;border:none;border-radius:10px;font-family:var(--font-b);font-size:12px;font-weight:700;cursor:pointer;background:var(--lime);color:#000;transition:all .15s;}
.pay-mark-btn:hover{background:#d4ff33;}
.pay-all-clear{width:100%;padding:10px;text-align:center;font-size:12px;color:var(--gray);background:rgba(255,255,255,.03);border-radius:10px;}

/* Rush info in create project modal */
.rush-info{display:flex;align-items:center;gap:8px;padding:10px 14px;background:rgba(255,159,67,.08);border:1px solid rgba(255,159,67,.2);border-radius:10px;font-size:12px;color:var(--orange);margin-bottom:4px;}
.rush-info-icon{font-size:16px;flex-shrink:0;}

/* Pay responsive */
@media(max-width:1200px){
  .pay-summary{flex-wrap:wrap;gap:16px;}
}

/* ══════ CLIENT PORTAL (Session 11) ══════ */

/* Usage rings row */
.usage-row{display:flex;gap:32px;justify-content:center;padding:20px 0;}
.usage-wrap{display:flex;flex-direction:column;align-items:center;gap:6px;}
.usage-ring{position:relative;width:80px;height:80px;}
.usage-ring svg{transform:rotate(-90deg);width:80px;height:80px;}
.usage-ring .ring-bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:6;}
.usage-ring .ring-fill{fill:none;stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset .6s ease;}
.usage-center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;color:#fff;}
.usage-lbl{font-size:11px;color:var(--muted);font-weight:500;}

/* Client detail back link */
.client-detail-back{font-size:13px;color:var(--lime);cursor:pointer;margin-bottom:16px;display:inline-flex;align-items:center;gap:4px;}
.client-detail-back:hover{text-decoration:underline;}

/* Client pipeline */
.client-pipeline{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:20px;padding:12px 16px;background:rgba(255,255,255,.04);border-radius:10px;}
.client-pipeline span{padding:4px 10px;border-radius:6px;}
.client-pipeline span.active{background:var(--lime);color:#0a0a0a;font-weight:600;}

/* Client detail actions */
.client-detail-actions{display:flex;gap:10px;margin-bottom:20px;}

/* Client message thread */
.client-thread-section{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px;margin-bottom:20px;}
.client-thread{max-height:300px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin-bottom:12px;}
.thread-msg{padding:10px 14px;border-radius:10px;max-width:80%;}
.thread-msg.sent{align-self:flex-end;background:rgba(200,255,0,.08);border:1px solid rgba(200,255,0,.15);}
.thread-msg.received{align-self:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);}
.thread-sender{font-size:11px;font-weight:600;color:var(--lime);margin-bottom:2px;}
.thread-msg.sent .thread-sender{color:var(--lime);}
.thread-body{font-size:13px;color:#fff;line-height:1.4;}
.thread-time{font-size:10px;color:var(--muted);margin-top:4px;}
.client-msg-input{display:flex;gap:8px;align-items:center;}
.client-msg-input .tm-input{flex:1;}

/* Client detail meta */
.client-detail-meta{padding:14px 16px;background:rgba(255,255,255,.03);border-radius:10px;}

/* Client proof section */
.client-proof-section{margin-bottom:20px;}
.client-proof-thumb{display:inline-block;width:120px;height:80px;margin-right:10px;}

/* Client request form */
.client-request-form{max-width:560px;display:flex;flex-direction:column;gap:14px;}

/* Lime button (reusable) */
.lime-btn{background:var(--lime);color:#0a0a0a;border:none;padding:10px 20px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s;}
.lime-btn:hover{opacity:.9;}

/* (client portal mobile rules consolidated in Session 16 block) */

/* ═══ MANAGER DASHBOARD ═══ */

/* Quick project rows on dashboard */
.mgr-projects-quick{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:18px 22px;margin-bottom:24px;}
.mgr-proj-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.mgr-proj-row:last-child{border-bottom:none;}
.mgr-proj-title{flex:1;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px;}
.mgr-proj-meta{font-size:12px;color:var(--gray);}
.mgr-proj-status{font-size:11px;font-weight:600;}
.mgr-proj-status.ok{color:var(--green);}
.mgr-proj-status.pending{color:var(--orange);}
.mgr-proj-status.urgent{color:var(--red);}

/* Rush tag */
.rush-tag{display:inline-block;font-size:10px;font-weight:700;background:rgba(255,159,67,.15);color:var(--orange);padding:2px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;}

/* Team view */
.mgr-team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px;}
.mgr-team-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;}
.mgr-team-header{display:flex;align-items:center;gap:14px;margin-bottom:14px;}
.mgr-team-info{flex:1;}
.mgr-team-name{font-size:16px;font-weight:700;}
.mgr-team-role{font-size:12px;color:var(--gray);}
.mgr-team-stats{display:flex;gap:16px;text-align:center;}
.mgr-team-stat-val{font-size:20px;font-weight:800;font-family:var(--font-d);}
.mgr-team-stat-val.lime{color:var(--lime);}
.mgr-team-stat-lbl{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;}
.mgr-team-projects{border-top:1px solid var(--border);padding-top:12px;display:flex;flex-direction:column;gap:6px;}
.mgr-team-proj{display:flex;align-items:center;gap:8px;font-size:12px;padding:6px 0;}
.mgr-team-proj-name{flex:1;font-weight:600;display:flex;align-items:center;gap:4px;}
.mgr-team-proj-client{color:var(--gray);}
.mgr-team-proj-dl{color:var(--gray);font-size:11px;}
.mgr-team-proj-status{font-size:11px;font-weight:600;color:var(--lime);text-transform:capitalize;}

/* Projects view */
.mgr-proj-group{margin-bottom:20px;}
.mgr-proj-group-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);}
.mgr-proj-group-dot{width:8px;height:8px;border-radius:50%;}
.mgr-proj-group-label{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.mgr-proj-group-count{font-size:12px;color:var(--gray);background:var(--card2);padding:2px 8px;border-radius:6px;}
.mgr-proj-card{background:var(--card);border:1px solid var(--border);border-radius:var(--rs);padding:14px 18px;margin-bottom:8px;cursor:pointer;transition:border-color .15s;}
.mgr-proj-card:hover{border-color:var(--lime);}
.mgr-proj-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.mgr-proj-card-meta{font-size:12px;color:var(--gray);margin-top:4px;}
.mgr-proj-dot{margin:0 4px;}
.mgr-proj-dl{font-size:11px;color:var(--orange);font-weight:600;}

/* Project detail */
.mgr-detail-back{font-size:13px;color:var(--lime);cursor:pointer;margin-bottom:16px;font-weight:600;}
.mgr-detail-back:hover{text-decoration:underline;}
.mgr-detail-grid{display:grid;grid-template-columns:280px 1fr;gap:20px;margin-top:20px;}
.mgr-detail-info{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;}
.mgr-detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid var(--border);}
.mgr-detail-row:last-child{border-bottom:none;}
.mgr-detail-label{font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.5px;}
.mgr-detail-val{font-size:14px;font-weight:600;text-transform:capitalize;}
.mgr-detail-msgs{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;}
.mgr-detail-msgs .col-body{flex:1;max-height:400px;overflow-y:auto;}
.mgr-detail-compose{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);}
.mgr-msg-input{flex:1;background:var(--card2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:#fff;font-size:13px;outline:none;}
.mgr-msg-input:focus{border-color:var(--lime);}
.mgr-msg-send{background:var(--lime);color:#0a0a0a;border:none;border-radius:8px;padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;}
.mgr-msg-send:hover{opacity:.9;}
.mgr-msg-role{display:inline-block;font-size:10px;font-weight:700;background:rgba(200,255,0,.12);color:var(--lime);padding:2px 6px;border-radius:4px;margin-left:6px;}

/* Messages view */
.mgr-messages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px;}
.mgr-msg-thread{margin-bottom:0;}

/* (manager mobile rules consolidated in Session 16 block) */

/* ═══ Notification Bell & Panel (Session 14) ═══ */

/* Bell button in sidebar rail */
.notif-bell{position:relative;}
.notif-bell svg{width:20px;height:20px;}

/* Unread count badge */
.notif-badge{
  position:absolute;top:4px;right:4px;
  min-width:16px;height:16px;
  background:var(--red);color:#fff;
  font-size:10px;font-weight:700;
  line-height:16px;text-align:center;
  border-radius:10px;padding:0 4px;
  pointer-events:none;
  animation:notifPulse .3s ease;
}
@keyframes notifPulse{
  0%{transform:scale(0)}
  60%{transform:scale(1.2)}
  100%{transform:scale(1)}
}

/* Dropdown panel */
.notif-panel{
  position:fixed;bottom:70px;left:66px;
  width:360px;max-height:480px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
  z-index:9000;
  display:flex;flex-direction:column;
  animation:notifSlideIn .2s ease;
}
@keyframes notifSlideIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Panel header */
.notif-panel-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.notif-panel-head span{
  font-size:15px;font-weight:700;
  font-family:var(--font-d);
}

/* Mark all read button */
.notif-mark-all{
  background:none;border:none;color:var(--lime);
  font-size:12px;font-weight:600;cursor:pointer;
  padding:4px 8px;border-radius:6px;
  transition:background .15s;
}
.notif-mark-all:hover{background:rgba(200,255,0,.1);}

/* Scrollable body */
.notif-panel-body{
  flex:1;overflow-y:auto;max-height:400px;
}
.notif-panel-body::-webkit-scrollbar{width:4px;}
.notif-panel-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px;}

/* Individual notification item */
.notif-item{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background .15s;
}
.notif-item:last-child{border-bottom:none;}
.notif-item:hover{background:rgba(255,255,255,.03);}
.notif-item.unread{background:rgba(200,255,0,.04);}

/* Unread dot */
.notif-item-dot{
  width:8px;height:8px;min-width:8px;
  border-radius:50%;background:var(--lime);
  margin-top:5px;
}
.notif-item.read .notif-item-dot{background:transparent;}

/* Notification icon */
.notif-item-icon{
  width:32px;height:32px;min-width:32px;
  border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.notif-item-icon.assign{background:rgba(168,85,247,.15);}
.notif-item-icon.deliver{background:rgba(74,222,128,.15);}
.notif-item-icon.revision{background:rgba(255,159,67,.15);}
.notif-item-icon.proof{background:rgba(200,255,0,.15);}
.notif-item-icon.message{background:rgba(96,165,250,.15);}
.notif-item-icon.reminder{background:rgba(255,77,77,.15);}
.notif-item-icon.default{background:rgba(255,255,255,.08);}

/* Content text */
.notif-item-content{flex:1;min-width:0;}
.notif-item-msg{
  font-size:13px;line-height:1.4;
  color:rgba(255,255,255,.85);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.notif-item.read .notif-item-msg{color:var(--gray);}
.notif-item-time{
  font-size:11px;color:var(--gray);margin-top:3px;
}

/* Empty state */
.notif-empty{
  padding:40px 16px;text-align:center;
  color:var(--gray);font-size:13px;
}
.notif-empty svg{width:32px;height:32px;opacity:.4;margin-bottom:8px;}

/* (notification mobile rules consolidated in Session 16 block) */

/* ═══ Session 15: Terms Modal, Cancel Modal, Bulk Toolbar, SLA ═══ */

/* ── Shared overlay ── */
.terms-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.7);
  backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;
  z-index:10000;
  animation:fadeIn .2s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ── Terms Modal ── */
.terms-modal{
  width:560px;max-width:92vw;max-height:85vh;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;
  animation:modalSlide .25s ease;
}
@keyframes modalSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

.terms-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--border);
}
.terms-modal-head span:first-child{
  font-family:var(--font-d);font-size:18px;font-weight:800;
}
.terms-updated-badge{
  font-size:11px;font-weight:700;
  background:rgba(200,255,0,.15);color:var(--lime);
  padding:3px 10px;border-radius:6px;text-transform:uppercase;letter-spacing:.5px;
}

.terms-modal-body{
  flex:1;overflow-y:auto;padding:24px;
  font-size:14px;line-height:1.7;color:rgba(255,255,255,.8);
}
.terms-modal-body h2{font-family:var(--font-d);font-size:16px;font-weight:700;margin:18px 0 8px;color:#fff;}
.terms-modal-body h3{font-size:14px;font-weight:700;margin:14px 0 6px;color:#fff;}
.terms-modal-body p{margin:0 0 8px;}
.terms-modal-body li{margin:0 0 4px;padding-left:16px;position:relative;}
.terms-modal-body li::before{content:'•';position:absolute;left:0;color:var(--lime);}

.terms-modal-foot{
  padding:16px 24px;border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.terms-note{
  font-size:12px;color:var(--gray);margin:0;
}
.terms-accept-btn{
  background:var(--lime);color:#0a0a0a;
  border:none;border-radius:10px;padding:12px 32px;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:opacity .15s;
}
.terms-accept-btn:hover{opacity:.9;}
.terms-accept-btn:disabled{opacity:.5;cursor:not-allowed;}

/* ── Cancel Modal ── */
.cancel-modal{
  width:480px;max-width:92vw;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);overflow:hidden;
  animation:modalSlide .25s ease;
}
.cancel-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 24px;border-bottom:1px solid var(--border);
}
.cancel-modal-head span{
  font-family:var(--font-d);font-size:18px;font-weight:800;
}
.cancel-modal-close{
  background:none;border:none;color:var(--gray);font-size:24px;cursor:pointer;padding:0 4px;line-height:1;
}
.cancel-modal-close:hover{color:#fff;}

.cancel-modal-body{padding:24px;}
.cancel-proj-name{
  font-family:var(--font-d);font-size:16px;font-weight:700;margin-bottom:16px;
}
.cancel-tier-card{
  background:rgba(255,77,77,.06);border:1px solid rgba(255,77,77,.2);
  border-radius:var(--rs);padding:16px;margin-bottom:20px;
}
.cancel-tier-label{
  font-size:15px;font-weight:800;color:var(--red);margin-bottom:4px;
}
.cancel-tier-detail{
  font-size:13px;line-height:1.5;color:rgba(255,255,255,.7);
}
.cancel-reason-label{
  display:block;font-size:12px;font-weight:600;color:var(--gray);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;
}
.cancel-reason{
  width:100%;background:var(--card2);border:1px solid var(--border);
  border-radius:8px;padding:10px 14px;color:#fff;
  font-size:13px;font-family:inherit;resize:vertical;outline:none;
}
.cancel-reason:focus{border-color:var(--lime);}

.cancel-modal-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  padding:16px 24px;border-top:1px solid var(--border);
}
.cancel-btn-back{
  background:var(--card2);border:1px solid var(--border);
  color:#fff;border-radius:10px;padding:10px 20px;
  font-size:13px;font-weight:600;cursor:pointer;
}
.cancel-btn-back:hover{border-color:var(--lime);}
.cancel-btn-confirm{
  background:var(--red);color:#fff;border:none;
  border-radius:10px;padding:10px 20px;
  font-size:13px;font-weight:700;cursor:pointer;
}
.cancel-btn-confirm:hover{opacity:.9;}
.cancel-btn-confirm:disabled{opacity:.5;cursor:not-allowed;}

/* ── Bulk Actions Toolbar ── */
.bulk-toolbar{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%);
  background:var(--card);border:1px solid var(--lime);
  border-radius:14px;padding:10px 20px;
  display:flex;align-items:center;gap:14px;
  box-shadow:0 8px 32px rgba(0,0,0,.5);
  z-index:9500;
  animation:modalSlide .2s ease;
}
.bulk-count{
  font-size:13px;font-weight:700;color:var(--lime);
  white-space:nowrap;
}
.bulk-actions{
  display:flex;align-items:center;gap:8px;
}
.bulk-select{
  background:var(--card2);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;color:#fff;
  font-size:12px;outline:none;cursor:pointer;
}
.bulk-select:focus{border-color:var(--lime);}
.bulk-btn{
  background:var(--card2);border:1px solid var(--border);
  border-radius:8px;padding:7px 14px;color:#fff;
  font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;
}
.bulk-btn:hover{border-color:var(--lime);}
.bulk-btn.lime{background:var(--lime);color:#0a0a0a;border-color:var(--lime);}
.bulk-btn.lime:hover{opacity:.9;}
.bulk-btn.danger{color:var(--red);border-color:rgba(255,77,77,.3);}
.bulk-btn.danger:hover{border-color:var(--red);}

/* Bulk checkbox in project rows */
.bulk-check{
  width:16px;height:16px;accent-color:var(--lime);cursor:pointer;
}
.bulk-master{accent-color:var(--lime);cursor:pointer;}

/* ── SLA Widget ── */
.sla-widget{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--r);padding:18px;
}
.sla-head{
  font-family:var(--font-d);font-size:14px;font-weight:700;
  margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px;
}
.sla-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--border);
}
.sla-row:last-of-type{border-bottom:none;}
.sla-label{font-size:13px;color:var(--gray);}
.sla-val{font-size:14px;font-weight:700;}
.sla-val.lime{color:var(--lime);}
.sla-load{
  display:flex;align-items:center;gap:8px;
  margin-top:12px;font-size:12px;font-weight:600;
}
.sla-dot{width:8px;height:8px;border-radius:50%;}
.sla-designers{color:var(--gray);font-weight:400;margin-left:auto;}

/* ═══════════════════════════════════════════════════
   SESSION 16b — PROMO & CODES WIDGET
   Promo editor, codes table, usage tracker, redemption log
   ═══════════════════════════════════════════════════ */

/* ── Promo Editor ── */
.promo-editor{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;margin-bottom:20px;
}
.promo-editor-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-d);font-size:18px;font-weight:700;
  margin-bottom:20px;
}
.promo-editor-title svg{width:20px;height:20px;flex-shrink:0;color:var(--lime);}
.promo-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.promo-field{display:flex;flex-direction:column;gap:6px;}
.promo-field.full{grid-column:1/-1;}
.promo-label{
  font-size:12px;font-weight:600;color:var(--gray);
  text-transform:uppercase;letter-spacing:.5px;
}
.promo-input{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);
  color:#fff;padding:10px 14px;font-size:14px;font-family:var(--font);width:100%;
  transition:border-color .2s;
}
.promo-input:focus{outline:none;border-color:var(--lime);}
.promo-input::placeholder{color:#555;}

/* Toggle switch */
.promo-toggle{
  display:flex;align-items:center;gap:12px;padding-top:4px;
}
.promo-switch{
  position:relative;width:48px;height:26px;border-radius:13px;
  background:#333;border:none;cursor:pointer;
  transition:background .25s;
}
.promo-switch::after{
  content:'';position:absolute;top:3px;left:3px;
  width:20px;height:20px;border-radius:50%;background:#666;
  transition:transform .25s,background .25s;
}
.promo-switch.on{background:var(--lime-dark);}
.promo-switch.on::after{transform:translateX(22px);background:var(--lime);}
.promo-toggle-label{font-size:13px;color:var(--gray);font-weight:500;}
.promo-switch.on ~ .promo-toggle-label{color:var(--lime);}

/* Live preview strip */
.promo-preview{
  grid-column:1/-1;
  background:linear-gradient(135deg,#1a1a1a 0%,#0d0d0d 100%);
  border:1px solid var(--border);border-radius:var(--rs);
  padding:16px 20px;display:flex;align-items:center;gap:14px;
  overflow:hidden;position:relative;
}
.promo-preview::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,var(--lime-dark) 0%,transparent 40%);
  opacity:.15;pointer-events:none;
}
.promo-preview-badge{
  flex-shrink:0;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.8px;
  background:var(--lime);color:#000;padding:5px 10px;border-radius:6px;
  position:relative;z-index:1;
}
.promo-preview-text{
  flex:1;display:flex;flex-direction:column;gap:2px;
  min-width:0;position:relative;z-index:1;
}
.promo-preview-text strong{
  font-family:var(--font-d);font-size:14px;font-weight:800;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.promo-preview-text span{font-size:12px;color:var(--gray);}
.promo-preview-cta{
  flex-shrink:0;font-size:12px;font-weight:700;
  background:var(--lime);color:#000;padding:8px 16px;border-radius:8px;
  position:relative;z-index:1;white-space:nowrap;
}

/* Save row */
.promo-save-row{
  grid-column:1/-1;display:flex;gap:10px;padding-top:6px;
}
.promo-save{
  padding:10px 22px;border-radius:var(--rs);font-size:13px;font-weight:700;
  border:none;cursor:pointer;transition:opacity .2s;
}
.promo-save:hover{opacity:.85;}
.promo-save.primary{background:var(--lime);color:#000;}
.promo-save.secondary{background:var(--card2);color:#fff;border:1px solid var(--border);}

/* ── Codes Section ── */
.codes-section{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;margin-bottom:20px;
}
.codes-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-d);font-size:18px;font-weight:700;
  margin-bottom:16px;
}
.codes-title svg{width:20px;height:20px;flex-shrink:0;color:var(--lime);}

/* Add code row */
.codes-add-row{
  display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;
}
.code-input{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);
  color:#fff;padding:10px 14px;font-size:13px;font-family:var(--font);
  flex:1;min-width:100px;transition:border-color .2s;
}
.code-input:focus{outline:none;border-color:var(--lime);}
.code-input::placeholder{color:#555;}
.code-add-btn{
  background:var(--lime);color:#000;border:none;border-radius:var(--rs);
  padding:10px 18px;font-size:13px;font-weight:700;cursor:pointer;
  white-space:nowrap;transition:opacity .2s;
}
.code-add-btn:hover{opacity:.85;}

/* Code table */
.code-table{
  width:100%;border-collapse:separate;border-spacing:0;
}
.code-table thead th{
  font-size:11px;font-weight:600;color:var(--gray);
  text-transform:uppercase;letter-spacing:.5px;
  padding:8px 12px;text-align:left;
  border-bottom:1px solid var(--border);
}
.code-table tbody td{
  padding:12px;font-size:14px;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.code-table tbody tr:last-child td{border-bottom:none;}
.code-table tbody tr:hover{background:rgba(255,255,255,.02);}
.code-name{
  font-weight:700;font-family:var(--font-d);font-size:14px;
  letter-spacing:.5px;
  background:var(--card2);padding:4px 10px;border-radius:6px;
}
.code-badge{
  font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;
  display:inline-block;white-space:nowrap;
}
.code-badge.active{background:rgba(74,222,128,.12);color:var(--green);}
.code-badge.expired{background:rgba(255,77,77,.1);color:var(--red);}
.code-badge.paused{background:rgba(255,159,67,.1);color:var(--orange);}
.code-delete{
  background:none;border:none;color:#555;font-size:14px;
  cursor:pointer;padding:6px 8px;border-radius:6px;
  transition:color .2s,background .2s;
}
.code-delete:hover{color:var(--red);background:rgba(255,77,77,.08);}

/* ── Usage Section ── */
.usage-section{
  background:var(--card);border:1px solid var(--border);border-radius:var(--r);
  padding:24px;margin-bottom:20px;
}
.usage-title{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-d);font-size:18px;font-weight:700;
  margin-bottom:20px;
}
.usage-title svg{width:20px;height:20px;flex-shrink:0;color:var(--lime);}

/* KPI row */
.usage-kpis{
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  margin-bottom:20px;
}
.usage-kpi{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);
  padding:18px 16px;text-align:center;
}
.usage-kpi-val{
  font-family:var(--font-d);font-size:28px;font-weight:800;
  line-height:1.1;margin-bottom:4px;
}
.usage-kpi-val.lime{color:var(--lime);}
.usage-kpi-label{font-size:12px;color:var(--gray);font-weight:500;}

/* Per-code cards */
.usage-cards{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.usage-card{
  display:flex;align-items:center;gap:16px;
  background:var(--bg);border:1px solid var(--border);border-radius:var(--rs);
  padding:16px;
}
.usage-card-left{flex-shrink:0;min-width:100px;}
.usage-card-code{
  font-family:var(--font-d);font-size:16px;font-weight:800;
  letter-spacing:.5px;
}
.usage-card-disc{font-size:12px;color:var(--gray);margin-top:2px;}
.usage-card-mid{flex:1;min-width:0;}
.usage-bar-wrap{
  height:8px;background:rgba(255,255,255,.06);border-radius:4px;
  overflow:hidden;margin-bottom:6px;
}
.usage-bar-fill{
  height:100%;border-radius:4px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
}
.usage-bar-fill.green{background:var(--green);}
.usage-bar-fill.lime{background:var(--lime);}
.usage-bar-fill.orange{background:var(--orange);}
.usage-bar-fill.red{background:var(--red);}
.usage-bar-labels{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--gray);
}
.usage-card-right{
  flex-shrink:0;text-align:right;min-width:70px;
}
.usage-card-pct{
  font-family:var(--font-d);font-size:22px;font-weight:800;line-height:1.1;
}
.usage-card-pct.low{color:var(--green);}
.usage-card-pct.mid{color:var(--lime);}
.usage-card-pct.high{color:var(--orange);}
.usage-card-pct.full{color:var(--red);}
.usage-card-remaining{font-size:11px;color:var(--gray);margin-top:2px;}

/* ── Redemption Log ── */
.usage-log{}
.usage-log-title{
  font-family:var(--font-d);font-size:15px;font-weight:700;
  margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.usage-log-title span{
  font-family:var(--font);font-size:11px;font-weight:500;
  color:var(--gray);background:var(--card2);
  padding:3px 10px;border-radius:6px;
}
.usage-log-list{
  display:flex;flex-direction:column;
}
.usage-log-item{
  display:flex;align-items:center;gap:12px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.usage-log-item:last-child{border-bottom:none;}
.usage-log-dot{
  width:10px;height:10px;border-radius:50%;flex-shrink:0;
}
.usage-log-dot.s40{background:var(--lime);}
.usage-log-dot.l25{background:var(--orange);}
.usage-log-dot.v15{background:var(--purple);}
.usage-log-code{
  font-weight:700;font-size:12px;letter-spacing:.5px;
  min-width:72px;flex-shrink:0;
}
.usage-log-client{
  flex:1;font-size:13px;color:var(--gray);min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.usage-log-time{
  font-size:12px;color:#555;flex-shrink:0;white-space:nowrap;
}

/* ═══════════════════════════════════════════════════
   SESSION 16 — MOBILE POLISH (≤768px)
   Comprehensive mobile overhaul. Touch-first, no hover-only.
   ═══════════════════════════════════════════════════ */

/* ── Bottom nav: scrollable row with safe area ── */
@media(max-width:768px){

  /* Bottom nav: horizontal scroll, safe area */
  .p-rail{
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    justify-content:flex-start !important;
    padding:0 8px !important;
    padding-bottom:env(safe-area-inset-bottom,0) !important;
    gap:2px !important;
  }
  .p-rail::-webkit-scrollbar{display:none;}
  .p-ri{min-width:44px;min-height:44px;flex-shrink:0;}

  /* ── Login Screen ── */
  /* Prevent iOS zoom on focus — inputs must be ≥16px */
  .login-input{font-size:16px !important;padding:13px 16px !important;}
  .login-screen{padding:12px 12px calc(10px + env(safe-area-inset-bottom,0)) !important;}
  .login-collage{border-radius:24px;}
  .login-form-area{width:260px;margin-top:20px;}
  .login-tab{padding:8px 20px;font-size:11px;}
  .login-btn{padding:13px 0;font-size:14px;min-height:48px;}
  .login-footer{font-size:7px;gap:6px;}
  .login-bottom-bar{gap:8px;padding-top:10px;padding-bottom:env(safe-area-inset-bottom,0);}
  .login-bottom-btn{padding:8px 16px;font-size:12px;min-height:44px;display:flex;align-items:center;}

  /* ── Greeting ── */
  .greeting,.p-greeting{font-size:28px !important;}
  .greeting-sub,.p-greeting-sub{font-size:13px;}

  /* ── Top KPI Grid ── */
  .top-grid{grid-template-columns:1fr !important;gap:10px;}
  .top-card.span2{grid-row:span 1;}
  .top-card{padding:16px;}
  .kpi-val{font-size:36px;}
  .kpi-label{font-size:12px;}
  .kpi-sub{font-size:11px;}

  /* ── Designer Hero ── */
  .ds-hero{grid-template-columns:1fr !important;gap:10px;}
  .ds-profile{min-height:180px;}
  .ds-stats{grid-template-columns:1fr 1fr;gap:10px;}
  .ds-stat-num{font-size:28px;}
  .ds-stat{padding:16px;}
  .ds-sub-section{padding:16px;}

  /* Calendar: allow horizontal scroll if needed */
  .cal-grid{gap:2px;}
  .cal-d{width:36px;height:36px;font-size:12px;}

  /* ── Operations panel ── */
  .ops-title{font-size:18px;}
  .ops-stat-val{font-size:28px;}
  .ops-stats{gap:20px;}

  /* ── Mid-row (messages, revisions, clients) ── */
  .mid-row{grid-template-columns:1fr !important;gap:10px;}
  .col-card{max-height:300px;}
  .col-title{font-size:16px;}

  /* ── Projects View ── */
  .proj-toolbar{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;}
  .proj-filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none;flex:1;min-width:0;}
  .proj-filters::-webkit-scrollbar{display:none;}
  .proj-filter{flex-shrink:0;min-height:36px;display:flex;align-items:center;padding:6px 14px;font-size:12px;}
  .proj-create-btn{min-height:36px;font-size:12px;padding:6px 14px;background:rgba(200,255,0,.1);color:var(--lime);border:1px solid rgba(200,255,0,.2);flex-shrink:0;}
  .proj-cards{grid-template-columns:1fr !important;}
  .proj-card{padding:14px;}
  .proj-card-title{font-size:14px;}
  .status-flow{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;}
  .status-flow::-webkit-scrollbar{display:none;}
  .status-btn{flex-shrink:0;min-height:40px;display:flex;align-items:center;font-size:12px;}

  /* ── Messaging: toggle between threads list and detail ── */
  .msg-view{grid-template-columns:1fr !important;height:calc(100vh - 140px);}
  .msg-threads-panel{max-height:none;border-right:none;border-bottom:1px solid rgba(255,255,255,.06);}
  .msg-view.thread-active .msg-threads-panel{display:none;}
  .msg-view:not(.thread-active) .msg-thread-detail{display:none;}
  .msg-thread-detail{min-height:0;}
  .msg-thread-item{padding:14px 12px;min-height:56px;}
  .thread-compose{padding:10px 12px;}
  .thread-input{padding:12px;font-size:14px;}
  .thread-send{min-width:44px;min-height:44px;}
  /* Back button for thread detail (JS-injected) */
  .thread-detail-back{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--lime);cursor:pointer;padding:0 4px;}
  .thread-detail-back svg{width:16px;height:16px;}
  .modal-card-wide{max-width:100%;margin:0;border-radius:16px 16px 0 0;}

  /* ── Team View ── */
  .team-grid{grid-template-columns:1fr !important;}
  .team-card{padding:16px;}
  .team-card-add{min-height:160px;}
  .team-summary{flex-wrap:wrap;gap:12px;padding:14px 16px;}
  .team-summary-val{font-size:22px;}

  /* ── Clients View ── */
  .retainer-grid{grid-template-columns:1fr !important;}
  .clients-summary{flex-wrap:wrap;gap:12px;padding:14px 16px;}
  .clients-summary-val{font-size:22px;}
  .retainer-rings{gap:16px;}
  .usage-ring{width:60px;height:60px;}
  .usage-ring svg{width:60px;height:60px;}
  .client-detail-stats{grid-template-columns:1fr 1fr;}
  .usage-row{flex-direction:column;align-items:center;gap:20px;}
  .client-pipeline{font-size:11px;gap:4px;}
  .thread-msg{max-width:95%;}
  .client-request-form{max-width:100%;}

  /* ── Billing View ── */
  .billing-summary{flex-direction:column;gap:10px;padding:14px 16px;}
  .billing-kpi-val{font-size:22px;}
  .billing-toolbar{flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap;}
  .billing-filters{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px;flex:1;min-width:0;}
  .billing-filters::-webkit-scrollbar{display:none;}
  .billing-filters .proj-filter{flex-shrink:0;}
  /* Table: horizontal scroll wrapper */
  .billing-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -16px;padding:0 16px;}
  .billing-table{min-width:600px;font-size:12px;}
  .billing-table th,.billing-table td{padding:10px 8px;white-space:nowrap;}
  .billing-project{display:none;}

  /* ── Earnings View ── */
  .earnings-summary{grid-template-columns:1fr 1fr !important;gap:10px;}
  .earnings-card-val{font-size:24px;}
  .earnings-card-lbl{font-size:10px;}
  .earnings-table{font-size:12px;}
  .earnings-table th,.earnings-table td{padding:10px 8px;}

  /* ── Designer Pay View ── */
  .pay-summary{flex-direction:column;gap:10px;padding:14px 16px;}
  .pay-kpi-val{font-size:22px;}
  .pay-designer-grid{grid-template-columns:1fr !important;}
  .pay-rush-row{flex-direction:column;gap:8px;}
  .pay-rush-field .tm-input{width:100%;}

  /* ── Designer Setup ── */
  .setup-card{padding:28px 16px;margin:0 12px;border-radius:20px;}
  .setup-title{font-size:22px;}
  .setup-input{font-size:16px !important;} /* Prevent iOS zoom */

  /* ── Availability Calendar ── */
  .avail-section{padding:16px;}
  .avail-day{font-size:12px;}

  /* ── Manager Views ── */
  .mgr-team-grid{grid-template-columns:1fr !important;}
  .mgr-detail-grid{grid-template-columns:1fr !important;}
  .mgr-messages-grid{grid-template-columns:1fr !important;}
  .mgr-team-header{flex-wrap:wrap;}
  .mgr-proj-row{flex-wrap:wrap;}

  /* ── Modals: near-full-screen ── */
  .modal-overlay{align-items:flex-end;}
  .modal-card{
    margin:0 !important;padding:24px 16px !important;
    border-radius:20px 20px 0 0 !important;
    max-width:100% !important;width:100% !important;
    max-height:92vh;overflow-y:auto;
  }
  .modal-head{font-size:20px;}
  .team-modal-overlay{align-items:flex-end;}
  .team-modal{
    margin:0;padding:28px 16px;
    border-radius:20px 20px 0 0;
    max-width:100%;width:100%;
    max-height:92vh;overflow-y:auto;
  }
  .tm-input,.tm-select{font-size:16px !important;} /* Prevent iOS zoom */
  .tm-row{flex-direction:column;gap:0;}
  .tm-btn{min-height:48px;font-size:15px;}

  /* ── Notification Panel: full-width bottom sheet ── */
  .notif-panel{
    left:0 !important;right:0 !important;bottom:56px !important;
    width:100% !important;max-height:65vh;
    border-radius:16px 16px 0 0;
    border-bottom:none;
  }
  .notif-item{padding:14px 16px;min-height:56px;}
  .notif-item-msg{font-size:14px;}

  /* ── Terms Modal: full-width sheet ── */
  .terms-overlay{align-items:flex-end;}
  .terms-modal{
    width:100% !important;max-width:100% !important;
    margin:0 !important;
    border-radius:20px 20px 0 0;
    max-height:90vh;
  }
  .terms-modal-head{padding:16px 16px;}
  .terms-modal-body{padding:16px;font-size:14px;}
  .terms-modal-foot{padding:14px 16px;flex-direction:column;gap:10px;}
  .terms-accept-btn{width:100%;min-height:48px;font-size:15px;}

  /* ── Cancel Modal ── */
  .cancel-modal{
    width:100% !important;max-width:100% !important;
    margin:0 !important;
    border-radius:20px 20px 0 0;
  }
  .cancel-modal-head{padding:16px;}
  .cancel-modal-body{padding:16px;}
  .cancel-reason{font-size:16px !important;} /* Prevent iOS zoom */
  .cancel-modal-foot{padding:14px 16px;}
  .cancel-btn-back,.cancel-btn-confirm{min-height:44px;padding:10px 18px;}

  /* ── Bulk Toolbar ── */
  .bulk-toolbar{
    left:8px !important;right:8px !important;bottom:66px !important;
    transform:none !important;
    flex-wrap:wrap;padding:10px 14px;
    border-radius:12px;
  }
  .bulk-actions{flex-wrap:wrap;gap:6px;}
  .bulk-btn{min-height:40px;padding:8px 12px;}
  .bulk-select{min-height:40px;font-size:13px;}

  /* ── SLA Widget ── */
  .sla-widget{padding:14px;}
  .sla-label{font-size:12px;}
  .sla-val{font-size:13px;}

  /* ── Approval Rail ── */
  .approval-title{font-size:24px;}
  .approval-section{padding:18px 14px;}
  .approval-card{flex:0 0 220px;}
  .approval-preview{max-height:240px;}
  .approval-preview.sq{max-height:200px;}
  .ap-btn{min-height:40px;padding:10px 14px;font-size:13px;}

  /* ── Toast ── */
  .toast{left:16px;right:16px;transform:translateY(80px);width:auto;max-width:none;}
  .toast.show{transform:translateY(0);}

  /* ── p-content safe area ── */
  .p-content{padding:20px 14px 80px 14px !important;}

  /* ── Touch target minimum ── */
  .action-btn{min-height:40px;padding:8px 14px;font-size:12px;}
  .ret-widgets{gap:6px;}
  .ret-btn{min-height:40px;padding:10px 14px;font-size:12px;}
  .client-item{min-height:52px;padding:12px 14px;}
  .msg{min-height:52px;padding:12px 14px;}
  .rev-item{min-height:52px;padding:12px 14px;}
  .proj-assign-btn{min-height:40px;padding:6px 12px;}
  .billing-act-btn{width:36px;height:36px;}
  .avail-nav-btn{width:40px;height:40px;}

  /* ── Upload Drop Zone ── */
  .upload-drop-zone{padding:24px 16px;}

  /* ── Client Portal ── */
  .client-detail-actions{flex-wrap:wrap;}
  .lime-btn{min-height:44px;font-size:14px;}

  /* ── Session 16b: Promo Widget Mobile ── */
  .promo-editor{padding:16px;}
  .promo-editor-title{font-size:16px;margin-bottom:14px;}
  .promo-grid{grid-template-columns:1fr;gap:10px;}
  .promo-field.full{grid-column:1;}
  .promo-input{font-size:16px !important;padding:12px 14px;} /* iOS zoom prevention */
  .promo-preview{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;}
  .promo-preview-text strong{white-space:normal;font-size:13px;}
  .promo-save-row{flex-direction:column;}
  .promo-save{width:100%;min-height:48px;font-size:14px;text-align:center;}

  .codes-section{padding:16px;}
  .codes-title{font-size:16px;}
  .codes-add-row{flex-direction:column;}
  .code-input{flex:none;width:100%;font-size:16px !important;min-height:44px;}
  .code-add-btn{width:100%;min-height:48px;font-size:14px;text-align:center;}
  .code-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .code-table thead,.code-table tbody,.code-table tr{display:table;width:max-content;min-width:100%;}
  .code-table thead th{padding:8px 10px;font-size:10px;white-space:nowrap;}
  .code-table tbody td{padding:10px 10px;font-size:13px;white-space:nowrap;}
  .code-delete{min-height:40px;min-width:40px;}

  .usage-section{padding:16px;}
  .usage-title{font-size:16px;}
  .usage-kpis{grid-template-columns:1fr;gap:8px;}
  .usage-kpi{padding:14px 12px;display:flex;align-items:center;gap:12px;text-align:left;}
  .usage-kpi-val{font-size:24px;margin-bottom:0;}
  .usage-kpi-label{font-size:12px;}
  .usage-card{flex-direction:column;align-items:stretch;gap:10px;padding:14px;}
  .usage-card-left{display:flex;align-items:center;gap:10px;min-width:0;}
  .usage-card-code{font-size:15px;}
  .usage-card-disc{margin-top:0;}
  .usage-card-right{display:flex;align-items:center;gap:8px;text-align:left;}
  .usage-card-pct{font-size:18px;}

  .usage-log-item{gap:8px;padding:10px 0;}
  .usage-log-code{min-width:60px;font-size:11px;}
  .usage-log-client{font-size:12px;}
  .usage-log-time{font-size:11px;}
}

/* ══════════════════════════════════════════════════
   ANALYTICS
   ══════════════════════════════════════════════════ */
.ana-period{display:flex;gap:8px;margin-bottom:20px;}
.ana-period-btn{
  padding:8px 18px;border-radius:10px;border:1px solid var(--border);
  background:transparent;color:var(--gray);font-size:13px;
  font-family:var(--font);cursor:pointer;transition:all .15s;
}
.ana-period-btn.active,.ana-period-btn:hover{background:var(--lime);color:#000;border-color:var(--lime);font-weight:600;}
.ana-loading{color:var(--muted);font-size:14px;padding:40px 0;text-align:center;}

.ana-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.kpi-spark{margin-top:4px;}

.ana-chart-card{margin-bottom:20px;}
.ana-chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;}
.ana-chart-title{font-family:var(--font-d);font-size:16px;font-weight:700;}
.ana-chart-legend{font-size:12px;color:var(--gray);display:flex;align-items:center;gap:10px;}
.ana-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;}

.ana-chart{display:flex;align-items:flex-end;gap:3px;height:160px;padding:4px 0;}
.ana-bar-group{display:flex;flex-direction:column;align-items:center;flex-shrink:0;}
.ana-bar-pair{display:flex;gap:2px;align-items:flex-end;height:140px;width:100%;}
.ana-bar{border-radius:3px 3px 0 0;min-height:2px;flex:1;transition:height .3s;}
.ana-bar-label{font-size:9px;color:var(--gray);margin-top:4px;white-space:nowrap;}

.ana-bottom{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}

.ana-device-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;margin:16px 0 10px;background:var(--card2);}
.ana-dev-seg{transition:width .3s;}
.ana-device-labels{display:flex;gap:16px;font-size:12px;color:var(--gray);}
.ana-device-labels span{display:flex;align-items:center;gap:4px;}

.ana-ref-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--border);}
.ana-ref-row:last-child{border-bottom:none;}
.ana-ref-name{font-size:13px;color:#fff;}
.ana-ref-count{font-size:13px;color:var(--lime);font-weight:600;}

.ana-live-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--border);font-size:12px;}
.ana-live-row:last-child{border-bottom:none;}
.ana-live-icon{font-size:14px;flex-shrink:0;}
.ana-live-path{color:#fff;font-weight:500;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ana-live-ref{color:var(--gray);flex-shrink:0;}
.ana-live-time{color:var(--muted);flex-shrink:0;}

@media(max-width:1024px){
  .ana-kpis{grid-template-columns:repeat(2,1fr);}
  .ana-bottom{grid-template-columns:1fr;}
}
@media(max-width:768px){
  .ana-kpis{grid-template-columns:1fr 1fr;}
  .ana-chart{height:120px;overflow-x:auto;}
  .ana-bar-pair{height:100px;}
}

/* ══════════════════════════════════════════════════
   GHOST MODE — Admin View Switcher
   ══════════════════════════════════════════════════ */
/* Ghost rail button highlight */
.ghost-rail-btn.active{color:var(--lime);}

.ghost-panel{
  position:fixed;bottom:60px;left:60px;z-index:9998;
  width:260px;background:var(--card);border:1px solid var(--border);
  border-radius:14px;padding:16px;
  box-shadow:0 8px 40px rgba(0,0,0,.6);
  display:none;flex-direction:column;gap:12px;
}
.ghost-panel.open{display:flex;}
.ghost-panel-title{
  font-family:var(--font-d);font-size:14px;font-weight:700;
  color:var(--lime);text-transform:uppercase;letter-spacing:1px;
}
.ghost-select{
  width:100%;padding:10px 12px;border-radius:10px;
  background:var(--card2);color:#fff;border:1px solid var(--border);
  font-size:13px;font-family:var(--font);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.ghost-select:focus{outline:none;border-color:var(--lime);}
.ghost-select option{background:#1a1a1a;color:#fff;}

.ghost-user-btn{
  width:100%;padding:10px 12px;border-radius:10px;
  background:var(--lime);color:#000;border:none;
  font-size:13px;font-weight:600;font-family:var(--font);
  cursor:pointer;transition:opacity .15s;
}
.ghost-user-btn:hover{opacity:.85;}
.ghost-user-btn:disabled{opacity:.4;cursor:default;}

.ghost-banner{
  position:fixed;top:0;left:0;right:0;z-index:9997;
  background:var(--lime);color:#000;text-align:center;
  padding:6px 16px;font-size:12px;font-weight:600;
  font-family:var(--font);letter-spacing:.5px;
  display:none;align-items:center;justify-content:center;gap:12px;
}
.ghost-banner.active{display:flex;}
.ghost-banner button{
  background:#000;color:var(--lime);border:none;
  padding:4px 14px;border-radius:6px;font-size:11px;
  font-weight:700;cursor:pointer;font-family:var(--font);
  text-transform:uppercase;letter-spacing:.5px;
}
.ghost-banner button:hover{opacity:.85;}

/* Push portal down when ghost banner is visible */
.ghost-active #portal{padding-top:36px;}
.ghost-active .p-sidebar{top:36px;height:calc(100vh - 36px);}

/* ══════════════════════════════════════════════════
   OWNER ACTION MODALS
   ══════════════════════════════════════════════════ */
.owner-modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:3000;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);padding:16px;
}
.owner-modal{
  background:#141414;border:1px solid rgba(255,255,255,.1);
  border-radius:20px;padding:32px;width:100%;max-width:460px;
  position:relative;box-shadow:0 24px 80px rgba(0,0,0,.7);
  max-height:80vh;overflow-y:auto;
}
.owner-modal::-webkit-scrollbar{width:4px;}
.owner-modal::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
.owner-modal-close{
  position:absolute;top:16px;right:16px;
  width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.06);border:none;
  color:rgba(255,255,255,.5);font-size:20px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  line-height:1;transition:background .15s,color .15s;
}
.owner-modal-close:hover{background:rgba(255,255,255,.12);color:#fff;}
.owner-modal-title{
  font-family:var(--font-d);font-size:24px;font-weight:800;
  margin-bottom:4px;padding-right:40px;
}
.owner-modal-sub{font-size:13px;color:var(--gray);margin-bottom:24px;}
.owner-modal-msg{font-size:13px;margin-top:10px;min-height:18px;text-align:center;}
.owner-modal-msg.error{color:var(--red);}
.owner-modal-msg.success{color:var(--green);}

/* Modal form fields */
.om-field{margin-bottom:16px;}
.om-label{
  display:block;font-size:12px;color:var(--gray);
  font-weight:600;margin-bottom:6px;letter-spacing:.3px;
}
.om-input{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#fff;
  font-family:var(--font-b);font-size:14px;
  box-sizing:border-box;transition:border-color .15s;
}
.om-input:focus{outline:none;border-color:var(--lime);}
.om-input::placeholder{color:rgba(255,255,255,.25);}
.om-select{
  width:100%;padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.04);color:#fff;
  font-family:var(--font-b);font-size:14px;
  -webkit-appearance:none;appearance:none;
  box-sizing:border-box;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%23888' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5.5l6.5 6 6.5-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
  transition:border-color .15s;
}
.om-select:focus{outline:none;border-color:var(--lime);}
.om-select option{background:#1a1a1a;color:#fff;}

/* Modal buttons */
.om-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 20px;border:none;border-radius:10px;
  font-family:var(--font-b);font-size:14px;font-weight:600;
  cursor:pointer;transition:all .15s;
}
.om-btn.primary{background:var(--lime);color:#000;width:100%;padding:14px;border-radius:12px;font-size:15px;font-weight:700;margin-top:4px;}
.om-btn.primary:hover{background:#d4ff33;}
.om-btn.danger{background:rgba(255,77,77,.12);color:var(--red);}
.om-btn.danger:hover{background:rgba(255,77,77,.22);}
.om-btn.sm{padding:6px 12px;font-size:12px;border-radius:8px;}
.om-btn:disabled{opacity:.45;cursor:default;}

/* Toggle row (remove client/employee) */
.om-toggle-row{
  display:flex;align-items:center;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.05);
}
.om-toggle-row:last-child{border-bottom:none;}
.om-toggle-name{flex:1;font-size:13px;color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.om-toggle-status{font-size:11px;font-weight:600;padding:3px 8px;border-radius:6px;flex-shrink:0;}
.om-toggle-status.active{background:rgba(74,222,128,.1);color:var(--green);}
.om-toggle-status.inactive{background:rgba(255,255,255,.06);color:var(--gray);}

/* ══════════════════════════════════════════════════
   MESSAGES VIEW — NEW CONVERSATION
   ══════════════════════════════════════════════════ */
.msg-threads-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 8px;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.msg-threads-title{
  font-size:12px;font-weight:700;color:var(--gray);
  text-transform:uppercase;letter-spacing:.8px;
}
.msg-new-conv-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:8px;
  background:var(--lime);color:#000;border:none;
  font-family:var(--font-b);font-size:12px;font-weight:700;
  cursor:pointer;transition:background .15s,transform .1s;
  line-height:1;
}
.msg-new-conv-btn:hover{background:#d4ff33;transform:scale(1.03);}
.msg-new-conv-btn svg{flex-shrink:0;}

/* New conversation dropdown */
.new-conv-dropdown{
  background:#141414;border:1px solid rgba(255,255,255,.1);
  border-radius:12px;overflow:hidden;
  box-shadow:0 8px 32px rgba(0,0,0,.6);
  margin:4px 8px 8px;
  max-height:260px;overflow-y:auto;
}
.new-conv-dropdown::-webkit-scrollbar{width:4px;}
.new-conv-dropdown::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
.new-conv-header{
  font-size:11px;color:var(--gray);font-weight:600;
  text-transform:uppercase;letter-spacing:.6px;
  padding:10px 14px 6px;
}
.new-conv-item{
  display:flex;align-items:center;gap:10px;
  padding:9px 14px;cursor:pointer;
  transition:background .12s;
}
.new-conv-item:hover{background:rgba(255,255,255,.05);}
.new-conv-av{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;color:#000;
  flex-shrink:0;
}
.new-conv-name{
  flex:1;font-size:13px;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.new-conv-status{
  font-size:10px;color:var(--gray);font-weight:500;
  background:rgba(255,255,255,.06);padding:2px 7px;
  border-radius:5px;flex-shrink:0;text-transform:capitalize;
}

/* ── Project Files Section (Status Modal) ── */
.proj-files-section{
  margin-top:18px;border:1px solid rgba(255,255,255,.08);
  border-radius:10px;overflow:hidden;
}
.proj-files-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.proj-files-head span{
  display:flex;align-items:center;gap:6px;
  font-size:13px;font-weight:600;color:var(--white);
}
.proj-files-upload-btn{
  background:var(--lime);color:#000;
  border:none;border-radius:6px;
  padding:5px 12px;font-size:12px;font-weight:600;
  cursor:pointer;transition:opacity .15s;
  font-family:var(--font-body);
}
.proj-files-upload-btn:hover{opacity:.85;}
.proj-files-list{
  max-height:220px;overflow-y:auto;
}
.proj-files-list::-webkit-scrollbar{width:4px;}
.proj-files-list::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
.proj-files-empty{
  padding:20px 14px;text-align:center;
  color:var(--gray);font-size:13px;
}
.proj-file-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;gap:10px;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition:background .12s;
}
.proj-file-row:last-child{border-bottom:none;}
.proj-file-row:hover{background:rgba(255,255,255,.03);}
.proj-file-info{
  display:flex;align-items:center;gap:8px;
  min-width:0;flex:1;
}
.proj-file-badge{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.4px;padding:2px 7px;
  border-radius:4px;flex-shrink:0;
  color:var(--fc);background:color-mix(in srgb, var(--fc) 15%, transparent);
}
.proj-file-name{
  font-size:12px;color:rgba(255,255,255,.7);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.proj-file-meta{
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.proj-file-uploader{
  font-size:11px;color:var(--gray);font-weight:500;
}
.proj-file-date{
  font-size:11px;color:var(--gray);
}
.proj-file-dl{
  color:var(--lime);opacity:.7;transition:opacity .15s;
  display:flex;align-items:center;
}
.proj-file-dl:hover{opacity:1;}
.proj-file-del{
  background:none;border:none;cursor:pointer;
  color:var(--gray);opacity:.5;transition:opacity .15s;
  display:flex;align-items:center;padding:2px;
}
.proj-file-del:hover{opacity:1;color:var(--red);}

/* ═══ Client Detail — Projects + Upload ═══ */
.cd-projects-section{
  margin-top:20px;border-top:1px solid rgba(255,255,255,.06);padding-top:16px;
}
.cd-projects-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;
}
.cd-projects-title{
  font-size:14px;font-weight:700;color:var(--white);letter-spacing:.02em;
}
.cd-projects-list{
  display:flex;flex-direction:column;gap:2px;
  max-height:320px;overflow-y:auto;
}
.cd-projects-empty{
  padding:16px;color:var(--gray);font-size:13px;text-align:center;
}
.cd-proj-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px;border-radius:8px;
  background:rgba(255,255,255,.03);transition:background .15s;
}
.cd-proj-row:hover{background:rgba(255,255,255,.06);}
.cd-proj-info{flex:1;min-width:0;}
.cd-proj-name{
  font-size:13px;font-weight:600;color:var(--white);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cd-proj-meta{
  font-size:11px;color:var(--gray);margin-top:2px;
  display:flex;align-items:center;gap:6px;
}
.cd-proj-status{
  text-transform:capitalize;font-weight:600;
  color:var(--sc, var(--gray));
}
.cd-proj-actions{
  display:flex;align-items:center;gap:4px;flex-shrink:0;margin-left:8px;
}
.cd-upload-btn, .cd-files-toggle{
  background:none;border:1px solid rgba(255,255,255,.08);border-radius:6px;
  color:var(--gray);cursor:pointer;padding:5px 6px;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.cd-upload-btn:hover{
  color:var(--lime);border-color:var(--lime);
  background:rgba(200,255,0,.06);
}
.cd-files-toggle:hover, .cd-files-toggle.active{
  color:var(--white);border-color:rgba(255,255,255,.2);
  background:rgba(255,255,255,.06);
}
.cd-proj-files{
  margin:0 4px 4px;padding:6px 8px;
  border-left:2px solid rgba(255,255,255,.06);
}
.cd-files-empty{
  padding:8px 12px;color:var(--gray);font-size:12px;font-style:italic;
}
.cd-file-row{
  display:flex;align-items:center;gap:8px;padding:5px 8px;
  border-radius:6px;transition:background .15s;
}
.cd-file-row:hover{background:rgba(255,255,255,.04);}
.cd-file-badge{
  font-size:10px;font-weight:700;text-transform:uppercase;
  color:var(--fc, var(--gray));letter-spacing:.04em;
  flex-shrink:0;
}
.cd-file-name{
  font-size:12px;color:var(--white);flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cd-file-date{
  font-size:11px;color:var(--gray);flex-shrink:0;
}
.cd-file-dl{
  color:var(--lime);opacity:.7;transition:opacity .15s;
  display:flex;align-items:center;flex-shrink:0;
}
.cd-file-dl:hover{opacity:1;}

@media(max-width:768px){
  .ghost-panel{bottom:64px;left:16px;right:16px;width:auto;}
  .proj-file-row{flex-wrap:wrap;gap:6px;}
  .proj-file-meta{width:100%;justify-content:flex-end;}
  .cd-projects-list{max-height:260px;}
}