:root{--ink:#17221d;--muted:#68746e;--paper:#f6f5ef;--green:#176b4c;--lime:#dceca4;--line:#dedfd7}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.45 Inter,system-ui,sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}aside{position:fixed;inset:0 auto 0 0;width:230px;background:#183f32;color:white;padding:30px 22px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;font-size:18px}.brand b{background:var(--lime);color:#183f32;width:36px;height:36px;display:grid;place-items:center;border-radius:10px}nav{display:grid;gap:8px;margin-top:50px}nav button{border:0;background:transparent;color:#cfdbd5;padding:12px 14px;border-radius:8px;text-align:left}nav button.active,nav button:hover{background:#285848;color:white}nav span{margin-left:10px}.tip{margin-top:auto;background:#285848;padding:17px;border-radius:12px}.tip small,.eyebrow{letter-spacing:.12em;font-size:11px;font-weight:800}.tip strong{display:block;margin:8px 0}.tip p{color:#bed0c7;font-size:12px;margin:0}main{margin-left:230px;max-width:1250px;padding:48px 5vw}header{display:flex;justify-content:space-between;align-items:center;gap:20px}h1,h2{font-family:Georgia,serif;font-weight:500}h1{font-size:42px;margin:4px 0}h2{font-size:28px;margin:3px 0}header p{color:var(--muted);margin:0}.eyebrow{color:var(--green)!important}.primary,.secondary{border:0;border-radius:8px;padding:11px 17px;font-weight:700}.primary{background:var(--green);color:white}.secondary{background:#edf0eb}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:34px 0 22px}.stat{background:white;border:1px solid var(--line);border-radius:12px;padding:17px}.stat strong{display:block;font:30px Georgia,serif}.stat span,.meta{color:var(--muted);font-size:12px}.toolbar{display:flex;gap:10px;margin-bottom:18px}.search{background:white;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;flex:1;padding:0 12px}.search input{border:0;outline:0;width:100%;padding:11px;background:transparent}select{border:1px solid var(--line);border-radius:8px;padding:0 12px;background:white}.jobs{display:grid;gap:12px}.job{display:grid;grid-template-columns:90px 1fr auto;gap:22px;background:white;border:1px solid var(--line);padding:22px;border-radius:12px}.score{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--score)*1%),#e7e9e3 0);position:relative}.score:after{content:"";position:absolute;width:60px;height:60px;background:white;border-radius:50%}.score strong{z-index:1;font-size:18px}.job h3{margin:0;font-size:19px}.meta{margin:4px 0 12px}.reason{margin:0 0 12px}.pills{display:flex;flex-wrap:wrap;gap:6px}.pill{background:#eef4dc;color:#416029;border-radius:20px;padding:4px 9px;font-size:11px;font-weight:700}.pill.missing{background:#f8ece5;color:#914a27}.job-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-end}.job-actions select{height:38px}.job-actions a{color:var(--green);font-weight:700;font-size:13px;text-decoration:none}.empty{text-align:center;padding:60px;color:var(--muted);background:white;border:1px dashed var(--line);border-radius:12px}dialog{width:min(650px,92vw);border:0;border-radius:14px;padding:25px;box-shadow:0 25px 80px #13221b55}dialog::backdrop{background:#102019aa}.modal-head{display:flex;justify-content:space-between}.close{border:0;background:transparent;font-size:25px}textarea{width:100%;min-height:130px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:10px}label{display:grid;gap:5px;font-weight:700;font-size:13px;margin-top:12px}label input{border:1px solid var(--line);border-radius:8px;padding:10px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}.actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}@media(max-width:800px){aside{position:static;width:auto;padding:16px 20px;flex-direction:row}.tip{display:none}nav{margin:0 0 0 auto;display:flex}main{margin:0;padding:28px 18px}.stats{grid-template-columns:1fr 1fr}.job{grid-template-columns:70px 1fr}.job-actions{grid-column:2;flex-direction:row}.toolbar{flex-wrap:wrap}.search{flex-basis:100%}h1{font-size:34px}}
.login-page { min-height: 100vh; display: grid; place-items: center; background: #183f32; }
.brand strong { overflow-wrap: anywhere; }
[hidden] { display: none !important; }
.login-card { margin: 30px; width: min(430px, calc(100vw - 32px)); padding: 35px; background: white; border-radius: 16px; box-shadow: 0 25px 80px #0b1d1666; }
.login-card h1 { font-size: 38px; }
.login-card > .brand { color: var(--ink); margin-bottom: 35px; }
.wide { width: 100%; margin-top: 16px; }
.form-error { color: #a43b31; font-weight: 700; }
.login-card details { margin-top: 22px; }
.security-section { border-top: 1px solid var(--line); padding: 18px 0; }
.security-section h3 { margin: 0; }
.security-section form { display: grid; gap: 8px; }
.security-item { display: flex; justify-content: space-between; background: #f4f5f0; padding: 10px; border-radius: 7px; }
pre { background: #17221d; color: #e8f0ec; padding: 14px; border-radius: 8px; white-space: pre-wrap; user-select: all; }
#totpQr { display: block; width: 240px; max-width: 100%; margin: 14px auto; border-radius: 8px; }
#totpSecret { overflow-wrap: anywhere; user-select: all; }
:root {
  --ink: #102c3b;
  --muted: #55707d;
  --paper: #fbfcfc;
  --card: #ffffff;
  --green: #1f6f94;
  --lime: #d9eef5;
  --line: #d6e4e9;
  --orange: #d7803f;
  --navy: #062f49;
  --navy-deep: #032234;
  --ice-soft: #eef8fb;
  --accent: #d7803f;
  --accent-dark: #b75f24;
}

body { background: var(--paper); color: var(--ink); }
aside { background: linear-gradient(165deg, var(--navy) 0%, var(--navy-deep) 100%); }
.brand-logo { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.brand-logo img { display: block; width: 178px; height: auto; }
.brand-logo small { align-self: flex-end; margin-right: 3px; color: #9bd3e6; font-size: 10px; font-weight: 850; letter-spacing: .22em; }
nav button.active, nav button:hover { background: rgba(155, 211, 230, .14); }
.tip { border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.07); }
.tip small { color: #9bd3e6; }
.primary { background: var(--accent); }
.primary:hover { background: var(--accent-dark); }
.secondary { background: var(--ice-soft); color: var(--navy); }
.eyebrow { color: var(--blue, #1f6f94) !important; }
h1, h2 { color: var(--navy); letter-spacing: -.025em; }
.stat, .job, dialog, .search, select { border-color: var(--line); }
.score { background: conic-gradient(var(--blue, #1f6f94) calc(var(--score)*1%), #e6f0f3 0); }
.pill { background: var(--ice); color: var(--navy); }
.pill.missing { background: #fff0e6; color: var(--accent-dark); }
.job-actions a { color: var(--blue, #1f6f94); }
input:focus, textarea:focus, select:focus { outline: 3px solid rgba(31,111,148,.16); border-color: #1f6f94; }

.login-page {
  background:
    radial-gradient(circle at 78% 22%, rgba(111,188,217,.28), transparent 27%),
    linear-gradient(125deg, var(--navy-deep), var(--navy) 58%, #0b5878);
}
.login-card { overflow: hidden; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 28px 80px rgba(3,34,52,.38); }
.login-card > .brand-logo { margin: -35px -35px 30px; padding: 24px 30px 20px; background: var(--navy); }
.login-card > .brand-logo img { width: 205px; }
.login-card > .brand-logo small { margin-right: 115px; }
#totpQr { border: 8px solid var(--white, #fff); box-shadow: 0 8px 24px rgba(3,34,52,.12); }

@media (max-width: 800px) {
  aside .brand-logo img { width: 130px; }
  aside .brand-logo small { display: none; }
}