/* Runjin visual refresh: Instagram-inspired polish, with existing markup and
   behavior intentionally left intact. Loaded last so page-specific styles
   inherit the same visual system. */
:root {
  --sidebar: #fffdfc;
  --sidebar-active: #edf3ff;
  --text: #202b3d;
  --muted: #758197;
  --border: #e5ebf4;
  --bg: #f4f7fc;
  --card: #fff;
  --primary: #3974d2;
  --success: #248a68;
  --warn: #b97528;
  --danger: #c24755;
  --indigo: #586bd0;
  --blue: #4380dc;
  --soft-shadow: 0 16px 44px rgba(38, 65, 112, .075);
}

/* Keep the content width fixed as pages with different heights are opened. */
html { scrollbar-gutter: stable; scroll-behavior: auto; }
html.rj-nav-leave .content { opacity:.72; transition:opacity .07s ease; }
html.rj-nav-enter .content { animation:rjRouteEnter .22s cubic-bezier(.2,.72,.25,1) both; }
@keyframes rjRouteEnter { from { opacity:.22; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  html.rj-nav-leave .content, html.rj-nav-enter .content { animation-duration:.01ms; transition-duration:.01ms; }
  .nav-group .submenu { transition-duration: .01ms !important; }
}
body {
  color: var(--text);
  background:
    radial-gradient(ellipse at 95% 0%, rgba(72, 126, 218, .085), transparent 29rem),
    radial-gradient(ellipse at 48% 100%, rgba(88, 107, 208, .045), transparent 38rem),
    #f4f7fc;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
}

::selection { background: rgba(57, 116, 210, .18); color: #243b60; }
a { color: var(--primary); transition: color .18s ease; }
a:hover { color: var(--primary-strong, #2f68bd); }
:focus-visible { outline: 3px solid rgba(57, 116, 210, .28); outline-offset: 2px; }

.sidebar {
  width: 258px;
  background: rgba(252, 253, 255, .94);
  border-right: 1px solid rgba(225, 233, 245, .95);
  box-shadow: 10px 0 38px rgba(38, 65, 112, .045);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.brand {
  min-height: 78px;
  padding: 20px 22px;
  color: #26354b;
  font-size: 18px;
  border-bottom-color: var(--border);
}
.brand .logo {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  box-shadow: 0 5px 15px rgba(57, 116, 210, .18);
}
.nav { padding: 17px 13px; }
.nav a, .nav-group .group-label {
  min-height: 44px;
  margin: 4px 0;
  padding: 10px 14px;
  border-radius: 13px;
  color: #706673;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nav a:hover, .nav-group .group-label:hover {
  color: #315fa8;
  background: #edf4ff;
  transform: translateX(2px);
}
.nav a.active {
  color: #315fa8;
  background: linear-gradient(110deg, #e8f1ff, #edf0ff);
  border: 0;
  padding-left: 14px;
  box-shadow: inset 3px 0 #3974d2;
  font-weight: 650;
}
.nav a .nav-badge {
  color: #fff;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  border-radius: 999px;
  padding: 2px 8px;
}
.nav-group .nav-caret { transition: transform .2s ease; }
.nav-group.open .nav-caret { transform: rotate(90deg); }
@media (min-width: 769px) {
  .nav-group .submenu {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 15px;
    box-shadow: var(--soft-shadow);
  }
  .nav-group .submenu a.active {
    color: #315fa8;
    background: #edf3ff;
    box-shadow: none;
  }
}

.main { margin-left: 258px; }
.topbar {
  height: 72px;
  padding: 0 34px;
  background: rgba(252, 253, 255, .78);
  border-bottom-color: rgba(225, 233, 245, .9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.topbar .left { font-size: 16px; font-weight: 650; }
.topbar .right { gap: 14px; }
.topbar .right a {
  color: #68758c;
  text-decoration: none;
  padding: 7px 10px;
  border-radius: 10px;
}
.topbar .right a:hover { color: #315fa8; background: #edf3ff; }
.content { padding: 30px 34px 44px; }
.page-title { color: #302832; font-size: 26px; letter-spacing: -.035em; }

.card, .stat-card {
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 20px;
  box-shadow: var(--soft-shadow);
}
.card { padding: 22px; margin-bottom: 22px; }
.stat-card { padding: 20px; }
.card h3 { color: #39313b; }
.card h3 .badge { background: #edf3ff; color: #315fa8; }
.grid { gap: 18px; }
.stat-card .value { letter-spacing: -.04em; }
.quick a {
  min-height: 112px;
  color: #2d3a50;
  background: rgba(255, 255, 255, .83);
  border: 1px solid #e8eef7;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(38, 65, 112, .045);
}
.quick a:hover {
  color: #315fa8;
  background: #fff;
  border-color: #cbdcf5;
  box-shadow: 0 15px 30px rgba(55, 99, 166, .11);
  transform: translateY(-3px);
}
.quick .icon { filter: saturate(.9); }

table { font-size: 13px; }
th, td { border-bottom-color: #e9eef6; padding: 12px 10px; }
th { color: #748197; background: #f8faff; font-weight: 650; }
tr:hover td { background: #f7faff; }
.tag { border-radius: 999px; padding: 3px 9px; font-weight: 550; }
.tag-green { background: #e6f5ef; color: #247755; }
.tag-blue { background: #eaf2ff; color: #315fa8; }
.tag-gray { background: #eef1f6; color: #66748a; }
.tag-orange { background: #fff0e4; color: #a65d1c; }
.tag-red { background: #ffedf0; color: #a83e51; }

button {
  border-radius: 12px;
  background: linear-gradient(115deg, #5e8de2, #4778d4 58%, #596bd0);
  box-shadow: 0 7px 17px rgba(57, 116, 210, .19);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
button:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(57, 116, 210, .25); }
button.secondary {
  color: #5d6b82;
  background: #fff;
  border: 1px solid #e2e9f3;
  box-shadow: none;
}
button.secondary:hover { color: #315fa8; background: #f4f8ff; border-color: #cadaf2; }
button.success { background: linear-gradient(115deg, #5e8de2, #536bd2); }
button.danger { background: linear-gradient(115deg, #d45165, #ba385e); }
input, select, textarea {
  color: #29374d;
  border-color: #dfe7f2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: #88aee8 !important;
  box-shadow: 0 0 0 4px rgba(57, 116, 210, .11) !important;
}
label { color: #706673; }
.upload-area {
  color: #827784;
  background: linear-gradient(135deg, #fafdff, #f5f7ff);
  border-color: #cfdef4;
  border-radius: 18px;
}
.upload-area:hover, .upload-area.drag {
  color: #315fa8;
  background: #eef5ff;
  border-color: #3974d2;
}
.day, details { border-color: #e5ebf4; border-radius: 15px; }
.day-h { color: #3c68b2; }
pre { border-radius: 14px; }
.empty { color: #918792; }

.modal-overlay { background: rgba(30, 43, 65, .35); backdrop-filter: blur(6px); }
.modal { border: 1px solid rgba(255, 255, 255, .85); border-radius: 22px; box-shadow: 0 24px 70px rgba(34, 52, 83, .2); }
.bottom-bar, .mtabs {
  background: rgba(252, 253, 255, .92);
  border-color: #e5ebf4;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.mtabs a.active { color: #3974d2; font-weight: 650; }
.mtabs a .ic { filter: saturate(.85); }

/* Standalone sign-in and registration screens share the same brand language. */
body:has(> .site-title), body:has(> .box) {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(72, 126, 218, .15), transparent 24rem),
    radial-gradient(circle at 82% 82%, rgba(88, 107, 208, .13), transparent 27rem),
    linear-gradient(135deg, #f7faff, #f2f6fd 55%, #f8f9ff);
}
body:has(> .site-title) .site-title { color: #2b3b54; margin: 20px 0 32px; }
body:has(> .site-title) .site-title::before {
  content: none;
  display: none;
}
.brand-mark { display:block; width:64px; height:64px; margin:0 auto 14px; object-fit:cover; border:4px solid rgba(255,255,255,.96); border-radius:19px; box-shadow:0 10px 24px rgba(46,111,197,.2); }
body:has(> .site-title) .site-title .big {
  font-weight: 750;
  letter-spacing: .18em;
  background: linear-gradient(110deg, #5e8de2, #536bd2 62%, #6988d8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body:has(> .site-title) .site-title .sub { color: #748197; font-size: 17px; letter-spacing: .16em; }
body:has(> .site-title) .box, body:has(> .box) .box {
  width: min(100%, 390px);
  padding: 34px 32px;
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(37, 62, 105, .14);
  backdrop-filter: blur(20px);
}
body:has(> .box) { display: flex; }
body:has(> .site-title) .box::before,
body:has(> .box):not(:has(> .site-title)) .box::before {
  display: block;
  margin-bottom: 9px;
  color: #6580ac;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .18em;
}
body:has(> .site-title) .box::before { content: "RUNJIN  ·  WORKSPACE"; }
body:has(> .box):not(:has(> .site-title)) .box::before { content: "RUNJIN  ·  CREATE ACCOUNT"; }
body:has(> .site-title) h1, body:has(> .box) h1 { color: #2b3b54; font-size: 20px; margin-bottom: 20px; }
body:has(> .site-title) label, body:has(> .box) label { color: #706673; font-size: 14px; }
body:has(> .site-title) input, body:has(> .box) input { min-height: 47px; padding: 11px 13px; }
body:has(> .site-title) button, body:has(> .box) button { min-height: 48px; margin-top: 22px; font-weight: 650; }
body:has(> .site-title) .link, body:has(> .box) .link { margin-top: 20px; color: #827784; }
body:has(> .site-title) .link a, body:has(> .box) .link a { color: #3567b4; font-weight: 600; text-decoration: none; }
body:has(> .site-title) .link a:hover, body:has(> .box) .link a:hover { text-decoration: underline; }
body:has(> .site-title) .err, body:has(> .box) .err { padding: 10px 12px; border: 1px solid #efd7d9; border-radius: 12px; background: #fff7f7; color: #a83f4a; }
body:has(> .site-title) .ok, body:has(> .box) .ok { padding: 10px 12px; border: 1px solid #d9eee5; border-radius: 12px; background: #f3fbf7; color: #287855; }

/* New-lead toast now has a single clear action. */
.lead-toast { height: auto; min-height: 132px; gap: 10px; }
.lead-toast .row { margin-top: auto; }
.lead-toast .row button { min-width: 104px; }

/* Keep dense analytics legible while letting its existing layout stay intact. */
.dw .sec, .dw .mc { border-radius: 18px; box-shadow: 0 10px 28px rgba(38, 65, 112, .06); }
.dw .sec { border-color: #e5ebf4; }
.dw .dtab a.on { background: linear-gradient(115deg, #5e8de2, #536bd2); }
.dw .dexp { border-radius: 10px; }
.dw th { background: #f8faff; }

@media (max-width: 768px) {
  .sidebar { width: min(286px, 84vw); background: rgba(250, 252, 255, .98); }
  .main { margin-left: 0; }
  .topbar { height: 62px; padding: 0 16px; }
  .content { padding: 20px 14px 100px; }
  .page-title { font-size: 22px; }
  .card { padding: 17px; border-radius: 17px; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .stat-card { padding: 15px; }
  .stat-card .value { font-size: 25px; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mtabs { height: 64px; padding-bottom: env(safe-area-inset-bottom); }
  .bottom-bar { padding: 0 14px; }
}
@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; }
  body:has(> .site-title) .box, body:has(> .box) .box { padding: 28px 22px; border-radius: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Cohesive Runjin dashboard: one cool-blue identity and a consistent icon system. */
:root {
  --primary: #3779d3;
  --primary-strong: #2d65b8;
  --blue: #4d9fda;
  --indigo: #5d77d2;
  --text: #243247;
  --muted: #78869a;
  --border: #e4ebf4;
  --soft-shadow: 0 12px 32px rgba(33, 66, 112, .065);
}
a:hover { color: var(--primary-strong); }
.brand .logo { width:36px; height:36px; border-radius:11px; box-shadow:0 5px 14px rgba(55,121,211,.17); }
.nav a:hover, .nav-group .group-label:hover { color:#2d65b8; background:rgba(55,121,211,.075); }
.nav a.active { background:linear-gradient(105deg,#eaf3ff,#f1f6ff); color:#2d65b8; box-shadow:inset 3px 0 #4d9fda; }
.nav-group .submenu a.active { background:#eaf3ff; color:#2d65b8; }
.card:hover, .stat-card:hover { border-color:#dce8f6; box-shadow:0 16px 36px rgba(33,66,112,.09); }
.quick .icon { filter:none; }

.dash-welcome {
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center; justify-content:space-between;
  min-height:176px; margin:0 0 22px; padding:30px 34px; border:1px solid #dce9f7; border-radius:24px;
  background:linear-gradient(112deg,#f9fcff 0%,#edf5ff 60%,#e8f4fb 100%);
}
.dash-welcome-copy { position:relative; z-index:1; }
.dash-eyebrow { display:flex; align-items:center; gap:9px; margin-bottom:10px; color:#6f88a7; font-size:10px; font-weight:750; letter-spacing:.17em; }
.dash-eyebrow span { width:4px; height:4px; border-radius:50%; background:#58a9dd; }
.dash-welcome h1 { margin:0; color:#22334b; font-size:27px; line-height:1.3; letter-spacing:-.035em; }
.dash-welcome p { margin:8px 0 0; color:#7889a0; font-size:14px; }
.dash-primary-link { position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; padding:12px 17px; border:1px solid rgba(55,121,211,.14); border-radius:13px; color:#fff; background:linear-gradient(120deg,#4a91df,#3974cf); box-shadow:0 8px 18px rgba(55,121,211,.17); font-size:13px; font-weight:650; text-decoration:none; transition:transform .2s ease,box-shadow .2s ease; }
.dash-primary-link:hover { color:#fff; transform:translateY(-2px); box-shadow:0 12px 24px rgba(55,121,211,.22); }
.dash-primary-link svg,.quick-arrow svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.dash-orbit { position:absolute; z-index:-1; border:1px solid rgba(77,159,218,.13); border-radius:50%; pointer-events:none; }
.dash-orbit-one { width:270px; height:270px; right:16%; top:-178px; }
.dash-orbit-two { width:190px; height:190px; right:22%; top:-137px; }

.dashboard-stats { grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; margin-bottom:22px; }
.dashboard-stats .stat-card { display:flex; align-items:flex-start; gap:14px; min-width:0; min-height:132px; padding:20px; border-color:#e8eef6; border-radius:18px; box-shadow:0 8px 24px rgba(37,69,111,.045); }
.stat-icon,.quick-icon { display:grid; flex:0 0 auto; place-items:center; color:#3479c9; background:#eaf4ff; }
.stat-icon { width:42px; height:42px; border-radius:13px; }
.stat-icon svg,.quick-icon svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.tone-cyan { color:#2782be; background:#e9f6fc; }
.tone-indigo { color:#5c70c6; background:#eef0fc; }
.tone-blue { color:#3479c9; background:#eaf2ff; }
.tone-slate { color:#58738f; background:#edf3f7; }
.stat-copy { min-width:0; }
.dashboard-stats .label { margin:1px 0 4px; color:#78869a; font-size:12px; }
.dashboard-stats .value { color:#243247; font-size:29px; line-height:1.15; }
.dashboard-stats .trend,.dashboard-stats .stat-note { margin-top:7px; color:#8997aa; font-size:11px; }
.dashboard-stats .trend { color:#318b73; }
.dashboard-stats .stat-split { display:flex; align-items:center; gap:12px; font-size:25px; }
.stat-split span { display:flex; align-items:baseline; gap:5px; }
.stat-split small { color:#8997aa; font-size:10px; font-weight:500; letter-spacing:0; }
.stat-split i { width:1px; height:19px; background:#dfe7f1; }

.dashboard-live-leads { padding:22px 24px; }
.dashboard-live-leads .section-heading { margin-bottom:14px; }
.dashboard-leads-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; max-height:410px; overflow:auto; padding:2px 3px 3px 1px; }
.dashboard-lead { display:flex; align-items:center; justify-content:space-between; gap:14px; min-width:0; padding:13px 15px; border:1px solid #e5edf6; border-left:3px solid #4a8bd8; border-radius:14px; background:linear-gradient(130deg,#fff,#f8fbff); box-shadow:0 5px 16px rgba(38,70,111,.045); }
.dashboard-lead-copy { min-width:0; }
.dashboard-lead-title { color:#33445d; font-size:13px; font-weight:650; }
.dashboard-lead-title b { margin-left:4px; color:#263a55; }
.dashboard-lead-meta { margin-top:5px; overflow:hidden; color:#8291a6; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.dashboard-lead button { flex:0 0 auto; min-width:74px; padding:7px 13px; border-radius:10px; }
.dashboard-leads-empty { grid-column:1/-1; padding:20px 12px; border:1px dashed #dce6f1; border-radius:13px; color:#91a0b2; text-align:center; font-size:12px; background:#fbfdff; }
.dashboard-quick-card,.dashboard-recent { padding:23px 24px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:17px; }
.section-heading h3 { margin:0; color:#2b3b51; font-size:16px; }
.section-heading p { margin:4px 0 0; color:#8a97a9; font-size:12px; }
.section-index { color:#9aa8b8; font-size:10px; font-weight:700; letter-spacing:.16em; }
.dashboard-quick { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.dashboard-quick a { position:relative; display:flex; min-height:82px; flex-direction:row; align-items:center; justify-content:flex-start; gap:14px; padding:15px 17px; border:1px solid #e8eef6; border-radius:15px; background:#fff; box-shadow:none; }
.dashboard-quick a:hover { border-color:#cbdcf0; background:#fbfdff; transform:translateY(-2px); box-shadow:0 10px 22px rgba(40,78,124,.075); }
.quick-icon { width:44px; height:44px; border-radius:13px; }
.quick-copy { display:flex; min-width:0; flex:1; flex-direction:column; gap:3px; text-align:left; }
.quick-copy b { color:#2b3b51; font-size:13px; font-weight:650; }
.quick-copy small { color:#8997a9; font-size:11px; }
.quick-arrow { display:grid; place-items:center; width:30px; height:30px; color:#8ba0b8; border-radius:9px; background:#f5f8fc; }
.dashboard-quick a:hover .quick-arrow { color:#3679c7; background:#edf5ff; }
.dashboard-recent table { margin-top:5px; }
.dashboard-recent th { color:#718198; background:#f7f9fc; font-size:12px; }
.dashboard-recent td { color:#49586e; }
.dashboard-recent .empty { padding:35px 10px; color:#99a5b5; }
.dashboard-recent .badge { padding:5px 10px; border-radius:999px; color:#4776b5; background:#eef5fd; font-size:11px; }

/* Record tables keep action buttons and short fields on one line. */
.table-scroll { max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#c7d6e8 transparent; }
.task-record-table { min-width:1540px; table-layout:fixed; }
.task-record-table th,.task-record-table td { vertical-align:middle; }
.task-record-table th:nth-child(1),.task-record-table td:nth-child(1) { width:58px; white-space:nowrap; }
.task-record-table th:nth-child(2),.task-record-table td:nth-child(2) { width:98px; white-space:nowrap; }
.task-record-table th:nth-child(3),.task-record-table td:nth-child(3) { width:86px; white-space:nowrap; }
.task-record-table th:nth-child(4),.task-record-table td:nth-child(4) { width:105px; }
.task-record-table th:nth-child(5),.task-record-table td:nth-child(5) { width:218px; }
.task-record-table th:nth-child(6),.task-record-table td:nth-child(6) { width:272px; }
.task-record-table th:nth-child(7),.task-record-table td:nth-child(7) { width:145px; }
.task-record-table th:nth-child(8),.task-record-table td:nth-child(8) { width:94px; white-space:nowrap; }
.task-record-table th:nth-child(9),.task-record-table td:nth-child(9) { width:112px; white-space:nowrap; }
.task-record-table th:nth-child(10),.task-record-table td:nth-child(10),
.task-record-table th:nth-child(11),.task-record-table td:nth-child(11) { width:148px; white-space:nowrap; }
.task-record-table th:nth-child(12),.task-record-table td:nth-child(12) { width:82px; white-space:nowrap; }
.task-record-table td:nth-child(12) form { display:inline-flex!important; align-items:center; }
.task-record-table td:nth-child(12) button { min-width:48px; white-space:nowrap; }
.task-record-table .tag { white-space:nowrap; }
.contract-record-table { min-width:1080px; table-layout:fixed; }
.contract-record-table th,.contract-record-table td { vertical-align:middle; }
.contract-record-table th:last-child,.contract-record-table td:last-child { width:190px; white-space:nowrap; }
.contract-record-table td:last-child form { display:inline-flex!important; align-items:center; }
.contract-record-table td:last-child button { white-space:nowrap; }

/* Glass treatment for the live lead board and its claim cards. */
.lead-board {
  padding: 22px 24px;
  border: 1px solid rgba(255,255,255,.78) !important;
  background: linear-gradient(145deg,rgba(255,255,255,.62),rgba(246,249,255,.48)) !important;
  box-shadow: 0 18px 48px rgba(47,67,101,.075), inset 0 1px rgba(255,255,255,.8) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.lead-board > h3 { margin-bottom:18px; }
#newLeadsList { display:grid; gap:14px; }
.lead-card {
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  margin:0 !important;
  padding:21px 24px;
  border:1px solid rgba(255,255,255,.88) !important;
  border-left:1px solid rgba(255,255,255,.88) !important;
  border-radius:19px;
  background:linear-gradient(125deg,rgba(255,255,255,.88),rgba(247,250,255,.70)) !important;
  box-shadow:0 12px 30px rgba(48,69,105,.075),inset 0 1px rgba(255,255,255,.92) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.lead-card:hover {
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.98) !important;
  box-shadow:0 17px 36px rgba(48,69,105,.105),inset 0 1px rgba(255,255,255,.98) !important;
}
.lead-card > div:first-child { min-width:0; }
.lead-card > div:first-child > div { color:#35445a; }
.lead-card b { color:#53647d; font-weight:650; }
.lead-card .row { line-height:1.65; overflow-wrap:anywhere; }
.lead-card .tag { border-radius:999px; padding:4px 10px; }
.lead-card > div:last-child { flex-shrink:0; }
.lead-card-mine { align-items:flex-start; }

/* Lead alerts stay visible in the dashboard content area and remain in the bell menu. */
.bell-wrap { z-index:1100; }
.bell-menu { right:-132px; width:min(390px,calc(100vw - 28px)); max-height:min(72vh,620px); overflow:auto; overscroll-behavior:contain; border-radius:18px; }
.bell-menu[hidden] { display:none; }
.bell-menu-head { position:sticky; top:0; z-index:2; }
.bell-lead-list { display:grid; gap:8px; }
.lead-toast { flex:initial; width:auto; height:auto!important; min-height:0!important; max-height:none; gap:7px; padding:11px 12px; border:1px solid rgba(220,229,241,.92)!important; border-left:3px solid var(--primary)!important; border-radius:13px; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(246,249,255,.92))!important; box-shadow:0 5px 15px rgba(35,51,79,.07); }
.lead-toast h4 { margin-bottom:0; font-size:13px; }
.lead-toast .meta { -webkit-line-clamp:2; font-size:11px; }
.lead-toast .row { margin-top:0; }
.lead-toast .row button { min-width:88px; padding:7px 14px; }

/* Compact glass layout for lead-group management. */
.group-panel {
  padding:20px !important;
  border:1px solid rgba(255,255,255,.76) !important;
  background:linear-gradient(145deg,rgba(255,255,255,.58),rgba(244,248,255,.42)) !important;
  box-shadow:0 18px 46px rgba(47,67,101,.07),inset 0 1px rgba(255,255,255,.8) !important;
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
}
.group-panel-head { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:14px; }
.group-panel-head h3 { margin:0 0 3px; color:#34445d; font-size:16px; }
.group-panel-head p { margin:0; color:#8996aa; font-size:12px; }
.group-panel-head > button { flex-shrink:0; }
#groupList { display:grid; gap:12px; }
.group-card {
  margin:0 !important;
  padding:17px 20px !important;
  border:1px solid rgba(255,255,255,.9) !important;
  border-radius:17px !important;
  background:linear-gradient(125deg,rgba(255,255,255,.87),rgba(248,250,255,.68)) !important;
  box-shadow:0 9px 24px rgba(47,67,101,.055),inset 0 1px rgba(255,255,255,.95) !important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.group-card:hover { transform:translateY(-1px); border-color:rgba(255,255,255,.98) !important; box-shadow:0 13px 30px rgba(47,67,101,.085),inset 0 1px rgba(255,255,255,.98) !important; }
.group-card-head { display:flex; justify-content:space-between; align-items:center; gap:18px; }
.group-card-identity { min-width:0; }
.group-card-identity h3 { margin:0 0 3px !important; color:#33445d; font-size:16px !important; }
.group-description { color:#8b97aa; font-size:12px; }
.group-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
.group-actions form { display:flex; margin:0; }
.group-actions button { min-width:58px; padding:7px 12px !important; font-size:12px !important; }
.group-actions .group-edit { background:rgba(255,255,255,.74) !important; border:1px solid rgba(123,143,170,.22) !important; color:#5d6c83 !important; }
.group-actions .group-delete { background:rgba(199,71,91,.92) !important; }
.group-rules { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid rgba(106,127,157,.10); }
.group-rule-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; min-height:30px; padding:5px 10px; border:1px solid rgba(255,255,255,.92); border-radius:999px; background:rgba(244,248,253,.72); color:#56667e; font-size:12px; }
.group-rule-chip span { flex-shrink:0; color:#8996aa; }
.group-rule-chip b { min-width:0; color:#41536d; font-weight:600; overflow-wrap:anywhere; }

@media (max-width:1100px) {
  .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .dash-welcome { min-height:0; align-items:flex-start; flex-direction:column; gap:18px; padding:24px 21px; border-radius:19px; }
  .dash-welcome h1 { font-size:22px; }
  .dashboard-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
  .dashboard-stats .stat-card { min-height:112px; padding:14px 12px; gap:10px; }
  .stat-icon { width:36px; height:36px; border-radius:11px; }
  .dashboard-stats .value { font-size:25px; }
  .dashboard-quick-card,.dashboard-recent { padding:18px 15px; }
  .dashboard-live-leads { padding:18px 15px; }
  .dashboard-quick { grid-template-columns:1fr; }
  .dashboard-leads-list { grid-template-columns:1fr; max-height:360px; }
  .section-index { display:none; }
  .bell-menu { position:fixed; top:calc(62px + env(safe-area-inset-top)); right:10px; width:min(390px,calc(100vw - 20px)); max-height:calc(100vh - 84px - env(safe-area-inset-top)); }
  .lead-board { padding:17px 14px; }
  .lead-card { align-items:flex-start; gap:12px; padding:17px 16px; border-radius:16px; }
  .group-panel { padding:15px !important; }
  .group-card { padding:15px !important; }
  .group-card-head { align-items:flex-start; }
  .group-panel-head p { display:none; }
  .group-rule-chip { border-radius:12px; }
}
@media (max-width:420px) {
  .dashboard-stats { grid-template-columns:1fr; }
  .dashboard-stats .stat-card { min-height:94px; }
}

/* Runjin 2026 visual system: restrained cool glass, compact and consistent. */
:root {
  --text:#252b32;
  --muted:#7b8189;
  --border:#e1e3e7;
  --bg:#f4f5f6;
  --card:#fff;
  --primary:#256fba;
  --primary-strong:#185992;
  --blue:#3892cf;
  --indigo:#547bc3;
  --success:#168267;
  --warn:#b46e21;
  --danger:#c64c5e;
  --soft-shadow:0 12px 34px rgba(28,57,91,.065);
}

html { scrollbar-gutter:stable both-edges; }
body {
  color:var(--text);
  background:
    radial-gradient(ellipse at 86% -8%,rgba(255,255,255,.9),transparent 34rem),
    linear-gradient(180deg,#f8f9fa 0%,#f2f3f5 100%);
}

.sidebar {
  width:250px;
  background:rgba(255,255,255,.82);
  border-right:1px solid rgba(199,214,231,.7);
  box-shadow:8px 0 30px rgba(31,59,91,.035);
  backdrop-filter:blur(24px) saturate(135%);
  -webkit-backdrop-filter:blur(24px) saturate(135%);
}
.main { margin-left:250px; }
.brand {
  min-height:76px;
  padding:18px 21px;
  color:#1b3553;
  border-bottom:1px solid rgba(199,214,231,.62);
  letter-spacing:-.025em;
}
.brand .logo { border-radius:12px;box-shadow:0 5px 14px rgba(48,127,188,.15); }
.nav { padding:18px 12px; }
.nav a,.nav-group .group-label {
  position:relative;
  min-height:43px;
  margin:3px 0;
  padding:10px 13px;
  border:1px solid transparent;
  border-radius:12px;
  color:#5e7188;
  font-size:13px;
  font-weight:500;
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.nav a:hover,.nav-group .group-label:hover {
  color:#245e93;
  background:rgba(228,239,249,.72);
  transform:translateX(1px);
}
.nav a.active {
  padding-left:13px;
  color:#164f7d;
  background:linear-gradient(105deg,rgba(220,237,250,.9),rgba(235,244,251,.78));
  border-color:rgba(173,205,231,.45);
  box-shadow:0 3px 9px rgba(31,89,137,.045),inset 0 1px rgba(255,255,255,.82);
  font-weight:650;
}
.nav a.active::before { content:none; }
.nav a.active::after {
  content:"";
  position:absolute;
  right:12px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4f9bd0;
  transform:translateY(-50%);
  box-shadow:0 0 0 3px rgba(79,155,208,.1);
}
.nav-group .submenu {
  margin:5px 0 8px;
  padding:5px;
  background:rgba(255,255,255,.54);
  border:1px solid rgba(205,219,234,.62);
  border-radius:13px;
  box-shadow:0 7px 20px rgba(32,59,91,.04);
}
.nav-group .submenu a.active { background:#e6f1fa;border-color:transparent;box-shadow:none; }

.topbar {
  height:68px;
  padding:0 30px;
  background:rgba(255,255,255,.72);
  border-bottom:1px solid rgba(201,216,232,.67);
  backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
}
.topbar .left { color:#25415f;font-size:14px;font-weight:650;letter-spacing:.005em; }
.topbar .right { gap:9px;color:#687e96; }
.topbar .right a { color:#617891;border:1px solid transparent; }
.topbar .right a:hover { color:#1f6095;background:rgba(225,239,250,.72);border-color:#d6e6f3; }
.content { padding:28px 32px 46px; }
.page-title { margin-bottom:20px;color:#1c344f;font-size:25px;font-weight:700;letter-spacing:-.035em; }

.card,.stat-card {
  background:linear-gradient(150deg,rgba(255,255,255,.96),rgba(250,250,251,.91));
  border:1px solid rgba(211,224,238,.78);
  border-radius:17px;
  box-shadow:0 9px 26px rgba(31,61,95,.045),inset 0 1px rgba(255,255,255,.9);
}
.card { padding:21px 22px;margin-bottom:18px; }
.card:hover,.stat-card:hover { border-color:#cadbea;box-shadow:0 13px 30px rgba(31,61,95,.075),inset 0 1px rgba(255,255,255,.96); }
.card h3 { color:#243f5c;font-size:15px;letter-spacing:-.01em; }
.card h3 .badge { color:#245e91;background:#e8f2fa; }
.grid { gap:15px; }

table { color:#31465e;border-collapse:separate;border-spacing:0;font-size:13px; }
th,td { padding:12px 13px;border-bottom:1px solid #e7edf4; }
th { color:#71849b;background:#f4f8fc;font-size:11px;font-weight:700;letter-spacing:.025em;white-space:nowrap; }
tr:first-child th:first-child { border-top-left-radius:9px; }
tr:first-child th:last-child { border-top-right-radius:9px; }
tr:hover td { background:#f5f9fd; }
td { color:#344960; }
.tag { padding:4px 9px;font-size:11px;font-weight:650; }
.tag-green { color:#14775e;background:#e5f4ed; }
.tag-blue { color:#245d91;background:#e7f1fa; }
.tag-gray { color:#607387;background:#edf1f5; }

button {
  min-height:36px;
  padding:8px 14px;
  border:1px solid rgba(26,90,148,.16);
  border-radius:10px;
  color:#fff;
  background:linear-gradient(115deg,#3889c5,#286cae);
  box-shadow:0 4px 11px rgba(33,104,166,.16);
  font-size:12px;
  font-weight:650;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
}
button:hover { opacity:1;background:linear-gradient(115deg,#307eb8,#205f9d);box-shadow:0 7px 15px rgba(33,104,166,.2);transform:translateY(-1px); }
button:active { transform:translateY(0); }
button:disabled { cursor:not-allowed;opacity:.62;box-shadow:none;transform:none; }
button.secondary { color:#49647e;background:rgba(255,255,255,.82);border-color:#d6e1ec;box-shadow:none; }
button.secondary:hover { color:#205f91;background:#f6faff;border-color:#bfd5e8; }
button.danger { color:#fff;background:linear-gradient(115deg,#d56c78,#bd4d62);border-color:rgba(172,62,80,.16);box-shadow:0 4px 10px rgba(183,66,85,.12); }
button.success { background:linear-gradient(115deg,#29977f,#197b69); }
input,select,textarea {
  color:#263e58;
  border-color:#d7e2ed !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.9) !important;
  box-shadow:inset 0 1px 2px rgba(35,63,94,.025);
}
input::placeholder,textarea::placeholder { color:#a2b0bf; }
input:focus,select:focus,textarea:focus { border-color:#73a9d0 !important;box-shadow:0 0 0 3px rgba(66,143,197,.13) !important; }
label { color:#526a82; }

.modal-overlay { background:rgba(26,43,63,.42);backdrop-filter:blur(8px); }
.modal {
  overflow:hidden;
  border:1px solid rgba(255,255,255,.76);
  border-radius:19px;
  background:rgba(250,252,255,.97);
  box-shadow:0 28px 80px rgba(17,39,64,.27);
}
.modal-overlay.visible .modal { animation:rjModalIn .2s cubic-bezier(.2,.75,.25,1) both; }
@keyframes rjModalIn { from { opacity:0;transform:translateY(8px) scale(.985); } to { opacity:1;transform:translateY(0) scale(1); } }
.bottom-bar,.mtabs { background:rgba(248,251,254,.93);border-color:#dce6f1;backdrop-filter:blur(18px); }
.mtabs a.active { color:#216ba7; }
.upload-area { border-color:#c8dbea;background:linear-gradient(140deg,#fbfdff,#eff6fb); }
.upload-area:hover,.upload-area.drag { color:#205f91;border-color:#6fa8d1;background:#edf6fc; }
.empty { color:#8798aa; }

body:has(> .site-title),body:has(> .box) {
  background:
    radial-gradient(circle at 15% 15%,rgba(255,255,255,.95),transparent 25rem),
    radial-gradient(circle at 88% 84%,rgba(214,218,223,.25),transparent 29rem),
    linear-gradient(140deg,#fafafa,#f0f1f3 55%,#f7f8f9);
}
body:has(> .site-title) .box,body:has(> .box) .box {
  border:1px solid rgba(255,255,255,.9);
  border-radius:20px;
  background:rgba(255,255,255,.78);
  box-shadow:0 25px 72px rgba(30,65,99,.15),inset 0 1px rgba(255,255,255,.96);
  backdrop-filter:blur(26px) saturate(135%);
}
body:has(> .site-title) .site-title .big { background:linear-gradient(110deg,#348cc4,#2865a3 68%,#3f76ad);-webkit-background-clip:text;background-clip:text; }

.lead-board,.group-panel {
  background:rgba(255,255,255,.7) !important;
  border-color:rgba(207,221,235,.78) !important;
  box-shadow:0 12px 34px rgba(31,61,95,.06),inset 0 1px rgba(255,255,255,.94) !important;
}
.lead-card,.group-card {
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(249,249,250,.9)) !important;
  border-color:#dce7f1 !important;
  box-shadow:0 7px 20px rgba(31,61,95,.05),inset 0 1px rgba(255,255,255,.96) !important;
}
.lead-card { border-left:1px solid #dce7f1 !important; }
.lead-card:hover,.group-card:hover { border-color:#c4d7e8 !important;box-shadow:0 11px 26px rgba(31,61,95,.08),inset 0 1px #fff !important; }
.dashboard-stats .stat-card { background:linear-gradient(145deg,#fff,#fafafa);border-color:#dce6f0;box-shadow:0 7px 19px rgba(31,61,95,.04); }
.dashboard-quick a { border-color:#dfe8f1;background:rgba(255,255,255,.76); }
.dashboard-quick a:hover { border-color:#bfd5e8;background:#fff; }
.dash-welcome { border-color:#d5e5f2;background:linear-gradient(112deg,#fff 0%,#f6f7f8 64%,#eef0f2 100%);box-shadow:0 10px 28px rgba(31,70,105,.04); }
.dash-orbit { border-color:rgba(66,143,197,.16); }
.dashboard-lead { border-color:#dce7f1;border-left:1px solid #e1e3e7;background:linear-gradient(130deg,#fff,#fafafa); }
.dashboard-lead button { min-height:32px; }
.dw .sec,.dw .mc { border-color:#dce6f0;box-shadow:0 8px 24px rgba(31,61,95,.045); }
.dw .dtab a.on { background:linear-gradient(115deg,#3889c5,#286cae); }

* { scrollbar-width:thin;scrollbar-color:#bdcedd transparent; }
::-webkit-scrollbar { width:9px;height:9px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:#bdcedd;border:2px solid transparent;border-radius:999px;background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background:#9eb6ca;border:2px solid transparent;background-clip:padding-box; }

@media (max-width:1100px) {
  .content { padding-right:24px;padding-left:24px; }
}
@media (max-width:768px) {
  .sidebar { width:min(286px,84vw);background:rgba(247,250,253,.97); }
  .main { margin-left:0; }
  .topbar { height:62px;padding:0 16px; }
  .content { padding:21px 15px 96px; }
  .page-title { font-size:22px; }
  .card { padding:17px;border-radius:15px; }
  .dashboard-quick-card,.dashboard-recent,.dashboard-live-leads { padding:18px 15px; }
  .dashboard-leads-list { grid-template-columns:1fr; }
}

/* Consistent neutral surfaces and calmer navigation. */
.sidebar { border-right-color:#e4e6e9;box-shadow:none; }
.brand { color:#292f38;border-bottom-color:#e7e9ec; }
.nav a,.nav-group .group-label { color:#6d737c;letter-spacing:0;border-color:transparent; }
.nav a:hover,.nav-group .group-label:hover { color:#303945;background:#eceef1;transform:none; }
.nav a.active { color:#303e50;background:#e9edf2;border-color:transparent;box-shadow:none; }
.nav-group .submenu { border-color:#e5e7eb;box-shadow:none;background:rgba(255,255,255,.55); }
.nav-group .submenu a.active { color:#303e50;background:#e9edf2; }
.topbar { border-bottom-color:#e4e6e9; }
.topbar .left,.page-title,.card h3 { color:#292f38; }
.topbar .right,.topbar .right a { color:#757c86; }
.card,.stat-card { border-color:#e4e6ea;box-shadow:0 4px 18px rgba(25,30,38,.035); }
.card:hover,.stat-card:hover { transform:none;border-color:#dfe2e7;box-shadow:0 4px 18px rgba(25,30,38,.035); }
.card h3 { font-weight:650; }
th { color:#7b818b;background:#f5f6f8;letter-spacing:0; }
th,td { border-bottom-color:#eceef1; }
td { color:#454e5b;line-height:1.6; }
tr:hover td { background:#fafbfc; }
button { background:#3979b5;box-shadow:0 2px 5px rgba(34,67,99,.1); }
button:hover { background:#306da6;box-shadow:0 3px 8px rgba(34,67,99,.13); }
button.secondary { color:#555e6b;border-color:#dfe2e7; }
label { color:#59616d; }
body:has(#crawlBtn) .card { padding:10px 20px;overflow-x:auto; }
body:has(#crawlBtn) table { min-width:720px; }
body:has(#crawlBtn) th,body:has(#crawlBtn) td { padding:16px 12px;vertical-align:middle; }
body:has(#crawlBtn) th:nth-child(1) { width:48px; }
body:has(#crawlBtn) th:nth-child(2) { width:38%; }
body:has(#crawlBtn) td:nth-child(2) a { color:#37465a!important;font-weight:600;line-height:1.65; }
body:has(#crawlBtn) td:nth-child(2) a:hover { color:#3979b5!important; }
body:has(#crawlBtn) td:nth-child(3) { color:#283745;font-weight:650;font-variant-numeric:tabular-nums;white-space:nowrap; }
body:has(#crawlBtn) td:nth-child(7) { max-width:260px;color:#818791!important;font-size:11px!important;line-height:1.75; }
body:has(#crawlBtn) #crawlBtn { background:#3979b5!important;min-height:38px; }
body:has(#crawlBtn) select { min-height:38px; }
@media(max-width:768px) { body:has(#crawlBtn) .card { padding:6px 10px; } }