@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=DM+Mono:wght@400;500&display=swap');

/* ═══════════════════════════════════════════════════
   RSQUARE  ·  "Govern Without Limits"
   Design System — Dark / Light themes
   ═══════════════════════════════════════════════════ */

:root {
  /* Dark palette (default) */
  --bg:      #05060f;
  --bg1:     #080a18;
  --bg2:     #0c0e1f;
  --bg3:     #101326;
  --surf:    #0f1120;
  --surf2:   #141728;
  --line:    #1c1f38;
  --line2:   #242848;

  --blue:    #4f6ef5;
  --blue2:   #3a57e0;
  --bluedim: rgba(79,110,245,.12);
  --vio:     #8b5cf6;
  --viodim:  rgba(139,92,246,.1);
  --teal:    #05c9a7;
  --teal2:   #03a589;
  --tealdim: rgba(5,201,167,.1);
  --amb:     #f59e0b;
  --ambd:    rgba(245,158,11,.1);
  --red:     #ef4444;
  --redd:    rgba(239,68,68,.1);
  --grn:     #22c55e;
  --grnd:    rgba(34,197,94,.1);

  --txt:     #e8eaff;
  --txt2:    #9499be;
  --txt3:    #575b7a;

  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:20px; --r6:28px;
  --sh:  0 4px 24px rgba(0,0,0,.45);
  --shb: 0 8px 48px rgba(0,0,0,.6);
  --gb:  0 0 40px rgba(79,110,245,.2);
  --gt:  0 0 32px rgba(5,201,167,.18);

  --disp: 'DM Sans', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', monospace;
}

[data-theme="light"] {
  --bg:      #f0f2ff;
  --bg1:     #e8ebff;
  --bg2:     #ffffff;
  --bg3:     #eef0ff;
  --surf:    #ffffff;
  --surf2:   #f4f5ff;
  --line:    #dde0f5;
  --line2:   #c8ccee;

  /* Keep brand colours slightly deeper for light bg readability */
  --blue:    #3d5ce8;
  --blue2:   #2b47d0;
  --bluedim: rgba(61,92,232,.1);
  --vio:     #7c3aed;
  --viodim:  rgba(124,58,237,.1);
  --teal:    #0a9e88;
  --teal2:   #087a6a;
  --tealdim: rgba(10,158,136,.1);
  --amb:     #d97706;
  --ambd:    rgba(217,119,6,.1);
  --red:     #dc2626;
  --redd:    rgba(220,38,38,.1);
  --grn:     #16a34a;
  --grnd:    rgba(22,163,74,.1);

  /* TEXT — high contrast on white/light backgrounds */
  --txt:     #0f1130;
  --txt2:    #374080;
  --txt3:    #6b72a8;

  --sh:    0 4px 24px rgba(0,0,0,.08);
  --shb:   0 8px 48px rgba(0,0,0,.14);
  --gb:    0 0 32px rgba(61,92,232,.12);
  --gt:    0 0 24px rgba(10,158,136,.1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg);color:var(--txt);font-family:var(--body);line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .3s,color .3s}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:var(--body)}
input,textarea,select{font-family:var(--body)}
img{max-width:100%;display:block}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:2px}

/* ── LAYOUT ── */
.wrap{max-width:1280px;margin:0 auto;padding:0 48px}
.wrap-sm{max-width:900px;margin:0 auto;padding:0 48px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.flex{display:flex}.fac{display:flex;align-items:center}
.fac-jc{display:flex;align-items:center;justify-content:center}
.hidden{display:none!important}

/* ── NAV ── */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:900;
  height:60px;
  background:rgba(5,6,15,.88);
  backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;
  padding:0 40px;gap:32px;
  transition:background .3s;
}
[data-theme="light"] .nav{background:rgba(242,243,255,.92)}
.nav-logo{
  font-family:var(--disp);font-size:20px;font-weight:700;
  color:var(--txt);letter-spacing:-.02em;flex-shrink:0;
  display:flex;align-items:center;gap:6px;
}
.nav-logo .sq{
  width:28px;height:28px;border-radius:6px;
  background:linear-gradient(135deg,var(--blue),var(--vio));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:14px;font-weight:700;
}
.nav-links{display:flex;gap:4px;flex:1;list-style:none}
.nav-links a{
  padding:6px 12px;border-radius:var(--r2);
  font-size:13px;color:var(--txt2);
  transition:color .15s,background .15s;
}
.nav-links a:hover,.nav-links a.active{color:var(--txt);background:var(--surf2)}
.nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.theme-toggle{
  width:36px;height:36px;border-radius:50%;
  background:var(--surf);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;transition:all .2s;
}
.theme-toggle:hover{border-color:var(--line2);background:var(--surf2)}
.user-chip{
  display:flex;align-items:center;gap:8px;
  padding:4px 12px 4px 4px;
  background:var(--surf);border:1px solid var(--line);
  border-radius:100px;cursor:pointer;
  transition:border-color .15s;
}
.user-chip:hover{border-color:var(--line2)}
.ava{
  width:28px;height:28px;border-radius:50%;
  background:var(--bluedim);color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;flex-shrink:0;
}
.ava-teal{background:var(--tealdim);color:var(--teal)}
.ava-vio{background:var(--viodim);color:var(--vio)}
.ava-sm{width:24px;height:24px;font-size:10px}
.ava-lg{width:40px;height:40px;font-size:15px}
.ava-xl{width:56px;height:56px;font-size:20px}

