
:root{
  --blue:#0a8fd8;--blue2:#1d63b0;--indigo:#2e3192;--gray:#6d6e71;--ink:#16204a;--t2:#4a5578;--t3:#8590ad;
  --glass:rgba(255,255,255,.58);--glass2:rgba(255,255,255,.78);--line:rgba(255,255,255,.75);--edge:rgba(46,49,146,.10);
  --ok:#0e9f6e;--warn:#c27803;--bad:#d64545;--r:18px;--font:'Inter',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);color:var(--ink);min-height:100vh;background:#eef4fb;overflow-x:hidden;font-size:14.5px}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;background:
  radial-gradient(700px 520px at 8% 6%,rgba(10,143,216,.30),transparent 62%),
  radial-gradient(640px 520px at 92% 12%,rgba(46,49,146,.22),transparent 62%),
  radial-gradient(760px 600px at 70% 100%,rgba(10,143,216,.20),transparent 60%),
  radial-gradient(520px 420px at 0% 100%,rgba(109,110,113,.14),transparent 60%),
  linear-gradient(160deg,#f4f8fd,#e9f1fb 50%,#eef0fb)}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:0 8px 32px rgba(29,99,176,.10),inset 0 1px 0 rgba(255,255,255,.9)}
button,select,input,textarea{font-family:inherit}
button{cursor:pointer;border:0}
input,select,textarea{font-size:14.5px;color:var(--ink);background:rgba(255,255,255,.7);border:1px solid var(--edge);border-radius:12px;padding:11px 13px;width:100%;outline:none;transition:.15s}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,143,216,.15);background:#fff}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 16px;border-radius:11px;font-weight:600;font-size:13.5px;color:var(--indigo);background:rgba(255,255,255,.75);border:1px solid var(--edge);transition:.15s;text-decoration:none;white-space:nowrap}
.btn:hover{background:#fff;box-shadow:0 2px 10px rgba(29,99,176,.12)}
.btn.pri{background:linear-gradient(135deg,var(--blue),var(--blue2));color:#fff;border:0;box-shadow:0 4px 14px rgba(10,143,216,.30)}
.btn.pri:hover{filter:brightness(1.06)}
.btn.ind{background:var(--indigo);color:#fff;border:0}
.btn.sm{padding:7px 11px;font-size:12.5px;border-radius:9px}
.btn.on{background:rgba(14,159,110,.12);color:var(--ok);border-color:rgba(14,159,110,.35)}
.btn.ghost{background:transparent;border:0;color:var(--t2)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.hidden{display:none!important}
h1,h2,h3,h4{letter-spacing:-.015em;color:var(--indigo)}
.muted{color:var(--t2)}.small{font-size:13px}.tiny{font-size:12px;color:var(--t3)}
.row{display:flex;gap:10px;align-items:center}

/* Login */
#login{min-height:100vh;display:grid;place-items:center;padding:24px}
.lcard{width:100%;max-width:440px;padding:34px 32px}
.lcard .logo{display:block;width:210px;margin:0 auto 18px}
.tabs{display:flex;gap:6px;padding:5px;border-radius:13px;background:rgba(46,49,146,.06);margin:20px 0 16px}
.tabs button{flex:1;padding:10px;border-radius:9px;background:transparent;color:var(--t2);font-weight:600}
.tabs button.on{background:#fff;color:var(--indigo);box-shadow:0 2px 8px rgba(29,99,176,.12)}
.gbtn{width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;padding:12px;border-radius:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:10px}
.gbtn:hover{background:#f7f9fc}
.otp{letter-spacing:.55em;text-align:center;font-size:22px;font-weight:700}
.err{color:var(--bad);font-size:13px;margin-top:10px;min-height:18px}

/* Shell */
header{position:sticky;top:12px;z-index:20;margin:12px;padding:10px 16px;display:flex;align-items:center;gap:16px}
header .logo{height:38px}
nav{display:flex;gap:4px;flex:1;overflow-x:auto}
nav button{background:transparent;color:var(--t2);padding:9px 14px;border-radius:10px;font-weight:600;font-size:13.5px;white-space:nowrap}
nav button.on{background:#fff;color:var(--indigo);box-shadow:0 2px 8px rgba(29,99,176,.10)}
nav .cnt{background:var(--bad);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;margin-left:5px}
.who{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2)}
.av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--indigo));color:#fff;display:grid;place-items:center;font-weight:700;overflow:hidden}
.av img{width:100%;height:100%;object-fit:cover}
main{max-width:1280px;margin:0 auto;padding:4px 14px 60px}
.panel{display:none}.panel.on{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:12px}
.stat{padding:15px 18px}.stat b{font-size:26px;display:block;color:var(--indigo);margin-top:2px}
.filters{padding:12px;display:grid;grid-template-columns:2.2fr repeat(5,1fr);gap:9px;margin-bottom:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.chip{padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid var(--edge);color:var(--t2);font-size:12.5px;font-weight:600}
.chip.on{background:var(--indigo);border-color:var(--indigo);color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(370px,1fr));gap:14px}
.job{padding:17px;display:flex;flex-direction:column;gap:10px;transition:.18s}
.job:hover{transform:translateY(-2px);background:var(--glass2)}
.jt{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.jt h3{font-size:16px;line-height:1.3;color:var(--ink)}
.tags{display:flex;gap:5px;flex-wrap:wrap}
.tag{font-size:11.5px;padding:3px 9px;border-radius:999px;background:rgba(46,49,146,.07);color:var(--t2);font-weight:600}
.t-dc{background:rgba(14,159,110,.14);color:#05744f}.t-t1{background:rgba(46,49,146,.13);color:var(--indigo)}.t-t2{background:rgba(10,143,216,.13);color:#0a6aa3}
.t-t3{background:rgba(109,110,113,.14);color:#4b4c50}.t-jb{background:rgba(194,120,3,.13);color:#8a5600}
.t-c2c{background:rgba(14,159,110,.12);color:#05744f}.t-rem{background:rgba(10,143,216,.12);color:#0a6aa3}
.match{min-width:52px;text-align:center;padding:6px 8px;border-radius:12px;font-weight:800;font-size:14px}
.desc{font-size:13px;color:var(--t2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.empty{padding:44px;text-align:center;color:var(--t2)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{padding:22px}
.drop{display:block;border:2px dashed rgba(10,143,216,.35);border-radius:16px;padding:34px;text-align:center;cursor:pointer;transition:.15s;background:rgba(255,255,255,.4)}
.drop:hover,.drop.over{border-color:var(--blue);background:rgba(10,143,216,.07)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:9px 8px;border-bottom:1px solid var(--edge);vertical-align:top}
th{color:var(--t3);font-weight:600;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em}
.pill{padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:700;display:inline-block}
.pill.ok{background:rgba(14,159,110,.14);color:#05744f}.pill.no{background:rgba(214,69,69,.13);color:var(--bad)}.pill.ad{background:rgba(46,49,146,.13);color:var(--indigo)}.pill.wa{background:rgba(194,120,3,.13);color:#8a5600}
.mask{position:fixed;inset:0;background:rgba(22,32,74,.30);backdrop-filter:blur(5px);z-index:50;display:none;align-items:flex-start;justify-content:center;padding:4vh 14px;overflow:auto}
.mask.on{display:flex}
.modal{width:100%;max-width:900px;padding:24px;background:rgba(255,255,255,.88)}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
pre.res{white-space:pre-wrap;font-family:var(--font);font-size:13.5px;line-height:1.6;background:rgba(255,255,255,.75);border:1px solid var(--edge);padding:18px;border-radius:14px;max-height:54vh;overflow:auto;color:var(--ink)}
.list li{margin:4px 0 4px 18px;font-size:13px;color:var(--t2)}
.kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-bottom:12px}
.kv div{background:rgba(255,255,255,.65);border:1px solid var(--edge);border-radius:10px;padding:8px 10px;font-size:13px}
.kv span{display:block;font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:.04em}
.vend{border:1px solid var(--edge);background:rgba(255,255,255,.7);border-radius:12px;padding:12px 14px;margin-bottom:8px}
.spin{width:16px;height:16px;border:2px solid rgba(10,143,216,.25);border-top-color:var(--blue);border-radius:50%;animation:s 1s linear infinite;display:inline-block;vertical-align:-3px}
.pri .spin,.gold .spin{border-color:rgba(255,255,255,.4);border-top-color:#fff}
@keyframes s{to{transform:rotate(360deg)}}
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);padding:12px 18px;z-index:99;display:none;font-size:14px;font-weight:600;color:var(--indigo)}
.foot{text-align:center;color:var(--t3);font-size:12px;margin-top:30px}
@media(max-width:900px){
  .filters{grid-template-columns:1fr 1fr}.two{grid-template-columns:1fr}.grid{grid-template-columns:1fr}
}
/* ---------- Phones ---------- */
@media(max-width:640px){
  body{font-size:15px}
  input,select,textarea{font-size:16px;padding:12px 13px}            /* 16px stops iPhone zoom-on-focus */
  main{padding:4px 10px calc(84px + env(safe-area-inset-bottom))}
  /* Top bar: logo + account. Navigation moves to a thumb-reach bar at the bottom. */
  /* no blur on the bar itself: a blurred parent would trap the fixed bottom nav inside it */
  header.glass{position:sticky;top:0;margin:0 0 10px;border-radius:0 0 16px 16px;padding:8px 12px;gap:10px;justify-content:space-between;
         backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.93)}
  header .logo{height:32px}
  .who span{display:none}
  nav{position:fixed;left:0;right:0;bottom:0;z-index:30;flex:none;gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
      background:rgba(255,255,255,.86);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
      border-top:1px solid var(--edge);box-shadow:0 -6px 24px rgba(29,99,176,.10);overflow-x:auto;scrollbar-width:none}
  nav::-webkit-scrollbar{display:none}
  nav button{flex:1 0 auto;min-height:44px;padding:8px 12px;font-size:13px}
  nav button.on{background:var(--indigo);color:#fff}
  .stats{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:12px 14px}.stat b{font-size:22px}
  .filters{grid-template-columns:1fr 1fr;gap:8px;padding:10px}.filters input{grid-column:1/-1}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .chips::-webkit-scrollbar{display:none}.chip{flex:0 0 auto;padding:9px 13px}
  #pfRoles,#subTabs,#pipeTabs{flex-wrap:wrap;overflow:visible}
  .job{padding:15px}.jt h3{font-size:15.5px}
  .btn{min-height:42px}.btn.sm{min-height:38px;padding:8px 12px;font-size:13px}
  .acts{gap:7px}.acts .btn{flex:1 1 auto}
  .card{padding:16px}.mhead{flex-wrap:wrap}
  .mhead input,.mhead .row{width:100%!important;max-width:none!important}.mhead .row input{flex:1 1 100%}.mhead .row .btn{flex:1}
  .modal>.mhead{flex-wrap:nowrap}
  .row{flex-wrap:wrap}
  .lcard{padding:26px 20px}.lcard .logo{width:170px}#login{padding:14px;align-items:start;padding-top:8vh}
  #cc{width:104px!important}.row #phone{flex:1;min-width:0}
  /* Tables become stacked cards so nothing needs sideways scrolling */
  table,tbody,tr,td{display:block;width:100%}thead{display:none}
  tr{padding:12px 0;border-bottom:1px solid var(--edge)}td{border:0;padding:3px 0;white-space:normal!important}
  td .btn{margin:6px 6px 0 0}td select{width:100%!important;margin-top:4px}
  td input[type=checkbox]{width:22px!important;height:22px}
  table.keep{display:table}table.keep thead{display:table-header-group}table.keep tbody{display:table-row-group}table.keep tr{display:table-row;padding:0}
  table.keep td,table.keep th{display:table-cell;width:auto;padding:8px 6px;border-bottom:1px solid var(--edge)}
  #modal table{display:table;font-size:12px}#modal table tbody{display:table-row-group}#modal table tr{display:table-row;padding:0}#modal table td,#modal table th{display:table-cell;width:auto;padding:6px;border:1px solid #ccd}
  /* Dialogs fill the screen */
  .mask{padding:0;align-items:stretch}.modal{max-width:none;min-height:100%;border-radius:0;padding:16px 14px calc(24px + env(safe-area-inset-bottom));border:0}
  pre.res{max-height:none;padding:14px;font-size:13.5px}
  .kv{grid-template-columns:1fr 1fr}
  .vend .row{align-items:flex-start}
  #toast{left:12px;right:12px;bottom:calc(76px + env(safe-area-inset-bottom));transform:none;text-align:center}
  .foot{margin-top:20px}
}

/* CloudInfraIT workspace — crisp surfaces, quiet color, clear hierarchy. */
:root{--blue:#167e89;--blue2:#116772;--indigo:#23364c;--ink:#203248;--t2:#617080;--t3:#697786;--edge:#e1e7eb;--line:#e1e7eb;--glass:#fff;--glass2:#fff;--ok:#167c63;--r:14px}
body{background:#f5f7f9;font-size:14px}body::before{display:none}h1,h2,h3,h4{color:var(--ink)}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:3px solid #29a4b0;outline-offset:3px}.glass{background:#fff;box-shadow:0 2px 3px #142d4510;backdrop-filter:none;-webkit-backdrop-filter:none;border:1px solid var(--edge)}.btn{border-radius:8px;font-size:13px;min-height:40px;background:#fff}.btn.pri{background:var(--blue);box-shadow:none;border:1px solid var(--blue)}.btn.pri:hover{background:var(--blue2)}.btn.ind{background:#273e55}.btn.ghost:hover{background:#eaf0f3}.btn:disabled{cursor:default}input,select,textarea{border-radius:8px;background:#fff;font-size:13px;min-height:42px}input::placeholder{color:#83909d}input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px #167e8915;border-color:var(--blue)}.eyebrow{display:block;color:var(--blue);font-size:10px;font-weight:800;letter-spacing:.15em}.skip-link{position:fixed;top:-70px;left:12px;z-index:200;background:white;padding:14px;border-radius:8px}.skip-link:focus{top:12px}
header.sidebar{position:fixed;inset:0 auto 0 0;width:232px;border:0;border-radius:0;margin:0;padding:30px 18px 18px;background:#14263a;display:flex;flex-direction:column;align-items:stretch;gap:0;box-shadow:none;color:#dbe4ee}.sidebar-brand{padding:0 10px 30px}.sidebar-brand .logo{display:block;width:172px;height:auto;background:#fff;border-radius:7px;padding:8px 6px}.sidebar-brand>span{display:block;margin-top:13px;font-size:11px;letter-spacing:.08em;color:#a8bacb}.nav-caption{font-size:10px;letter-spacing:.15em;font-weight:700;padding:10px 14px;color:#91a6bb}nav{flex:none;display:flex;flex-direction:column;gap:6px;overflow:visible;margin-top:5px}nav button{display:flex;align-items:center;gap:12px;text-align:left;border-radius:8px;padding:12px 14px;color:#b5c5d6;font-weight:500;min-height:44px}nav button:hover{color:white;background:#ffffff09}nav button.on{color:#fff;background:#244458;box-shadow:inset 3px 0 #57c5c8}.nav-icon{font-size:19px;line-height:20px;width:20px;text-align:center;color:#a6c4d2}nav button.on .nav-icon{color:#78d2d4}nav .cnt{margin-left:auto}.sidebar-note{margin-top:auto;padding:24px 12px 28px}.note-icon{display:block;font-size:28px;color:#73bec3;margin-bottom:10px}.sidebar-note b{font-size:12px;font-weight:500;color:#e2edf4}.sidebar-note p{font-size:11px;line-height:1.7;color:#a4b6c8;margin-top:6px;max-width:170px}.who{border-top:1px solid #ffffff19;padding-top:18px;gap:9px;min-width:0}.av{width:32px;height:32px;flex:none;background:#315c69;color:#d9f4f3;font-size:12px}.account-copy{min-width:0;flex:1}.account-copy>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e4edf6;font-size:11px}.account-copy small{display:block;color:#9fb3c8;font-size:10px;margin-top:4px;text-transform:capitalize}#logout{color:#b8cad9;background:transparent;border:0;padding:5px;min-width:28px;font-size:19px}
main{max-width:1600px;margin-left:232px;padding:0 36px 32px}.workspace-top{height:72px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--edge);font-size:11px;color:var(--t2)}.workspace-top b{font-weight:500;color:var(--ink)}.workspace-top>span>span{margin:0 12px;color:#abb3bc}#connectionStatus{display:flex;align-items:center;gap:7px;font-size:11px}#connectionStatus::before{content:'';width:6px;height:6px;border-radius:50%;background:#8a9aa6}#connectionStatus[data-state=live]::before{background:#298573}#connectionStatus[data-state=error]::before{background:#c27803}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:32px 0 27px}.page-heading h1{font-size:30px;letter-spacing:-.045em;margin:8px 0 9px;font-weight:700;line-height:1.2}.page-heading p{font-size:12px;color:var(--t2);line-height:1.6}.page-heading>.btn{padding:11px 16px;font-size:12px}.stats{gap:14px;margin-bottom:24px;grid-template-columns:repeat(4,minmax(0,1fr))}.stat{padding:18px 20px;position:relative;overflow:hidden}.stat .tiny{font-size:11px;color:var(--t2);font-weight:500}.stat b{font-size:28px;letter-spacing:-.05em;margin-top:12px;line-height:1.2}.stat::after{content:'↗';position:absolute;right:18px;bottom:20px;font-size:19px;color:#779a9d}.stat:first-child{border-top:2px solid var(--blue);padding-top:17px}.stat:first-child b{color:var(--blue)}.filters{grid-template-columns:repeat(5,minmax(0,1fr));padding:20px;gap:15px;margin-bottom:17px;box-shadow:none}.filters label{display:flex;flex-direction:column;gap:7px;min-width:0}.filters label>span{font-size:10px;color:var(--t2);font-weight:600}.filters .search-field{grid-column:1/-1;position:relative}.search-field input{padding-left:14px;padding-right:40px;height:44px;font-size:13px;background:#f8fafb}.search-field kbd{position:absolute;right:13px;bottom:12px;border:1px solid #d9e0e5;border-radius:4px;width:19px;height:20px;text-align:center;color:#85929f;font-size:12px;background:#fff}.filters select{font-size:12px;min-width:0;padding:9px}.chips{gap:7px;margin-bottom:0}.chip{border-radius:7px;font-size:11px;font-weight:500;background:#fff;padding:7px 10px;transition:background .15s}.chip.on{background:#e1f1f1;color:#17646b;border-color:#badcde}.chip:hover{border-color:#97b8bd}.results-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:25px 0 17px}.results-bar>div:first-child{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.results-bar h2{font-size:16px;letter-spacing:-.03em}.results-bar #resultCount{font-size:11px;color:var(--t2)}.result-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.view-switch{display:flex;border:1px solid var(--edge);border-radius:7px;padding:3px;background:#fff;gap:2px}.view-switch button{border-radius:4px;padding:3px 9px;font-size:19px;color:#728495;background:transparent}.view-switch button[aria-pressed=true]{background:#e8eef2;color:#23475c}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.job{padding:22px;gap:14px;box-shadow:0 2px 3px #142d4505}.job:hover{transform:none;border-color:#a8c5ca;box-shadow:0 4px 16px #173b4d08}.job-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.job-top .tiny{font-size:10px;white-space:nowrap}.jt h3{font-size:16px;line-height:1.45;letter-spacing:-.025em}.jt .small{font-size:11px;line-height:1.7}.match{min-width:46px;padding:7px;font-size:13px;border-radius:8px}.match small{display:block;font-size:8px;font-weight:500;margin-top:3px}.tags{gap:6px}.tag{border-radius:5px;padding:4px 7px;font-size:10px;line-height:1.35;font-weight:500;background:#f0f3f6}.t-t1{background:#edf0fc;color:#5056a0}.t-dc,.t-c2c{background:#e8f4ee;color:#247256}.t-t2,.t-rem{background:#eaf2f9;color:#3a6f93}.skills .tag{background:#f3f5f7;color:#566677}.job .acts{border-top:1px solid #edf0f3;padding-top:14px;gap:7px}.job .btn.sm{font-size:11px;min-height:32px;padding:6px 9px}.job .btn.pri{background:#e9f4f4;color:#176c75;border:1px solid #cfe4e6}.job .btn.pri:hover{background:#dcefee}.job .btn.ind{background:#233e53}.job .save-action{margin-left:auto}.job-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--t2);font-size:11px}.job-meta>span+span::before{content:'·';margin-right:12px;color:#9ba8b5}.grid.list-view{grid-template-columns:1fr}.list-view .job{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px 24px}.list-view .job-top,.list-view .acts{grid-column:1/-1}.list-view .job-meta{grid-column:1}.list-view .skills{grid-column:2;grid-row:2 / span 2;align-content:center}.empty{padding:48px 24px;font-size:13px;line-height:1.8}.empty h3{font-size:18px;margin-bottom:6px}.empty .btn{margin-top:16px}.notice{background:#fff3d8;border:1px solid #e4d4a4;border-radius:8px;padding:12px 16px;margin-top:16px;font-size:12px}.card h2,.card h3{letter-spacing:-.025em}.card{box-shadow:none}.card .chips{margin:12px 0}.panel>.chips{margin:0 0 20px}.foot{font-size:10px;margin-top:36px;color:#778492}.modal{background:#fff;border-radius:16px;padding:28px}.mask{background:#13233588;backdrop-filter:blur(3px)}body.modal-open{overflow:hidden}.modal .acts{margin-top:16px}.modal .btn{white-space:normal}#toast{background:#17364b;color:#fff;border:0;box-shadow:0 8px 30px #12233726;max-width:calc(100vw - 30px);font-size:13px}.drop{border:1.5px dashed #95bbc0;background:#f8fbfb;border-radius:10px}.tiny{line-height:1.6}
#login{padding:0;display:grid;grid-template-columns:1fr 1fr;min-height:100vh;background:#fff}.login-story{min-height:100vh;background:#142b40;color:white;padding:42px 54px 30px;display:flex;flex-direction:column;position:relative;overflow:hidden}.login-story::before{content:'';position:absolute;right:-240px;top:120px;width:530px;height:530px;border:1px solid #ffffff0c;border-radius:50%;box-shadow:0 0 0 70px #ffffff03,0 0 0 140px #ffffff02;pointer-events:none}.story-brand{display:flex;align-items:center;gap:15px;font-size:9px;letter-spacing:.17em;color:#baceda}.story-brand img{width:44px;background:#fff;padding:5px;border-radius:7px}.story-content{position:relative;max-width:470px;margin:auto 0;padding:60px 0}.story-content .eyebrow{color:#80cbd1}.story-content h2{font-size:46px;color:#f2f8fc;letter-spacing:-.055em;line-height:1.13;margin:22px 0}.story-content>p{color:#b0c3d3;max-width:375px;line-height:1.9;font-size:13px}.story-flow{margin-top:42px;display:flex;flex-direction:column;gap:25px}.story-flow>div{display:flex;gap:18px;align-items:flex-start}.story-flow>div>span{font-size:10px;padding:9px;border:1px solid #7298ae40;border-radius:50%;color:#8dced0}.story-flow b{font-size:13px;font-weight:500}.story-flow p{font-size:11px;color:#a9becf;line-height:1.7;margin-top:6px}.story-footer{display:flex;justify-content:space-between;font-size:10px;color:#aac0d1}.story-footer span{color:#9cb4c7}.login-form-wrap{padding:50px 30px;display:flex;align-items:center;justify-content:center}.lcard{max-width:410px;box-shadow:none;border:0;border-radius:0;padding:12px;background:transparent}.lcard .logo{width:186px;margin:0 0 42px}.lcard h1{font-size:32px;margin:12px 0 0;letter-spacing:-.04em}.lcard>p.muted{text-align:left!important;font-size:13px;line-height:1.8;margin-top:12px!important}.lcard .tabs{margin-top:28px;background:#f1f4f6;border-radius:8px;padding:4px}.tabs button{border-radius:6px;font-size:12px}.lcard .tiny{font-size:10px}.lcard .gbtn{font-size:13px;border-radius:8px}.lcard .err{line-height:1.6}.lcard input{font-size:14px}
@media(min-width:1600px){main{padding-left:56px;padding-right:56px}.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px){header.sidebar{width:205px;padding:24px 12px 16px}.sidebar-brand .logo{width:155px}main{margin-left:205px;padding:0 24px 28px}.job{padding:18px}.page-heading h1{font-size:27px}.stats{gap:10px}.stat{padding:16px 14px}.stat:first-child{padding-top:15px}.stat::after{display:none}.login-story{padding:35px}.story-content h2{font-size:38px}}
@media(max-width:800px){.grid{grid-template-columns:1fr}.filters{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.page-heading>.btn{font-size:11px}.login-story{padding:30px}.story-content h2{font-size:34px}.story-brand{font-size:8px}.story-footer span{display:none}}
@media(max-width:640px){header.sidebar{position:sticky;top:0;width:100%;height:65px;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 16px;border-radius:0;background:#14263a;margin:0;z-index:25}.sidebar-brand{padding:0}.sidebar-brand .logo{height:39px;width:auto;padding:5px 7px}.sidebar-brand>span,.nav-caption,.sidebar-note,.account-copy{display:none}.who{border:0;padding:0;gap:8px}.who .av{width:29px;height:29px}#logout{min-height:34px}.sidebar nav{position:fixed;left:0;right:0;bottom:0;flex-direction:row;overflow-x:auto;gap:2px;padding:6px 7px calc(6px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--edge);margin:0;box-shadow:0 -3px 18px #142d4508;border-radius:0}.sidebar nav button{flex:1 0 auto;flex-direction:column;gap:3px;min-height:49px;padding:6px 10px;border-radius:6px;color:#607183;font-size:9px}.sidebar nav button.on{color:#176c75;background:#e9f4f4;box-shadow:none}.nav-icon{font-size:17px;color:#607183}.sidebar nav button.on .nav-icon{color:#176c75}nav .cnt{position:absolute;top:2px;font-size:8px;margin-left:37px}.who span{display:block}main{margin-left:0;padding:0 16px calc(88px + env(safe-area-inset-bottom))}.workspace-top{height:43px;font-size:10px}.workspace-top>span>span{margin:0 6px}#connectionStatus{font-size:9px}.page-heading{padding:24px 0 20px;align-items:flex-start}.page-heading h1{font-size:25px}.page-heading .eyebrow{font-size:8px}.page-heading p{font-size:11px}.page-heading>.btn{min-width:36px;width:36px;height:36px;min-height:36px;padding:0;flex:none;font-size:21px;margin-top:18px}.page-heading>.btn span{display:none}.stats{gap:9px;margin-bottom:16px}.stat{padding:13px 14px}.stat:first-child{padding-top:12px}.stat .tiny{font-size:10px}.stat b{font-size:25px;margin-top:7px}.filters{padding:14px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.filters label>span{font-size:10px}.filters input,.filters select{font-size:16px}.filters select{padding:9px 7px;letter-spacing:-.03em}.filters label:last-child{grid-column:1/-1}.search-field input{font-size:16px;letter-spacing:-.03em}.chips .chip{font-size:11px;padding:8px 10px}.results-bar{padding:21px 0 13px;gap:10px}.results-bar h2{font-size:15px}.results-bar>div:first-child{gap:4px;flex-direction:column}.results-bar #resultCount{font-size:10px}.results-bar .btn{font-size:10px;padding:6px;min-height:32px}.view-switch button{font-size:17px;padding:4px 7px}.grid{gap:12px}.job{padding:18px;gap:13px}.job .btn.sm{min-height:38px;font-size:11px;padding:7px 9px}.job .save-action{margin-left:0}.job .acts .btn{flex:1 1 auto}.job .jt h3{font-size:16px}.job-top .tiny{font-size:9px}.list-view .job{display:flex}.tag{font-size:10px}.modal{padding:20px 16px;border-radius:0}.modal .mhead{align-items:flex-start}.modal .mhead input{width:auto}.modal .mhead .btn[data-close]{flex:none;min-width:36px}.mask .modal{min-height:100%}.tiny{font-size:11px}input,select,textarea{font-size:16px}.login-story{display:none}#login{display:block;background:#fff;padding:0;min-height:100dvh}.login-form-wrap{min-height:100dvh;padding:38px 24px}.lcard{padding:0;max-width:390px}.lcard .logo{width:175px;margin-bottom:36px}.lcard h1{font-size:30px}.lcard input{font-size:16px}.foot{margin-top:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Phone fit-and-finish: all six tabs fit without sideways scrolling; form controls never exceed the dialog */
@media(max-width:640px){
  .sidebar nav{overflow-x:hidden}
  .sidebar nav button{flex:1 1 0;min-width:0;padding:6px 2px;overflow:hidden;text-overflow:ellipsis}
  .modal select,.modal input,.modal textarea{max-width:100%;min-width:0}
  .modal .row{flex-wrap:wrap}.modal .row select{flex:1 1 100%;width:100%!important}
}

/* ===== Glass theme: frosted panels over a soft colour field. Layout and behaviour are unchanged. ===== */
:root{--glass:rgba(255,255,255,.52);--glass2:rgba(255,255,255,.70);--line:rgba(255,255,255,.82);--edge:rgba(32,50,72,.11);--r:18px;
  --blur:blur(22px) saturate(165%);--shadow:0 10px 34px rgba(20,45,69,.10),inset 0 1px 0 rgba(255,255,255,.92)}
body{background:#e8f0f7}
body::before{display:block;content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:
  radial-gradient(720px 540px at 14% 2%,rgba(22,126,137,.36),transparent 62%),
  radial-gradient(700px 560px at 96% 8%,rgba(46,49,146,.27),transparent 62%),
  radial-gradient(780px 640px at 74% 104%,rgba(10,143,216,.28),transparent 60%),
  radial-gradient(540px 460px at 26% 98%,rgba(87,197,200,.26),transparent 60%),
  linear-gradient(160deg,#f3f8fb,#e5eff8 50%,#eaeefa)}
.glass{background:var(--glass);border:1px solid var(--line);border-radius:var(--r);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow)}
.job.glass{transition:transform .18s,background .18s,box-shadow .18s}
.job.glass:hover{background:var(--glass2);transform:translateY(-2px);box-shadow:0 18px 44px rgba(20,45,69,.15),inset 0 1px 0 #fff}
.stat:first-child{border-top:2px solid var(--blue)}
.filters{box-shadow:var(--shadow)}
.workspace-top{border-bottom:1px solid var(--edge)}
/* controls */
input,select,textarea{background:rgba(255,255,255,.58);border:1px solid var(--edge);border-radius:11px}
input:focus,select:focus,textarea:focus{background:rgba(255,255,255,.95)}
.search-field input{background:rgba(255,255,255,.5)}
.search-field kbd{background:rgba(255,255,255,.7);border-color:var(--edge)}
.btn{background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);border-radius:11px;box-shadow:0 1px 2px rgba(20,45,69,.06)}
.btn:hover{background:rgba(255,255,255,.92);box-shadow:0 4px 14px rgba(20,45,69,.10)}
.btn.pri{background:linear-gradient(135deg,#17939f,#1b6fae);border:0;color:#fff;box-shadow:0 6px 18px rgba(23,134,160,.32),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.pri:hover{background:linear-gradient(135deg,#1aa0ad,#1f7abd);filter:none}
.btn.ind{background:linear-gradient(135deg,#2a4660,#1d3148);border:0;color:#fff;box-shadow:0 6px 16px rgba(29,49,72,.25),inset 0 1px 0 rgba(255,255,255,.18)}
.btn.on{background:rgba(22,124,99,.14);border-color:rgba(22,124,99,.35)}
.btn.ghost{background:transparent;border:0;box-shadow:none}
.chip{background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85);border-radius:999px}
.chip.on{background:rgba(22,126,137,.16);border-color:rgba(22,126,137,.4);color:#12606a}
.tag{background:rgba(32,50,72,.07)}
.drop{background:rgba(255,255,255,.35);border-color:rgba(22,126,137,.4)}
pre.res,.kv div,.vend{background:rgba(255,255,255,.6);border:1px solid var(--edge);border-radius:14px}
th,td{border-bottom-color:var(--edge)}
.tabs{background:rgba(32,50,72,.07)}.tabs button.on{background:rgba(255,255,255,.9)}
/* dialogs */
.mask{background:rgba(18,35,55,.30);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal.glass{background:rgba(255,255,255,.80);backdrop-filter:blur(30px) saturate(170%);-webkit-backdrop-filter:blur(30px) saturate(170%);border-radius:22px;box-shadow:0 30px 80px rgba(18,35,55,.28),inset 0 1px 0 #fff}
#toast.glass{background:rgba(255,255,255,.82)}
/* sign-in */
#login{background:transparent;place-items:stretch}
.login-story{justify-self:stretch;align-self:stretch}
.login-form-wrap{justify-self:stretch}
.login-story{background:linear-gradient(150deg,rgba(15,38,58,.93),rgba(22,62,92,.84) 60%,rgba(22,104,116,.78));backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
.login-story::after{content:"";position:absolute;left:-120px;bottom:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(87,197,200,.35),transparent 65%);pointer-events:none}
.story-flow>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:14px 16px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.lcard.glass{max-width:440px;padding:38px 34px;border-radius:26px;background:rgba(255,255,255,.58);border:1px solid var(--line);backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);box-shadow:0 24px 70px rgba(20,45,69,.16),inset 0 1px 0 #fff}
.lcard .gbtn{background:rgba(255,255,255,.9);border:1px solid var(--edge);border-radius:12px}
/* desktop: floating frosted sidebar */
@media(min-width:641px){
  header.sidebar{inset:14px auto 14px 14px;width:218px;border-radius:24px;border:1px solid rgba(255,255,255,.16);
    background:linear-gradient(180deg,rgba(16,34,54,.80),rgba(20,44,66,.68));backdrop-filter:blur(28px) saturate(170%);-webkit-backdrop-filter:blur(28px) saturate(170%);
    box-shadow:0 20px 60px rgba(18,35,55,.30),inset 0 1px 0 rgba(255,255,255,.14)}
  .sidebar-brand .logo{background:rgba(255,255,255,.94);border-radius:14px}
  nav button{border-radius:12px}
  nav button:hover{background:rgba(255,255,255,.08)}
  nav button.on{background:rgba(255,255,255,.15);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 3px 0 #62d0d2}
  .sidebar-note{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);border-radius:16px;margin:auto 4px 14px;padding:16px 14px}
}
@media(min-width:641px) and (max-width:1100px){header.sidebar{width:191px}}
/* phones: the top bar must not blur (a blurred parent would trap the bottom menu inside it); the menu itself is frosted */
@media(max-width:640px){
  header.sidebar{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(120deg,#12283c,#17485a);border:0;border-radius:0 0 20px 20px;box-shadow:0 8px 26px rgba(18,35,55,.22)}
  .sidebar nav{background:rgba(255,255,255,.70);backdrop-filter:blur(24px) saturate(170%);-webkit-backdrop-filter:blur(24px) saturate(170%);border-top:1px solid rgba(255,255,255,.85);box-shadow:0 -8px 28px rgba(20,45,69,.12)}
  .sidebar nav button{border-radius:12px}
  .sidebar nav button.on{background:rgba(22,126,137,.14);box-shadow:none}
  /* long lists stay smooth on phones: cards keep the frosted look without a per-card blur */
  .job.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.74)}
  #login{background:transparent}
  .login-form-wrap{padding:26px 16px}
  .lcard.glass{padding:28px 22px;border-radius:22px}
  .modal.glass{border-radius:0;background:rgba(255,255,255,.90)}
}
/* browsers without backdrop blur get solid panels instead of see-through text */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass,.modal.glass,.lcard.glass{background:rgba(255,255,255,.94)}header.sidebar{background:#14263a}.sidebar nav{background:#fff}
}
@media(prefers-reduced-motion:reduce){.job.glass,.job.glass:hover{transition:none;transform:none}}

/* Preserve readable status messages in the glass theme. */
#toast.glass{background:#17364b;color:#fff}

.focus-editor{margin:16px 0 8px;padding:16px;border:1px solid var(--line,#d6e1eb);border-radius:14px;min-width:0}.focus-editor legend{font-weight:700;padding:0 6px}.focus-editor select{margin:6px 0 10px}.focus-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.focus-options label{display:flex;align-items:center;gap:7px;font-size:13px;padding:8px;border-radius:8px;background:rgba(255,255,255,.6)}.focus-options input{width:16px;height:16px;min-height:16px;margin:0;flex:none;accent-color:#0b849b}.focus-options label:has(input:checked){background:#e0f2f5;color:#164d5b}.focus-options input:disabled{opacity:.65}#bnError{color:var(--bad);margin:12px 0}#benchAddForm label{font-size:13px} @media(max-width:600px){.focus-options{grid-template-columns:repeat(2,minmax(0,1fr))}.focus-editor{padding:10px}}

/* Keep long editing forms legible while the page behind them remains softened. */
.modal.glass{background:#f6fafc;backdrop-filter:none;-webkit-backdrop-filter:none}
@media(max-width:600px){.mask{align-items:flex-start}.modal.glass{min-height:100dvh;border-radius:0}}

/* Assignment controls stay clear on both table and stacked mobile views. */
.bench-assignee .btn{display:block;margin-top:6px}.assignment-caption{display:none}#assignForm select{margin:6px 0 0}#assignForm details{margin:12px 0}#assignForm ul{padding-left:20px}#assignForm .acts{margin-top:16px}#assignError:empty{display:none}
@media(max-width:640px){.assignment-caption{display:block;margin-bottom:3px}}

.group-pick{display:flex;align-items:center;gap:7px}.group-pick input,.group-review input{width:17px;height:17px;min-height:17px}.group-review{border:1px solid var(--edge);padding:14px;border-radius:10px;margin:12px 0}.group-review label{display:flex;gap:8px;align-items:flex-start}#groupError{color:var(--bad)}.requirement-controls .on{background:#d7eff1;color:#135d69}.group-review pre{white-space:pre-wrap;max-height:300px;overflow:auto}

/* ---------- Fit check ---------- */
.fit-card{margin-bottom:14px}.fit-rank{color:var(--t3);font-weight:700}
.fit-score{min-width:92px;font-size:20px;padding:10px 12px}.fit-score small{display:block;font-size:11px;font-weight:700;margin-top:2px}
.fit-h{font-size:13px;margin-bottom:8px}
.fit-skill{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-radius:10px;margin-bottom:5px;background:rgba(255,255,255,.55);border:1px solid var(--edge)}
.fit-skill b{font-size:13px}.fit-mark{font-weight:800;width:16px;flex:none;text-align:center}
.fit-skill.has .fit-mark{color:#05744f}.fit-skill.lacks{background:rgba(214,69,69,.07);border-color:rgba(214,69,69,.22)}.fit-skill.lacks .fit-mark{color:#9b2c2c}
.fit-evidence{margin-top:2px;font-style:italic;overflow-wrap:anywhere}
.fit-x{background:none;border:0;color:inherit;font-size:14px;line-height:1;padding:0 0 0 4px;cursor:pointer}
#fitJd,#fitResumeText{resize:vertical;min-height:140px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(max-width:640px){.fit-score{min-width:76px;font-size:17px}.fit-card .mhead{flex-wrap:nowrap}}
/* Seven tabs on a phone: keep labels whole and let the bar scroll sideways instead of clipping them */
@media(max-width:640px){.sidebar nav{overflow-x:auto;scrollbar-width:none}.sidebar nav::-webkit-scrollbar{display:none}.sidebar nav button{flex:1 0 58px;overflow:visible}}

/* Double-submission warning and right to represent */
.guard{margin-top:12px;display:grid;gap:8px}.guard:empty{display:none}.guard ul{margin:6px 0 8px 18px;font-size:13px;line-height:1.45}
.guard-warn{border:1px solid #e3b25a;background:#fff7e6;border-radius:10px;padding:10px 12px;color:#5c3b00}.guard-warn input:not([type=checkbox]){margin-top:8px}
.guard-note{border:1px solid var(--edge);background:#f6f8fa;border-radius:10px;padding:8px 12px;color:var(--t2)}.guard-note ul{margin-bottom:0}
.guard-ok{border:1px solid #a9dccb;background:#effaf5;border-radius:10px;padding:9px 12px;font-size:13px;color:#0b5a41}
.guard-rtr{border:1px solid var(--edge);border-radius:10px;padding:10px 12px;background:#fff}.guard-clear{color:#0b5a41}
label.check{display:flex;gap:8px;align-items:flex-start;font-size:13px;line-height:1.4;cursor:pointer}label.check input{width:18px;height:18px;min-height:0;flex:none;margin-top:1px}
.rtr-statement{border-left:3px solid var(--blue);background:#f3f8fa;padding:10px 12px;border-radius:0 8px 8px 0;font-size:14px;line-height:1.5}
.sub-flags{margin-top:4px;display:flex;gap:4px;flex-wrap:wrap}.sub-flags:empty{display:none}

.bench-actions{display:flex;flex-wrap:wrap;gap:5px;min-width:225px;max-width:310px}.criteria-review{margin-top:12px}.criteria-review label{display:block;margin:10px 0 5px}.fit-review-note{padding:10px;border-left:3px solid var(--accent,#07899a);margin-top:10px}

.mail-from{padding:12px 14px;background:rgba(8,137,154,.09);border:1px solid rgba(8,137,154,.18);border-radius:12px;margin:10px 0;overflow-wrap:anywhere}#p-email h2{font-size:20px}#p-email label{line-height:1.5}#p-email [role=status]{font-size:13px;margin-top:10px}#p-email form[data-mail-config] label{display:block;font-size:13px;margin:8px 0 4px}
