/* ============================================================================
   KLOUDHIRE — ONE DESIGN SYSTEM
   ----------------------------------------------------------------------------
   Re-skinned 2026-09-18 to match the approved KloudHire mockup set exactly
   (HIRE - Student Login Page 2/3/4/5…): KloudHire-branded sidebar with the
   promo card, solid-blue pill navigation, photo hero with the script quote
   baked in the art, colored icon chips on every panel head, job cards with
   match pills, and the Kurela footer.

   The art in assets/ (hero-student, banner-mountains, promo-card, avatar) is
   cropped from the user's own mockup PNGs — their assets, not stand-ins.

   Nothing below is role-specific: all seven roles render through these rules.
   Only NAVIGATION ITEMS and PANEL CONTENT change per role. See assets/roles.js.
   ========================================================================== */

:root{
  /* --- KloudHire palette, read off the mockups --- */
  --page-bg:#f2f6fc;
  --card-bg:#ffffff;
  --border:#e8edf7;
  --text:#1c2740;
  --text-soft:#5a6b85;
  --text-faint:#8d9bb2;
  --blue:#1a6df0;          /* buttons, active nav, links                   */
  --blue-dark:#1558c9;
  --headline:#1d3fc4;      /* the mockups' big blue page titles            */
  --navy:#0f2a6b;
  --purple:#8b5cf6;
  --pink:#ec4899;
  --green:#22c55e;
  --orange:#f59e0b;
  --teal:#14b8a6;
  --cyan:#06b6d4;
  --red:#ef4444;
  --sidebar-w:216px;
  --radius-lg:16px;
  --radius-md:12px;
  --shadow:0 2px 10px rgba(30,41,80,.06);

  /* --- extensions --- */
  --shadow-hover:0 6px 18px rgba(30,41,80,.10);
  --tint:#f4f7fc;
  --tint-strong:#eaf0fa;
  --ease:160ms cubic-bezier(.4,0,.2,1);
  --hero-image:none;

  font-family:'Inter',sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
body{
  background:var(--page-bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}
ul{list-style:none;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
input{font-family:inherit;}
i{line-height:1;}
a{text-decoration:none;color:inherit;}

.app{display:flex;min-height:100vh;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ===================== SIDEBAR =============================================
   IDENTICAL FOR EVERY ROLE, and it carries the PRODUCT brand — the mockups
   always show "KloudHire / Career OS by Kurela" here; the tenant appears in
   the profile chip, never in the rail.
   ========================================================================= */
.sidebar{
  width:var(--sidebar-w);
  flex:0 0 var(--sidebar-w);
  background:#fff;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  height:100vh;
  position:sticky;
  top:0;
  z-index:40;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  padding:16px 16px 14px;
}
.brand-icon{
  width:38px;height:38px;
  border-radius:11px;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex:0 0 auto;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(59,130,246,.32);
}
.brand-icon img{width:100%;height:100%;object-fit:contain;background:#fff;}
.brand-title{
  font-size:18px;
  font-weight:700;
  line-height:1.1;
  color:var(--navy);
  letter-spacing:-.4px;
}
.brand-title b{color:var(--blue);font-weight:800;}
/* Tenant names are sentences, not wordmarks: smaller, allowed to wrap. */
.brand-title.tenant{font-size:13px;font-weight:700;letter-spacing:0;line-height:1.25;color:var(--text);}
.brand-sub{
  font-size:10px;
  color:var(--text-faint);
  margin-top:2px;
  letter-spacing:.2px;
}

.nav{
  flex:1;
  overflow-y:auto;
  padding:4px 12px 10px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.nav-section{
  font-size:10px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:14px 12px 6px;
}
.nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 12px;
  border-radius:10px;
  color:#4b5266;
  font-size:13px;
  font-weight:500;
  line-height:1.25;
  border:1px solid transparent;
  transition:background var(--ease),color var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.nav-item i{width:16px;text-align:center;font-size:13.5px;color:#8d9bb2;transition:color var(--ease);}
.nav-item:hover{background:var(--tint);}
.nav-item.active{
  background:var(--blue);
  color:#fff;
  font-weight:600;
  box-shadow:0 4px 12px rgba(26,109,240,.30);
  border-color:transparent;
}
.nav-item.active i{color:#fff;}
.nav-count{
  margin-left:auto;
  font-size:10.5px;
  font-weight:700;
  background:#e8f0fe;
  color:var(--blue);
  border-radius:20px;
  padding:2px 7px;
  min-width:20px;
  text-align:center;
}
.nav-item.active .nav-count{background:rgba(255,255,255,.22);color:#fff;}

/* The promo card at the bottom of the rail — the mockup's own art, whole,
   including its baked script line and KloudHire footer. */
.promo{
  margin:8px 12px 12px;
  border-radius:14px;
  overflow:hidden;
  flex:0 0 auto;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.promo img{width:100%;display:block;}

/* legacy quiet footer (kept for any view that still asks for it) */
.sidebar-footer{
  padding:12px 18px;
  font-size:11px;
  color:var(--text-faint);
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:6px;
}
.sidebar-footer b{font-weight:700;color:#8b93a6;}

/* ===================== MAIN ===================== */
.main{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  height:100vh;
}

/* ---- topbar ---- */
.topbar{
  height:62px;
  flex:0 0 62px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  padding:0 22px;
  gap:18px;
}
.menu-btn{
  display:none;
  width:38px;height:38px;
  border-radius:10px;
  background:var(--tint);
  color:#5b6373;
  font-size:16px;
  align-items:center;justify-content:center;
  transition:background var(--ease);
}
.menu-btn:hover{background:var(--tint-strong);}
.search{
  flex:1;
  max-width:430px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--tint);
  border:1px solid #e6ecf7;
  border-radius:10px;
  padding:9px 13px;
  color:var(--text-faint);
  transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
}
.search:hover{border-color:#d7e2f6;}
.search:focus-within{background:#fff;border-color:#bcd4fb;box-shadow:0 0 0 3px rgba(26,109,240,.10);}
.search i{font-size:13px;color:var(--text-faint);}
.search input{
  border:none;background:transparent;outline:none;flex:1;
  font-size:13px;color:var(--text);min-width:0;
}
.search input::placeholder{color:var(--text-faint);}
.kbd{
  font-size:11px;font-weight:700;color:var(--blue-dark);
  background:#e8f0fe;border:1px solid #d6e4fd;border-radius:6px;padding:3px 7px;
  flex:0 0 auto;
}

/* The mockups' category links across the top (student surfaces). */
.topnav{display:flex;align-items:center;gap:4px;margin-left:2px;}
.topnav a{
  font-size:13px;font-weight:600;color:var(--text-soft);
  padding:7px 11px;border-radius:9px;
  transition:background var(--ease),color var(--ease);
  white-space:nowrap;
}
.topnav a:hover{background:var(--tint);color:var(--text);}
.topnav a.on{color:var(--blue);}

.topbar-right{display:flex;align-items:center;gap:12px;flex:0 0 auto;margin-left:auto;}
.icon-btn{
  position:relative;
  width:38px;height:38px;
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  color:#5b6373;font-size:16px;
  transition:background var(--ease),box-shadow var(--ease);
}
.icon-btn:hover{background:var(--tint);}
.icon-btn .fa-grip{color:var(--blue-dark);}
.badge{
  position:absolute;top:1px;right:1px;
  background:#ef4444;color:#fff;font-size:9.5px;font-weight:700;
  min-width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:2px solid #fff;
}
.profile{
  display:flex;align-items:center;gap:9px;
  padding-left:12px;border-left:1px solid var(--border);cursor:pointer;
}
.avatar{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  background:#e8f0fe;color:var(--blue-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;flex:0 0 auto;
  overflow:hidden;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.profile-name{font-size:13px;font-weight:700;color:var(--text);line-height:1.2;}
.profile-role{font-size:10.5px;color:var(--text-soft);}
.profile-caret{font-size:10px;color:var(--text-faint);margin-left:2px;}

/* ---- content ---- */
.content{
  flex:1;
  overflow-y:auto;
  padding:18px 22px 34px;
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* ===================== HERO / BANNER =======================================
   The mockup hero: a sky-blue photo banner — greeting in deep blue on the
   left, the student + mountains + script quote (baked in the art) on the
   right, the role's calls to action beneath.
   ========================================================================= */
.banner{
  position:relative;
  border-radius:var(--radius-md);
  overflow:hidden;
  min-height:172px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:24px 30px;
  color:var(--navy);
  background:linear-gradient(100deg,#dbe9fd 0%,#e8f1fe 45%,#cfe2fb 100%);
  border:1px solid #d8e5fa;
}
.banner-photo{position:absolute;inset:0;background-image:var(--hero-image);background-size:cover;background-position:center 32%;}
.banner-overlay{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(226,238,253,.92) 0%,rgba(226,238,253,.55) 34%,rgba(226,238,253,0) 55%);
}
/* The mockup's own art, right-anchored, soft-masked into the wash. */
.banner-art{
  position:absolute;
  right:0;top:0;bottom:0;
  width:30%;
  pointer-events:none;
}
.banner-art img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:right top;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%);
          mask-image:linear-gradient(90deg,transparent 0,#000 22%);
}
.banner-date{
  position:absolute;top:16px;right:22px;
  display:flex;align-items:center;gap:8px;
  background:#fff;border:1px solid #dfe8f8;
  box-shadow:0 2px 8px rgba(30,41,80,.10);
  padding:7px 13px;border-radius:10px;
  font-size:12px;font-weight:700;color:#26324a;z-index:3;
  transition:box-shadow var(--ease),border-color var(--ease);
}
.banner-date:hover{box-shadow:var(--shadow-hover);border-color:#c7d9fb;}
.banner-date i:first-child{color:var(--blue);}
.banner-date .fa-chevron-down{color:var(--text-faint);font-size:10px;}

.banner-content{position:relative;z-index:2;max-width:64%;}
.hero-greet{display:none;}
.hero-name{
  font-size:30px;font-weight:800;color:#12309b;
  line-height:1.12;letter-spacing:-.6px;margin:0 0 7px;
}
.banner-content p{font-size:13.5px;font-weight:500;color:#3d5077;max-width:52ch;}
.hero-cta{display:flex;gap:10px;margin-top:15px;flex-wrap:wrap;}
.hero-cta .btn{padding:9px 15px;font-size:12.5px;border-radius:10px;}
.hero-cta .btn:not(.primary){background:rgba(255,255,255,.92);}
.hero-scope{
  display:flex;align-items:center;gap:7px;margin-top:12px;
  font-size:11px;font-weight:600;color:#7287ad;
}
.hero-scope i{font-size:11px;color:#93a8cd;}
.banner-line{display:none;}

/* ===================== STAT CARDS ==========================================
   The mockup KPI card: colored icon chip, big number, label, quiet delta.  */
.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;align-items:start;}
.stats-row.cols-5{grid-template-columns:repeat(5,1fr);}
.stat-card{
  background:var(--card-bg);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow);
  padding:14px 13px;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:11px;row-gap:2px;
  align-items:start;align-content:start;
  border:1px solid var(--border);
  transition:box-shadow var(--ease),border-color var(--ease),transform var(--ease);
}
.stat-card:hover{box-shadow:var(--shadow-hover);border-color:#d9e5fa;transform:translateY(-1px);}
.stat-icon{
  grid-row:1/4;width:40px;height:40px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;font-size:15px;
}
.stat-num{font-size:22px;font-weight:800;color:var(--text);line-height:1.1;}
.stat-label{font-size:11.5px;color:var(--text-soft);font-weight:500;white-space:nowrap;}
.stat-delta{font-size:11px;font-weight:700;display:flex;align-items:center;gap:3px;margin-top:5px;white-space:nowrap;}
.stat-delta span{color:var(--text-faint);font-weight:500;margin-left:1px;}
.stat-delta.up{color:#16a34a;}
.stat-delta.down{color:#ef4444;}
.stat-delta.flat{color:var(--text-faint);}

/* shared tint palette for icon chips */
.pink{background:#fde7ef;color:#ec4899;}
.blue{background:#e6f0ff;color:#1a6df0;}
.purple{background:#f1e9fe;color:#8b5cf6;}
.green{background:#e3f9ec;color:#16a34a;}
.orange{background:#fdece0;color:#f0653a;}
.teal{background:#e1f8f2;color:#14b8a6;}
.cyan{background:#e0f7fb;color:#06b6d4;}
.navy{background:#e5e9fb;color:#1e3a8a;}
.amber{background:#fdf0d9;color:#e8a20c;}
.red{background:#fdeceb;color:#e0453a;}

/* ===================== PANELS / GRIDS ===================== */
.grid-3{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-bottom{display:grid;grid-template-columns:1fr 1.28fr;gap:16px;}
.grid-wide-left{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;}
.panel{
  background:var(--card-bg);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow);
  padding:16px 18px 18px;
  display:flex;flex-direction:column;
  border:1px solid var(--border);
  min-width:0;
  transition:box-shadow var(--ease),border-color var(--ease);
}
.panel:hover{box-shadow:var(--shadow-hover);border-color:#dde7f8;}
.panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px;gap:12px;}
.panel-head > div:first-child{display:flex;align-items:center;gap:9px;min-width:0;}
.panel-head h3{font-size:14px;font-weight:700;color:var(--text);}
.panel-head .sub{font-size:11.5px;color:var(--text-faint);font-weight:500;margin-top:2px;}
/* The mockups' colored icon chip beside every panel title. */
.ch-icon{
  width:26px;height:26px;border-radius:8px;flex:0 0 26px;
  display:flex;align-items:center;justify-content:center;font-size:11.5px;
}
.panel-head .ph-text{min-width:0;}
.dropdown-btn{
  font-size:11.5px;font-weight:600;color:var(--text-soft);
  background:var(--tint);border:1px solid #e6ecf7;
  padding:6px 10px;border-radius:7px;
  display:flex;align-items:center;gap:6px;flex:0 0 auto;
  transition:background var(--ease),border-color var(--ease),color var(--ease);
}
.dropdown-btn:hover{background:var(--tint-strong);border-color:#d5e1f6;color:var(--text);}
.link-btn{
  font-size:12px;font-weight:700;color:var(--blue);
  border-radius:7px;padding:4px 8px;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:6px;
  transition:background var(--ease);
}
.link-btn::after{content:'\2192';font-weight:700;}
.link-btn:hover{background:#e8f0fe;}

/* legend + chart frames */
.legend{display:flex;gap:16px;margin-bottom:10px;flex-wrap:wrap;}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-soft);font-weight:500;}
.legend-item i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.chart-wrap{position:relative;height:210px;}
.chart-wrap.tall{height:248px;}
.chart-wrap.short{height:168px;}

/* ===================== PROGRESS ROWS ===================== */
.usage-list{display:flex;flex-direction:column;gap:16px;padding-top:4px;flex:1;justify-content:space-evenly;}
.usage-row{display:flex;align-items:center;gap:10px;}
.usage-icon{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:12px;
}
.usage-name{flex:0 0 116px;font-size:12px;font-weight:600;color:var(--text);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.usage-val{flex:0 0 42px;text-align:right;font-size:12px;font-weight:700;color:var(--text-soft);}
.usage-bar{flex:1;height:8px;background:#edf1f9;border-radius:6px;overflow:hidden;min-width:40px;}
.usage-fill{height:100%;border-radius:6px;transition:width var(--ease);}
.usage-fill.blue{background:linear-gradient(90deg,#60a5fa,#1a6df0);}
.usage-fill.purple{background:linear-gradient(90deg,#a78bfa,#8b5cf6);}
.usage-fill.green{background:linear-gradient(90deg,#4ade80,#22c55e);}
.usage-fill.orange{background:linear-gradient(90deg,#fbbf6d,#f0653a);}
.usage-fill.cyan{background:linear-gradient(90deg,#67e8f9,#06b6d4);}
.usage-fill.pink{background:linear-gradient(90deg,#f9a8d4,#ec4899);}
.usage-fill.teal{background:linear-gradient(90deg,#5eead4,#14b8a6);}
.usage-fill.amber{background:linear-gradient(90deg,#fcd34d,#e8a20c);}

/* ===================== DONUT + LEGEND ===================== */
.donut-body{display:flex;align-items:center;gap:14px;flex:1;flex-wrap:wrap;}
.donut-wrap{position:relative;width:145px;height:145px;flex:0 0 auto;}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.donut-num{font-size:24px;font-weight:800;color:var(--text);}
.donut-label{font-size:10.5px;color:var(--text-soft);font-weight:500;text-align:center;line-height:1.3;}
.donut-legend{display:flex;flex-direction:column;gap:11px;flex:1;min-width:120px;}
.donut-legend li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-soft);font-weight:500;}
.donut-legend li i{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.donut-legend li span{flex:1;}
.donut-legend li b{color:var(--text);font-weight:700;font-size:13px;}
.panel-foot{
  margin-top:13px;padding-top:13px;border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--text-soft);font-weight:600;gap:10px;
}
.panel-foot b{font-size:16px;color:var(--text);font-weight:800;}

/* ===================== LISTS ===================== */
.tile-list{display:flex;flex-direction:column;gap:9px;}
.tile-list li{
  display:flex;align-items:center;gap:12px;
  background:#fbfcff;border:1px solid #edf1f9;border-radius:11px;
  padding:8px 12px 8px 8px;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
}
.tile-list li:hover{background:#f4f8ff;border-color:#d6e4fb;box-shadow:var(--shadow);}
.tile-icon{
  width:36px;height:36px;flex:0 0 auto;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.tile-body{flex:1;min-width:0;}
.tile-title{font-size:12.5px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tile-meta{font-size:11px;color:var(--text-faint);margin-top:2px;}
.tile-right{font-size:11px;color:var(--text-faint);font-weight:600;white-space:nowrap;text-align:right;flex:0 0 auto;}
.tile-right b{display:block;font-size:12.5px;color:var(--text);font-weight:800;}

/* date chip — the mockups' interview-date block (blue, not red) */
.date-chip{
  width:42px;height:42px;flex:0 0 auto;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;
  background:#e8f0fe;color:var(--blue);
}
.date-chip .tm{font-size:8.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;}
.date-chip .td{font-size:15px;font-weight:800;}

/* ===================== JOB CARDS (the mockups' opportunity rows) ========= */
.job-list{display:flex;flex-direction:column;}
.job-row{
  display:flex;gap:13px;align-items:flex-start;
  padding:13px 2px;border-bottom:1px solid #eef2f9;
  transition:background var(--ease);
}
.job-row:hover{background:#fafcff;}
.job-row:last-child{border-bottom:none;padding-bottom:2px;}
.job-logo{
  width:44px;height:44px;flex:0 0 44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;letter-spacing:-.5px;
  background:#f6f8fc;border:1px solid #eef2f9;
}
.job-logo.tcs{color:#e5006d;font-size:12px;}
.job-logo.accenture{color:#a100ff;font-size:17px;}
.job-logo.microsoft{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;align-items:stretch;justify-items:stretch;gap:2px;padding:12px;}
.job-logo.microsoft span{border-radius:1px;}
.job-logo.microsoft span:nth-child(1){background:#f25022;}
.job-logo.microsoft span:nth-child(2){background:#7fba00;}
.job-logo.microsoft span:nth-child(3){background:#00a4ef;}
.job-logo.microsoft span:nth-child(4){background:#ffb900;}
.job-logo.google{color:#4285f4;font-size:19px;font-family:Arial,sans-serif;}
.job-logo.amazon{color:#ff9900;font-size:17px;}
.job-logo.infosys{color:#007cc3;font-size:10px;}
.job-logo.flipkart{color:#2874f0;font-size:16px;}
.job-logo.wipro{color:#341c53;font-size:10px;}
.job-logo.deloitte{color:#0f0b0b;font-size:15px;}
.job-logo.deloitte::after{content:'.';color:#86bc25;font-weight:900;}
.job-logo.zoho{color:#e42527;font-size:11px;}
.job-logo.adobe{color:#fa0f00;font-size:15px;}
.job-logo.ibm{color:#1f70c1;font-size:11px;}
.job-logo.isro{color:#0b3d91;font-size:9px;}
.job-logo.unstop{color:#1c4980;font-size:9.5px;}
.job-body{flex:1;min-width:0;}
.job-title{font-size:13.5px;font-weight:700;color:#16339e;}
.job-sub{font-size:12px;color:var(--text-soft);margin-top:1px;}
.job-meta{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px;}
.job-meta span{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-soft);}
.job-meta i{font-size:10px;color:var(--text-faint);}
.job-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;}
.job-tags .tagchip{
  font-size:10.5px;font-weight:500;color:var(--text-soft);
  background:#f4f7fc;border:1px solid #eef2f9;
  padding:3px 9px;border-radius:6px;
}
.job-tags .tagchip.more{color:var(--blue);background:#e8f0fe;border-color:#d6e4fd;font-weight:600;}
.job-posted{font-size:10.5px;color:var(--text-faint);margin-top:7px;}
.job-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:0 0 auto;}
.job-side .row{display:flex;align-items:center;gap:8px;}
.match-pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:#047857;
  background:#e6f8f0;border:1px solid #b9e9d3;
  padding:4px 9px;border-radius:99px;white-space:nowrap;
}
.match-pill i{font-size:10px;}
.save-btn{
  width:28px;height:28px;border-radius:8px;color:var(--text-faint);font-size:13px;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--ease),color var(--ease);
}
.save-btn:hover{background:var(--tint);color:var(--blue);}
.save-btn.on{color:var(--blue);}

/* ===================== KLOUD AI PANEL ===================== */
.ai-panel{background:linear-gradient(170deg,#ffffff,#f7f6ff);}
.ai-head{display:flex;align-items:center;gap:11px;margin-bottom:13px;}
.ai-avatar{
  width:36px;height:36px;border-radius:11px;flex:0 0 36px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1a6df0,#7c3aed);color:#fff;font-size:14px;
  box-shadow:0 4px 12px rgba(124,58,237,.28);
}
.ai-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:7px;}
.beta-tag{
  font-size:8px;font-weight:800;letter-spacing:.5px;
  background:var(--purple);color:#fff;padding:2px 5px;border-radius:4px;
}
.ai-sub{font-size:11px;color:var(--text-soft);}
.ai-chips{display:flex;flex-direction:column;gap:7px;}
.ai-chips button{
  display:flex;align-items:center;gap:9px;
  background:#fff;border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;font-size:12px;color:var(--text-soft);font-weight:500;
  text-align:left;transition:border-color var(--ease),color var(--ease),background var(--ease);
}
.ai-chips button i{font-size:11.5px;color:var(--purple);width:14px;text-align:center;}
.ai-chips button:hover{border-color:#cbb8f5;color:#6d28d9;background:#faf8ff;}
.ai-input{
  display:flex;align-items:center;gap:8px;margin-top:12px;
  background:#fff;border:1px solid var(--border);border-radius:10px;padding:4px 4px 4px 13px;
}
.ai-input input{flex:1;border:none;outline:none;font-size:12.5px;background:none;min-width:0;color:var(--text);}
.ai-input input::placeholder{color:var(--text-faint);}
.ai-send{
  width:32px;height:32px;border-radius:8px;flex:0 0 32px;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;
  background:linear-gradient(135deg,#1a6df0,#7c3aed);
}

/* ===================== TABLE ===================== */
.table-wrap{overflow-x:auto;margin:0 -4px;}
table.kx{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;min-width:520px;}
table.kx th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--text-faint);
  padding:0 10px 9px;border-bottom:1px solid var(--border);white-space:nowrap;
}
table.kx td{padding:11px 10px;border-bottom:1px solid #f2f5fb;color:var(--text-soft);vertical-align:middle;}
table.kx tbody tr{transition:background var(--ease);}
table.kx tbody tr:hover{background:#f7faff;}
table.kx tbody tr:last-child td{border-bottom:none;}
table.kx td.strong{color:var(--text);font-weight:700;}
table.kx td.num{text-align:right;font-variant-numeric:tabular-nums;font-weight:700;color:var(--text);}
.cell-stack{display:flex;flex-direction:column;line-height:1.3;}
.cell-stack b{font-size:12.5px;font-weight:700;color:var(--text);}
.cell-stack span{font-size:11px;color:var(--text-faint);}

/* ===================== BADGES / PILLS ===================== */
.pill{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 9px;
  white-space:nowrap;border:1px solid transparent;
}
.pill i{font-size:9px;}
.pill.live{background:#e6f8f0;color:#047857;border-color:#b9e9d3;}
.pill.live i{animation:khpulse 1.6s ease-in-out infinite;}
.pill.ok{background:#e3f9ec;color:#16803c;border-color:#c9f0d9;}
.pill.info{background:#e6f0ff;color:#1a56db;border-color:#d4e4fd;}
.pill.warn{background:#fdf0d9;color:#a9700a;border-color:#f7e2b4;}
.pill.muted{background:#f1f3f9;color:#6b7280;border-color:#e6e9f2;}
.pill.violet{background:#f1e9fe;color:#6d28d9;border-color:#e4d8fc;}
@keyframes khpulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* ===================== QUICK ACCESS ===================== */
.quick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;flex:1;align-items:start;align-content:start;}
.quick-item{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:14px 6px;border-radius:12px;background:#f8fafd;
  text-align:center;font-size:11px;font-weight:600;color:var(--text);
  border:1px solid transparent;
  transition:background var(--ease),border-color var(--ease),box-shadow var(--ease),transform var(--ease);
}
.quick-item:hover{background:#eef4ff;border-color:#d6e4fb;box-shadow:var(--shadow);transform:translateY(-1px);}
.quick-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:15px;}
.quick-icon.blue{background:#dbeafe;color:#1a6df0;}
.quick-icon.purple{background:#ede4fe;color:#8b5cf6;}
.quick-icon.pink{background:#fde0eb;color:#ec4899;}
.quick-icon.indigo{background:#e3e5fd;color:#6366f1;}
.quick-icon.orange{background:#fde6d6;color:#f0653a;}
.quick-icon.green{background:#dcf7e6;color:#16a34a;}
.quick-icon.teal{background:#d5f5ee;color:#14b8a6;}
.quick-icon.amber{background:#fdf0d9;color:#e8a20c;}

/* ===================== FOOTER (the mockups' Kurela bar) ================== */
.site-foot{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  padding:14px 4px 0;margin-top:2px;
  border-top:1px solid var(--border);
  font-size:12px;color:var(--text-soft);
}
.sf-brand{display:flex;align-items:center;gap:9px;font-weight:500;}
.sf-brand .mark{
  width:24px;height:24px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3b82f6,#7c3aed);color:#fff;font-size:10px;
}
.sf-brand b{color:var(--navy);font-size:13.5px;font-weight:800;}
.sf-links{display:flex;gap:22px;margin:0 auto;font-weight:500;}
.sf-links a:hover{color:var(--blue);}
.sf-site{font-weight:700;color:var(--blue);}

/* ===================== EMPTY STATE ===================== */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:26px 16px;text-align:center;color:var(--text-faint);
  background:#fbfcff;border:1px dashed #dfe6f4;border-radius:12px;
}
.empty i{font-size:20px;color:#c3cbdb;}
.empty p{font-size:12px;font-weight:500;}

/* ===================== PROTOTYPE ROLE SWITCHER ===================== */
.proto{
  position:fixed;right:18px;bottom:18px;z-index:60;
  display:flex;align-items:center;gap:6px;
  background:#fff;border:1px solid #d8e3f7;border-radius:30px;
  box-shadow:0 6px 22px rgba(30,41,80,.16);padding:6px 8px 6px 14px;
}
.proto-label{font-size:10.5px;font-weight:700;color:var(--text-faint);letter-spacing:.4px;text-transform:uppercase;margin-right:2px;}
.proto button{
  font-size:11.5px;font-weight:700;color:var(--text-soft);
  border-radius:20px;padding:6px 11px;
  transition:background var(--ease),color var(--ease);
}
.proto button:hover{background:var(--tint);color:var(--text);}
.proto button.on{background:var(--blue);color:#fff;}

/* sidebar scrim for mobile drawer */
.scrim{
  position:fixed;inset:0;background:rgba(19,30,60,.42);
  z-index:35;opacity:0;pointer-events:none;transition:opacity var(--ease);
}
.scrim.show{opacity:1;pointer-events:auto;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1400px){
  .stats-row,.stats-row.cols-5{grid-template-columns:repeat(3,1fr);}
  .grid-3,.grid-bottom,.grid-2,.grid-wide-left{grid-template-columns:1fr;}
  .quick-grid{grid-template-columns:repeat(3,1fr) !important;}
  .topnav{display:none;}
  .banner-content{max-width:66%;}
}
@media (max-width:900px){
  .sidebar{position:fixed;left:calc(var(--sidebar-w) * -1 - 12px);transition:left var(--ease);box-shadow:0 10px 40px rgba(30,41,80,.18);}
  .sidebar.open{left:0;}
  .menu-btn{display:flex;}
  .main{height:auto;min-height:100vh;}
  .content{padding:16px 14px 32px;overflow:visible;flex:none;}
  .topbar{position:sticky;top:0;z-index:30;padding:0 14px;gap:12px;}
  .kbd{display:none;}
  .stats-row,.stats-row.cols-5{grid-template-columns:repeat(2,1fr);}
  .quick-grid{grid-template-columns:repeat(3,1fr) !important;}
  .banner{padding:20px 18px;min-height:0;}
  .banner-art{opacity:.35;width:70%;}
  .banner-content{max-width:100%;}
  .hero-name{font-size:24px;letter-spacing:-.4px;}
  .hero-cta .btn{flex:1;justify-content:center;}
  .banner-date{position:static;margin-bottom:12px;align-self:flex-start;}
}
@media (max-width:640px){
  .stats-row,.stats-row.cols-5{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stat-card{min-width:0;}
  .stat-label,.stat-delta{white-space:normal;}
  .profile-name,.profile-role,.profile-caret{display:none;}
  .profile{padding-left:0;border-left:none;}
  .search{min-width:0;}
  .topbar{gap:8px;padding:0 12px;}
  .topbar-right{gap:8px;}
  .icon-btn.secondary{display:none;}
  .quick-grid{grid-template-columns:repeat(2,1fr) !important;}
  .panel{padding:15px 13px 16px;}
  .content{gap:13px;}
  .proto{left:12px;right:12px;bottom:12px;justify-content:center;padding:6px;flex-wrap:wrap;}
  .proto-label{display:none;}
  .donut-body{justify-content:center;}
  .job-side{align-items:flex-start;}
  .job-row{flex-wrap:wrap;}
  .sf-links{margin:0;}
}