/* ── SIDEBAR ── */
.app-shell{display:flex;min-height:100vh;padding-top:60px}
.sidebar{
  width:220px;flex-shrink:0;
  background:var(--bg1);
  border-right:1px solid var(--line);
  position:sticky;top:60px;height:calc(100vh - 60px);
  overflow-y:auto;padding:20px 12px;
  transition:background .3s;
}
.sb-section{margin-bottom:20px}
.sb-label{
  font-family:var(--mono);font-size:9px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--txt3);padding:4px 8px;margin-bottom:4px;
}
.sb-link{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r2);
  font-size:13px;color:var(--txt2);
  transition:all .15s;border-left:2px solid transparent;
  margin-bottom:1px;
}
.sb-link:hover{color:var(--txt);background:var(--surf);border-left-color:transparent}
.sb-link.active{color:var(--txt);background:var(--surf2);border-left-color:var(--blue)}
.sb-link .ico{font-size:15px;flex-shrink:0;width:18px;text-align:center}
.sb-link .badge-cnt{
  margin-left:auto;background:var(--blue);color:#fff;
  border-radius:100px;font-size:10px;padding:0 6px;
  font-family:var(--mono);
}
.sb-divider{height:1px;background:var(--line);margin:12px 4px}
.main-area{flex:1;min-width:0;overflow-x:hidden}
.page-content{padding:32px 40px}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 20px;border-radius:var(--r2);
  font-size:13px;font-weight:500;border:none;
  transition:all .2s;white-space:nowrap;font-family:var(--body);
}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue2);transform:translateY(-1px);box-shadow:var(--gb)}
.btn-teal{background:var(--teal);color:var(--bg)}
.btn-teal:hover{background:var(--teal2);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--txt2);border:1px solid var(--line2)}
.btn-ghost:hover{color:var(--txt);border-color:var(--txt3)}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{opacity:.88}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:13px 30px;font-size:15px}
.btn-xl{padding:16px 40px;font-size:16px}
.btn-icon{padding:8px;width:36px;height:36px;border-radius:var(--r2);background:var(--surf);border:1px solid var(--line);color:var(--txt2);display:flex;align-items:center;justify-content:center}
.btn-icon:hover{border-color:var(--line2);color:var(--txt);background:var(--surf2)}

/* ── CARDS ── */
.card{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r4);padding:24px;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.card-glow:hover{border-color:rgba(79,110,245,.4);box-shadow:var(--gb)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:15px;font-weight:600;color:var(--txt)}
.card-subtitle{font-size:13px;color:var(--txt2);margin-top:2px}

/* ── STAT CARDS ── */
.stat-card{background:var(--surf);border:1px solid var(--line);border-radius:var(--r4);padding:20px 24px}
.stat-n{font-family:var(--mono);font-size:32px;font-weight:500;color:var(--txt);line-height:1;margin-bottom:4px}
.stat-n .up{color:var(--teal);font-size:13px;vertical-align:middle;margin-left:4px}
.stat-n .dn{color:var(--red);font-size:13px;vertical-align:middle;margin-left:4px}
.stat-label{font-size:12px;color:var(--txt2)}

/* ── TABLES ── */
.table-wrap{background:var(--surf);border:1px solid var(--line);border-radius:var(--r4);overflow:hidden}
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{
  text-align:left;padding:11px 16px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--txt3);background:var(--surf2);border-bottom:1px solid var(--line);
}
.table td{padding:13px 16px;border-bottom:1px solid var(--line);color:var(--txt2)}
.table tr:last-child td{border-bottom:none}
.table tr:hover td{background:rgba(79,110,245,.03)}
.table .td-main{color:var(--txt);font-weight:500}

/* ── BADGES ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 9px;border-radius:100px;
  font-size:10px;font-family:var(--mono);
}
.b-blue{background:var(--bluedim);color:var(--blue)}
.b-teal{background:var(--tealdim);color:var(--teal)}
.b-vio{background:var(--viodim);color:var(--vio)}
.b-amb{background:var(--ambd);color:var(--amb)}
.b-red{background:var(--redd);color:var(--red)}
.b-grn{background:var(--grnd);color:var(--grn)}
.b-grey{background:var(--line);color:var(--txt3)}

/* ── FORMS ── */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--txt2);margin-bottom:6px}
.form-input,.form-select,.form-textarea{
  width:100%;padding:10px 13px;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r2);color:var(--txt);
  font-size:13px;font-family:var(--body);outline:none;
  transition:border-color .2s,box-shadow .2s;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,110,245,.14);
}
.form-input::placeholder,.form-textarea::placeholder{color:var(--txt3)}
.form-select{
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23575b7a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
}
.form-textarea{resize:vertical;min-height:90px}
.form-error{font-size:11px;color:var(--red);margin-top:4px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── MODAL ── */
.overlay{
  position:fixed;inset:0;z-index:1000;
  background:rgba(0,0,0,.72);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;
  padding:20px;animation:fadeIn .2s;
}
.modal{
  background:var(--surf);border:1px solid var(--line2);
  border-radius:var(--r5);padding:32px;width:100%;max-width:500px;
  max-height:90vh;overflow-y:auto;animation:slideUp .25s;position:relative;
}
.modal-lg{max-width:700px}
.modal-xl{max-width:900px}
.modal-close{
  position:absolute;top:16px;right:16px;
  width:30px;height:30px;border-radius:50%;
  background:var(--bg2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--txt3);transition:all .15s;
}
.modal-close:hover{background:var(--bg3);color:var(--txt)}
.modal-title{font-size:18px;font-weight:600;margin-bottom:6px}
.modal-sub{font-size:13px;color:var(--txt2);margin-bottom:24px}

/* ── DROPDOWN ── */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{
  position:absolute;top:calc(100% + 6px);right:0;
  background:var(--surf2);border:1px solid var(--line2);
  border-radius:var(--r3);padding:6px;
  min-width:180px;z-index:500;
  animation:slideUp .15s;box-shadow:var(--sh);
}
.dropdown-item{
  display:flex;align-items:center;gap:9px;
  padding:8px 10px;border-radius:var(--r2);
  font-size:13px;color:var(--txt2);
  transition:all .12s;cursor:pointer;
}
.dropdown-item:hover{background:var(--bg3);color:var(--txt)}
.dropdown-item .ico{font-size:14px;width:16px;text-align:center}
.dropdown-div{height:1px;background:var(--line);margin:4px 0}

/* ── TOAST ── */
.toast-wrap{position:fixed;bottom:24px;right:24px;z-index:2000;display:flex;flex-direction:column;gap:10px}
.toast{
  background:var(--surf2);border:1px solid var(--line2);
  border-radius:var(--r3);padding:12px 16px;
  font-size:13px;display:flex;align-items:center;gap:10px;
  box-shadow:var(--shb);animation:slideUp .25s;
  max-width:320px;
}
.toast-success{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.08);color:var(--grn)}
.toast-error  {border-color:rgba(239,68,68,.4); background:rgba(239,68,68,.08); color:var(--red)}
.toast-info   {border-color:rgba(79,110,245,.4);background:rgba(79,110,245,.08);color:var(--blue)}

/* ── PAGE HEADERS ── */
.page-header{margin-bottom:28px}
.page-title{font-size:22px;font-weight:600;color:var(--txt);margin-bottom:4px}
.page-sub{font-size:14px;color:var(--txt2)}
.page-actions{display:flex;align-items:center;gap:10px}

/* ── SEARCH BAR ── */
.search-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r2);padding:8px 12px;
  transition:border-color .2s;flex:1;max-width:360px;
}
.search-bar:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(79,110,245,.12)}
.search-bar input{background:none;border:none;outline:none;color:var(--txt);font-size:13px;flex:1;width:0}
.search-bar input::placeholder{color:var(--txt3)}
.search-ico{font-size:14px;color:var(--txt3);flex-shrink:0}

/* ── TABS ── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:20px}
.tab{
  padding:9px 16px;font-size:13px;color:var(--txt2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:all .15s;cursor:pointer;
}
.tab:hover{color:var(--txt)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ── KANBAN ── */
.kanban-board{display:flex;gap:16px;overflow-x:auto;padding-bottom:12px}
.kanban-col{
  flex-shrink:0;width:280px;
  background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r4);overflow:hidden;
}
.kanban-col-header{
  padding:12px 16px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;font-weight:600;
}
.kanban-col-body{padding:10px;display:flex;flex-direction:column;gap:8px;min-height:200px}
.kanban-card{
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r3);padding:12px;
  cursor:grab;transition:all .15s;
}
.kanban-card:hover{border-color:var(--line2);box-shadow:var(--sh)}
.kanban-card.dragging{opacity:.5;cursor:grabbing}
.kanban-card-title{font-size:13px;font-weight:500;margin-bottom:8px}
.kanban-card-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px}

/* ── CALENDAR ── */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-day-head{
  text-align:center;font-family:var(--mono);font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--txt3);padding:6px 0;
}
.cal-day{
  aspect-ratio:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  border-radius:var(--r2);padding:6px;
  font-size:12px;cursor:pointer;
  transition:background .15s;position:relative;
  min-height:60px;
}
.cal-day:hover{background:var(--surf2)}
.cal-day.today{background:var(--bluedim);color:var(--blue)}
.cal-day.other-month{color:var(--txt3)}
.cal-day.has-event::after{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--teal);position:absolute;bottom:5px;
}
.cal-event-dot{
  width:100%;padding:2px 4px;border-radius:3px;
  font-size:9px;font-family:var(--mono);
  background:var(--bluedim);color:var(--blue);
  margin-top:2px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;
}

/* ── CHAT / COLLAB ── */
.chat-wrap{display:flex;height:calc(100vh - 60px - 70px);overflow:hidden}
.chat-sidebar{
  width:280px;flex-shrink:0;border-right:1px solid var(--line);
  overflow-y:auto;background:var(--bg1);
}
.chat-main{flex:1;display:flex;flex-direction:column;min-width:0}
.chat-header{
  padding:14px 20px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:12px;background:var(--surf);
}
.chat-messages{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:14px}
.chat-input-bar{
  padding:14px 20px;border-top:1px solid var(--line);background:var(--surf);
  display:flex;align-items:flex-end;gap:10px;
}
.chat-input{
  flex:1;background:var(--bg2);border:1px solid var(--line);
  border-radius:var(--r3);padding:10px 14px;
  font-size:13px;color:var(--txt);resize:none;outline:none;
  max-height:120px;min-height:40px;transition:border-color .2s;
}
.chat-input:focus{border-color:var(--blue)}
.msg{display:flex;gap:10px;align-items:flex-start}
.msg-body{
  background:var(--surf2);border:1px solid var(--line);
  border-radius:var(--r3);padding:10px 14px;
  max-width:70%;font-size:13px;line-height:1.65;
}
.msg.own{flex-direction:row-reverse}
.msg.own .msg-body{background:var(--bluedim);border-color:rgba(79,110,245,.3);color:var(--txt)}
.msg-time{font-size:10px;color:var(--txt3);margin-top:5px;font-family:var(--mono)}
.channel-item{
  padding:10px 14px;display:flex;align-items:center;gap:9px;
  cursor:pointer;border-radius:var(--r2);margin:2px 8px;
  font-size:13px;color:var(--txt2);transition:all .12s;
}
.channel-item:hover,.channel-item.active{background:var(--surf2);color:var(--txt)}
.channel-unread{
  margin-left:auto;background:var(--blue);color:#fff;
  border-radius:100px;font-size:10px;padding:1px 6px;font-family:var(--mono);
}

/* ── PIPELINE / CRM ── */
.pipeline-stage{
  display:flex;align-items:center;gap:0;
  background:var(--surf);border:1px solid var(--line);
  border-radius:var(--r3);overflow:hidden;margin-bottom:16px;
}
.stage-item{
  flex:1;padding:8px 12px;text-align:center;
  font-size:12px;font-family:var(--mono);color:var(--txt3);
  border-right:1px solid var(--line);transition:all .15s;
  cursor:pointer;
}
.stage-item:last-child{border-right:none}
.stage-item:hover,.stage-item.active{background:var(--bluedim);color:var(--blue)}
.stage-item .cnt{font-size:20px;font-weight:600;color:var(--txt);display:block;font-family:var(--mono)}

/* ── ANIMATIONS ── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes glow{0%,100%{box-shadow:0 0 20px rgba(79,110,245,.15)}50%{box-shadow:0 0 40px rgba(79,110,245,.35)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes gradShift{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
.fade-in{animation:fadeIn .35s ease}
.slide-up{animation:slideUp .35s ease}
.spin{animation:spin .7s linear infinite}
.pulse-dot{animation:pulse 2s infinite}

/* ── MISC UTILITIES ── */
.spinner{width:18px;height:18px;border:2px solid var(--line2);border-top-color:var(--blue);border-radius:50%;animation:spin .7s linear infinite}
.divider{height:1px;background:var(--line);margin:16px 0}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:9px;margin-bottom:12px}
.eyebrow::before{content:'';width:16px;height:1px;background:var(--blue)}
.text-gradient{background:linear-gradient(120deg,var(--blue),var(--vio),var(--teal));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glow-text{text-shadow:0 0 30px rgba(79,110,245,.5)}
.mono{font-family:var(--mono)}
.empty-state{text-align:center;padding:60px 20px;color:var(--txt2)}
.empty-state .ico{font-size:40px;margin-bottom:12px;opacity:.4}
.empty-state .title{font-size:16px;font-weight:600;color:var(--txt);margin-bottom:6px}
.empty-state .desc{font-size:13px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){.wrap,.wrap-sm{padding:0 24px}.sidebar{width:180px}}
@media(max-width:768px){
  .wrap,.wrap-sm{padding:0 18px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .sidebar{display:none}
  .page-content{padding:20px 18px}
  .nav-links{display:none}
}

/* ═══════════════════════════════════════════════════
   LIGHT THEME — Component Overrides
   Ensures every hardcoded dark value is corrected
   ═══════════════════════════════════════════════════ */

/* Nav */
[data-theme="light"] .nav {
  background: rgba(255,255,255,.95);
  border-bottom-color: var(--line);
}
[data-theme="light"] .nav-logo { color: var(--txt); }
[data-theme="light"] .nav-links a { color: var(--txt2); }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { color: var(--txt); background: var(--surf2); }
[data-theme="light"] .theme-toggle,
[data-theme="light"] .user-chip { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .user-chip:hover { border-color: var(--line2); }

/* Sidebar */
[data-theme="light"] .sidebar { background: var(--surf); border-right-color: var(--line); }
[data-theme="light"] .sb-link { color: var(--txt2); }
[data-theme="light"] .sb-link:hover { color: var(--txt); background: var(--surf2); }
[data-theme="light"] .sb-link.active { color: var(--blue); background: var(--bluedim); }
[data-theme="light"] .sb-label { color: var(--txt3); }

/* Cards */
[data-theme="light"] .card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .card:hover { border-color: var(--line2); }
[data-theme="light"] .card-title { color: var(--txt); }
[data-theme="light"] .card-body { color: var(--txt2); }
[data-theme="light"] .stat-card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .stat-n { color: var(--txt); }
[data-theme="light"] .stat-label { color: var(--txt3); }

/* Tables */
[data-theme="light"] .table-wrap { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .table th { background: var(--surf2); color: var(--txt3); border-bottom-color: var(--line); }
[data-theme="light"] .table td { color: var(--txt2); border-bottom-color: var(--line); }
[data-theme="light"] .table tr:hover td { background: var(--bluedim); }
[data-theme="light"] .td-main { color: var(--txt) !important; }

/* Buttons */
[data-theme="light"] .btn-ghost { color: var(--txt2); border-color: var(--line2); }
[data-theme="light"] .btn-ghost:hover { color: var(--txt); border-color: var(--txt3); }
[data-theme="light"] .btn-icon { background: var(--surf); border-color: var(--line); color: var(--txt2); }
[data-theme="light"] .btn-icon:hover { background: var(--surf2); color: var(--txt); }

/* Forms */
[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
  background: #fff;
  border-color: var(--line2);
  color: var(--txt);
}
[data-theme="light"] .form-input::placeholder,
[data-theme="light"] .form-textarea::placeholder { color: var(--txt3); }
[data-theme="light"] .form-label { color: var(--txt2); }
[data-theme="light"] .form-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b72a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Modal */
[data-theme="light"] .overlay { background: rgba(15,17,48,.55); }
[data-theme="light"] .modal { background: var(--surf); border-color: var(--line2); }
[data-theme="light"] .modal-title { color: var(--txt); }
[data-theme="light"] .modal-sub { color: var(--txt2); }
[data-theme="light"] .modal-close { background: var(--surf2); border-color: var(--line); color: var(--txt2); }
[data-theme="light"] .modal-close:hover { background: var(--line); color: var(--txt); }

/* Dropdown */
[data-theme="light"] .dropdown-menu { background: var(--surf); border-color: var(--line2); }
[data-theme="light"] .dropdown-item { color: var(--txt2); }
[data-theme="light"] .dropdown-item:hover { background: var(--surf2); color: var(--txt); }
[data-theme="light"] .dropdown-div { background: var(--line); }

/* Toasts */
[data-theme="light"] .toast { background: var(--surf); border-color: var(--line2); color: var(--txt); }

/* Badges */
[data-theme="light"] .b-grey { background: var(--line); color: var(--txt2); }

/* Kanban */
[data-theme="light"] .kanban-col { background: var(--surf2); border-color: var(--line); }
[data-theme="light"] .kanban-col-header { color: var(--txt); }
[data-theme="light"] .kanban-card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .kanban-card:hover { border-color: var(--line2); }
[data-theme="light"] .kanban-card-title { color: var(--txt); }

/* Channel / chat items */
[data-theme="light"] .channel-item { color: var(--txt2); }
[data-theme="light"] .channel-item:hover,
[data-theme="light"] .channel-item.active { background: var(--surf2); color: var(--txt); }

/* Page headers */
[data-theme="light"] .page-title { color: var(--txt); }
[data-theme="light"] .page-sub { color: var(--txt2); }

/* Search */
[data-theme="light"] .search-bar { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .search-bar input { color: var(--txt); }
[data-theme="light"] .search-bar input::placeholder { color: var(--txt3); }
[data-theme="light"] .search-ico { color: var(--txt3); }

/* Tabs */
[data-theme="light"] .tabs { border-bottom-color: var(--line); }
[data-theme="light"] .tab { color: var(--txt2); }
[data-theme="light"] .tab:hover { color: var(--txt); }
[data-theme="light"] .tab.active { color: var(--blue); }

/* Divider */
[data-theme="light"] .divider { background: var(--line); }

/* Empty state */
[data-theme="light"] .empty-state { color: var(--txt2); }
[data-theme="light"] .empty-state .title { color: var(--txt); }

/* Avatar fallback bg in light mode */
[data-theme="light"] .ava { background: var(--bluedim); color: var(--blue); }
[data-theme="light"] .ava-teal { background: var(--tealdim); color: var(--teal); }
[data-theme="light"] .ava-vio { background: var(--viodim); color: var(--vio); }

/* Pipeline stage */
[data-theme="light"] .pipeline-stage { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .stage-item { color: var(--txt2); border-right-color: var(--line); }
[data-theme="light"] .stage-item .cnt { color: var(--txt); }

/* Scrollbar light */
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--surf2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--line2); }

/* ═══════════════════════════════════════════════════
   LIGHT THEME — App Page Specific Overrides
   Fixes inline styles generated by JS templates
   ═══════════════════════════════════════════════════ */

/* Dashboard */
[data-theme="light"] .stat-grid .stat-card .stat-val { color: var(--txt); }
[data-theme="light"] .stat-grid .stat-card .stat-label { color: var(--txt3); }
[data-theme="light"] .pl-stage { background: var(--surf); }
[data-theme="light"] .pl-stage:hover { background: var(--surf2); }
[data-theme="light"] .pl-stage-n { color: var(--txt); }
[data-theme="light"] .pl-stage-l { color: var(--txt3); }
[data-theme="light"] .feed-item { border-bottom-color: var(--line); }
[data-theme="light"] .feed-title { color: var(--txt); }
[data-theme="light"] .feed-sub { color: var(--txt3); }
[data-theme="light"] .feed-time { color: var(--txt3); }
[data-theme="light"] .meeting-item { border-bottom-color: var(--line); }
[data-theme="light"] .meeting-day { color: var(--txt); }
[data-theme="light"] .meeting-mon { color: var(--txt3); }
[data-theme="light"] .meeting-title { color: var(--txt); }
[data-theme="light"] .meeting-meta { color: var(--txt3); }
[data-theme="light"] .task-item { border-bottom-color: var(--line); }
[data-theme="light"] .task-title { color: var(--txt); }
[data-theme="light"] .task-meta { color: var(--txt3); }
[data-theme="light"] .task-check { border-color: var(--line2); }

/* CRM */
[data-theme="light"] .contact-card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .contact-card:hover { border-color: rgba(61,92,232,.4); }
[data-theme="light"] .contact-name { color: var(--txt); }
[data-theme="light"] .contact-company { color: var(--txt3); }
[data-theme="light"] .contact-meta-item { color: var(--txt3); }
[data-theme="light"] .contact-value { color: var(--teal); }
[data-theme="light"] .detail-panel { background: var(--surf); border-left-color: var(--line); }
[data-theme="light"] .detail-key { color: var(--txt3); }
[data-theme="light"] .detail-val { color: var(--txt); }
[data-theme="light"] .detail-row { border-bottom-color: var(--line); }
[data-theme="light"] .detail-section-title { color: var(--txt3); }
[data-theme="light"] .filter-chip { color: var(--txt2); border-color: var(--line2); }
[data-theme="light"] .filter-chip:hover,
[data-theme="light"] .filter-chip.active { background: var(--bluedim); border-color: rgba(61,92,232,.4); color: var(--blue); }
[data-theme="light"] .prob-bar { background: var(--line2); }
[data-theme="light"] .crm-tab { color: var(--txt2); }
[data-theme="light"] .crm-tab.active { color: var(--blue); }

/* Email */
[data-theme="light"] .email-sidebar { background: var(--surf); border-right-color: var(--line); }
[data-theme="light"] .email-list-panel { border-right-color: var(--line); }
[data-theme="light"] .email-read-panel { background: var(--surf2); }
[data-theme="light"] .folder-link { color: var(--txt2); }
[data-theme="light"] .folder-link:hover,
[data-theme="light"] .folder-link.active { background: var(--surf2); color: var(--txt); }
[data-theme="light"] .email-list-header { border-bottom-color: var(--line); }
[data-theme="light"] .email-item { border-bottom-color: var(--line); }
[data-theme="light"] .email-item:hover { background: var(--surf2); }
[data-theme="light"] .email-item.active { background: var(--bluedim); }
[data-theme="light"] .email-item-from { color: var(--txt); }
[data-theme="light"] .email-item-subject { color: var(--txt2); }
[data-theme="light"] .email-item-preview { color: var(--txt3); }
[data-theme="light"] .email-item-time { color: var(--txt3); }
[data-theme="light"] .read-header { border-bottom-color: var(--line); }
[data-theme="light"] .read-subject { color: var(--txt); }
[data-theme="light"] .read-body { color: var(--txt2); }
[data-theme="light"] .read-actions { border-top-color: var(--line); background: var(--surf); }
[data-theme="light"] .compose-overlay { background: var(--surf); border-color: var(--line2); }
[data-theme="light"] .compose-header { background: var(--surf2); border-bottom-color: var(--line); }
[data-theme="light"] .compose-title { color: var(--txt); }
[data-theme="light"] .compose-field { border-bottom-color: var(--line); }
[data-theme="light"] .compose-field label { color: var(--txt3); }
[data-theme="light"] .compose-field input { color: var(--txt); }
[data-theme="light"] .compose-text { color: var(--txt); }
[data-theme="light"] .compose-footer { border-top-color: var(--line); background: var(--surf); }
[data-theme="light"] .empty-read { color: var(--txt2); }

/* Meetings */
[data-theme="light"] .cal-wrap { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .cal-head { color: var(--txt3); }
[data-theme="light"] .cal-day:hover { background: var(--surf2); border-color: var(--line); }
[data-theme="light"] .cal-day.today { background: var(--bluedim); border-color: rgba(61,92,232,.3); }
[data-theme="light"] .cal-day .day-num { color: var(--txt); }
[data-theme="light"] .cal-day.other .day-num { color: var(--txt3); }
[data-theme="light"] .cal-day.today .day-num { color: var(--blue); }
[data-theme="light"] .cal-month { color: var(--txt); }
[data-theme="light"] .cal-nav-btn { background: var(--surf); border-color: var(--line); color: var(--txt2); }
[data-theme="light"] .upcoming-list { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .upcoming-header { border-bottom-color: var(--line); color: var(--txt); }
[data-theme="light"] .upcoming-item { border-bottom-color: var(--line); }
[data-theme="light"] .upcoming-item:hover { background: var(--surf2); }
[data-theme="light"] .ui-time { color: var(--txt3); }
[data-theme="light"] .ui-title { color: var(--txt); }
[data-theme="light"] .ui-meta { color: var(--txt3); }
[data-theme="light"] .meet-detail { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .meet-detail-title { color: var(--txt); }
[data-theme="light"] .meet-detail-ico { color: var(--txt3); }
[data-theme="light"] .meet-detail-val { color: var(--txt2); }
[data-theme="light"] .meet-detail-row { border-bottom-color: var(--line); }

/* Collaboration */
[data-theme="light"] .chat-container { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .chat-channels { background: var(--surf2); border-right-color: var(--line); }
[data-theme="light"] .ch-header { border-bottom-color: var(--line); color: var(--txt); }
[data-theme="light"] .ch-section-label { color: var(--txt3); }
[data-theme="light"] .ch-item { color: var(--txt2); }
[data-theme="light"] .ch-item:hover,
[data-theme="light"] .ch-item.active { background: var(--surf); color: var(--txt); }
[data-theme="light"] .chat-top { background: var(--surf2); border-bottom-color: var(--line); }
[data-theme="light"] .chat-title { color: var(--txt); }
[data-theme="light"] .chat-desc { color: var(--txt3); }
[data-theme="light"] .chat-msgs { background: var(--bg1); }
[data-theme="light"] .msg-name { color: var(--txt); }
[data-theme="light"] .msg-time-inline { color: var(--txt3); }
[data-theme="light"] .msg-bubble { background: var(--surf); border-color: var(--line); color: var(--txt2); }
[data-theme="light"] .chat-input-area { background: var(--surf); border-top-color: var(--line); }
[data-theme="light"] .chat-box { background: var(--bg2); border-color: var(--line); color: var(--txt); }
[data-theme="light"] .tasks-container { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .tasks-header { border-bottom-color: var(--line); color: var(--txt); }
[data-theme="light"] .task-filters { border-bottom-color: var(--line); }
[data-theme="light"] .task-filter { color: var(--txt2); border-color: var(--line2); }
[data-theme="light"] .task-filter:hover,
[data-theme="light"] .task-filter.active { background: var(--bluedim); border-color: rgba(61,92,232,.4); color: var(--blue); }
[data-theme="light"] .task-row { border-bottom-color: var(--line); }
[data-theme="light"] .task-row:hover { background: var(--surf2); }
[data-theme="light"] .task-row-title { color: var(--txt); }
[data-theme="light"] .task-row-desc { color: var(--txt3); }
[data-theme="light"] .task-cb { border-color: var(--line2); }
[data-theme="light"] .collab-tab { color: var(--txt2); }
[data-theme="light"] .collab-tab.active { color: var(--blue); }

/* Team */
[data-theme="light"] .member-card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .member-card:hover { border-color: rgba(61,92,232,.4); }
[data-theme="light"] .member-name { color: var(--txt); }
[data-theme="light"] .member-role { color: var(--txt3); }
[data-theme="light"] .member-stats { border-top-color: var(--line); }
[data-theme="light"] .ms-n { color: var(--txt); }
[data-theme="light"] .ms-l { color: var(--txt3); }
[data-theme="light"] .invite-box { background: linear-gradient(135deg,rgba(61,92,232,.06),rgba(124,58,237,.04)); border-color: rgba(61,92,232,.2); }
[data-theme="light"] .invite-title { color: var(--txt); }
[data-theme="light"] .invite-sub { color: var(--txt2); }

/* Profile */
[data-theme="light"] .profile-card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .profile-ava-big { border-color: var(--surf); }
[data-theme="light"] .profile-name { color: var(--txt); }
[data-theme="light"] .profile-email { color: var(--txt3); }
[data-theme="light"] .ps-cell { background: var(--surf2); }
[data-theme="light"] .ps-n { color: var(--txt); }
[data-theme="light"] .ps-l { color: var(--txt3); }
[data-theme="light"] .pnav-item { color: var(--txt2); }
[data-theme="light"] .pnav-item:hover,
[data-theme="light"] .pnav-item.active { background: var(--surf2); color: var(--txt); }
[data-theme="light"] .settings-section { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .settings-title { color: var(--txt); }
[data-theme="light"] .settings-sub { color: var(--txt2); }
[data-theme="light"] .toggle-row { border-bottom-color: var(--line); }
[data-theme="light"] .toggle-label { color: var(--txt); }
[data-theme="light"] .toggle-desc { color: var(--txt3); }
[data-theme="light"] .toggle-slider { background: var(--line2); }
[data-theme="light"] .danger-zone { background: rgba(220,38,38,.04); border-color: rgba(220,38,38,.2); }
[data-theme="light"] .activity-item { border-bottom-color: var(--line); }

/* Auth pages */
[data-theme="light"] .auth-card { background: var(--surf); border-color: var(--line2); box-shadow: 0 20px 60px rgba(0,0,0,.12); }
[data-theme="light"] .auth-logo .name { color: var(--txt); }
[data-theme="light"] .auth-title { color: var(--txt); }
[data-theme="light"] .auth-sub { color: var(--txt2); }
[data-theme="light"] .auth-switch { color: var(--txt2); }
[data-theme="light"] .demo-box { background: var(--surf2); border-color: var(--line); color: var(--txt3); }

/* Help Centre */
[data-theme="light"] .help-nav { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .help-nav-label { color: var(--txt3); }
[data-theme="light"] .help-nav-link { color: var(--txt2); }
[data-theme="light"] .help-nav-link:hover { background: var(--surf2); color: var(--txt); }
[data-theme="light"] .help-nav-link.active { background: var(--bluedim); color: var(--blue); }
[data-theme="light"] .help-article { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .help-article-header:hover { background: var(--surf2); }
[data-theme="light"] .help-article-title { color: var(--txt); }
[data-theme="light"] .help-article-toggle { color: var(--txt3); }
[data-theme="light"] .help-article-body { color: var(--txt2); }
[data-theme="light"] .step-title { color: var(--txt); }
[data-theme="light"] .step-desc { color: var(--txt2); }
[data-theme="light"] .code-block { background: var(--bg3); border-color: var(--line); color: var(--teal); }
[data-theme="light"] .feat-table th { background: var(--surf2); color: var(--txt3); border-bottom-color: var(--line); }
[data-theme="light"] .feat-table td { color: var(--txt2); border-bottom-color: var(--line); }
[data-theme="light"] .feat-table .td-h { color: var(--txt); }
[data-theme="light"] .kb-key { background: var(--surf2); border-color: var(--line2); color: var(--txt); }
[data-theme="light"] .kb-desc { color: var(--txt2); }
[data-theme="light"] .kb-row { border-bottom-color: var(--line); }
[data-theme="light"] .quick-card { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .quick-card:hover { border-color: rgba(61,92,232,.4); }
[data-theme="light"] .quick-card-title { color: var(--txt); }
[data-theme="light"] .quick-card-desc { color: var(--txt3); }
[data-theme="light"] .help-search { background: var(--surf); border-color: var(--line); }
[data-theme="light"] .help-search input { color: var(--txt); }

/* 404 page */
[data-theme="light"] .code { color: var(--blue); }

/* Fix remaining elements with inline background colors in JS output */
[data-theme="light"] [style*="color:#fff"] { color: var(--txt) !important; }
[data-theme="light"] [style*="color: #fff"] { color: var(--txt) !important; }