@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

:root{
  --navy:#00317F; --navy-d:#001F52; --navy-l:#1A4DA0;
  --navy-t:#E7EDF7; --navy-t2:#D6E0F0;
  --yellow:#F5A423; --yellow-d:#C9810C; --yellow-t:#FDF1DC;
  --ink:#16203A; --muted:#5C6678; --faint:#9AA3B2;
  --line:#E2E7F0; --line-d:#CDD5E3;
  --paper:#F4F6FB; --white:#FFFFFF;
  --ok:#1F7A4D; --ok-t:#E5F2EB; --warn:#9A5B00; --warn-t:#F7EEDC; --neg:#9A2C2C;
  --f:'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{font-family:var(--f);background:var(--paper);color:var(--ink);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased;}
.num{font-variant-numeric:tabular-nums lining-nums;}
button{font-family:var(--f);cursor:pointer;}
a{color:inherit;}

/* ============ LOGIN ============ */
#login{position:fixed;inset:0;display:grid;grid-template-columns:1.15fr .85fr;z-index:50;}
@media(max-width:860px){#login{grid-template-columns:1fr;}}
.login-brandside{
  position:relative;overflow:hidden;color:#fff;padding:54px 56px;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(245,164,35,.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 40px),
    linear-gradient(150deg, var(--navy) 0%, var(--navy-d) 100%);
}
@media(max-width:860px){.login-brandside{display:none;}}
.brand-lock{display:flex;align-items:center;gap:13px;}
.brand-mark{width:42px;height:42px;border-radius:11px;background:var(--yellow);position:relative;flex:none;}
.brand-mark::before{content:"";position:absolute;inset:11px 11px auto 11px;height:5px;border-radius:3px;background:var(--navy-d);}
.brand-mark::after{content:"";position:absolute;inset:21px 11px 11px 11px;border-radius:3px;background:var(--navy-d);opacity:.55;}
/* login lock-up: sized for the full platform name, wraps to two lines cleanly */
.brand-word{font-weight:800;font-size:19px;line-height:1.25;letter-spacing:-.01em;max-width:19ch;}
.brand-word small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9FC0E8;margin-top:1px;}
.login-hero{margin-top:auto;}
.login-hero h2{font-weight:800;font-size:33px;line-height:1.12;letter-spacing:-.02em;margin:0 0 14px;max-width:13ch;}
.login-hero p{color:#C4D2EA;font-size:15px;max-width:42ch;margin:0;}
.login-points{margin-top:30px;display:flex;flex-direction:column;gap:11px;}
.lp{display:flex;align-items:center;gap:11px;font-size:13.5px;color:#DCE6F5;}
.lp .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);flex:none;}
.login-foot{margin-top:38px;font-size:11.5px;color:#7D93B8;}

.login-formside{background:var(--white);display:flex;align-items:center;justify-content:center;padding:40px 30px;overflow:auto;}
.login-card{width:100%;max-width:360px;}
.login-card h1{font-weight:700;font-size:23px;margin:0 0 5px;letter-spacing:-.01em;}
.login-card .lc-sub{color:var(--muted);font-size:13.5px;margin-bottom:26px;}
.lbl{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin:0 0 6px;}
.inp{width:100%;border:1px solid var(--line-d);border-radius:9px;padding:11px 13px;font-size:14.5px;font-family:var(--f);outline:none;background:#fff;margin-bottom:16px;}
.inp:focus{border-color:var(--navy);box-shadow:0 0 0 3px var(--navy-t);}
.btn-primary{width:100%;background:var(--yellow);color:#3A2600;border:none;border-radius:9px;padding:12px;font-weight:700;font-size:14.5px;letter-spacing:.01em;transition:.15s;}
.btn-primary:hover{filter:brightness(.96);}
.or{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;margin:18px 0;}
.or::before,.or::after{content:"";height:1px;background:var(--line);flex:1;}
.btn-sso{width:100%;background:#fff;border:1px solid var(--line-d);border-radius:9px;padding:11px;font-weight:600;font-size:14px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:10px;transition:.15s;}
.btn-sso:hover{border-color:var(--navy);background:var(--navy-t);}
.msft{width:16px;height:16px;display:inline-grid;grid-template-columns:1fr 1fr;gap:2px;}
.msft i{display:block;width:7px;height:7px;}
.msft i:nth-child(1){background:#F25022;} .msft i:nth-child(2){background:#7FBA00;}
.msft i:nth-child(3){background:#00A4EF;} .msft i:nth-child(4){background:#FFB900;}
.mfa-note{font-size:11.5px;color:var(--faint);text-align:center;margin-top:16px;}

/* ---- two-factor sign-in ---- */
/* The code box is the whole task on that step, so it is deliberately large,
   monospaced and widely tracked — six digits copied off a phone screen. */
.code-inp{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:24px;letter-spacing:.34em;
          text-align:center;padding:14px 13px;}
.code-inp::placeholder{letter-spacing:.34em;color:var(--faint);}
.mfa-who{font-size:12.5px;color:var(--muted);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);}
.mfa-who b{color:var(--navy);}
.enrol-steps{font-size:12.5px;line-height:1.7;color:var(--muted);margin-bottom:14px;}
.enrol-steps b{color:var(--navy);margin-right:4px;}
.qr-frame{display:flex;justify-content:center;background:#fff;border:1px solid var(--line-d);
          border-radius:12px;padding:10px;margin-bottom:12px;}
.qr-frame img{width:196px;height:196px;display:block;}
.manual-key{font-size:11.5px;color:var(--muted);text-align:center;margin-bottom:16px;line-height:1.7;}
.manual-key code{display:block;margin-top:5px;font-size:13px;letter-spacing:.08em;padding:7px 9px;}
.rc-warn{background:#FFF6E5;border:1px solid #E8D3A8;border-radius:10px;padding:12px 14px;
         font-size:12.5px;line-height:1.6;margin-bottom:16px;}
.rc-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.rc-grid span{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px;letter-spacing:.06em;
              background:var(--paper);border:1px solid var(--line);border-radius:7px;padding:9px 10px;text-align:center;}
@media print{
  /* printing the recovery-code sheet: just the codes, nothing else */
  body.rc-print .login-brandside,body.rc-print #loginForm,body.rc-print #loginExtras,
  body.rc-print #mfaForm,body.rc-print #enrolForm,body.rc-print #recoveryForm,
  body.rc-print [data-rc-continue],body.rc-print [data-rc-copy],body.rc-print [data-rc-print]{display:none !important;}
  body.rc-print #login{display:block !important;}
  body.rc-print .login-card{box-shadow:none;max-width:none;}
}

/* ============ APP SHELL ============ */
#app{display:none;min-height:100vh;grid-template-columns:248px 1fr;}
#app.live{display:grid;}
@media(max-width:780px){#app.live{grid-template-columns:1fr;}}

.sidebar{background:linear-gradient(180deg,var(--navy) 0%, var(--navy-d) 100%);color:#fff;padding:20px 14px;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
@media(max-width:780px){.sidebar{position:static;height:auto;}}
.sb-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;}
.sb-brand .brand-mark{width:32px;height:32px;border-radius:9px;}
.sb-brand .brand-mark::before{inset:8px 8px auto 8px;height:4px;}
.sb-brand .brand-mark::after{inset:16px 8px 8px 8px;}
.sb-brand .bw{font-weight:800;font-size:16px;letter-spacing:-.01em;}
.sb-role{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);padding:0 8px 14px;}
.nav{display:flex;flex-direction:column;gap:2px;}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:9px;font-size:13.5px;font-weight:500;color:#C8D5EA;text-decoration:none;transition:.12s;}
.nav a .ic{width:17px;text-align:center;opacity:.9;}
.nav a:hover{background:rgba(255,255,255,.07);color:#fff;}
.nav a.active{background:#fff;color:var(--navy);font-weight:700;}
.nav a.active .ic{opacity:1;}
.sb-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);}
.sb-user{display:flex;align-items:center;gap:10px;padding:6px 8px;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--yellow);color:var(--navy-d);font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none;}
.sb-user .u-name{font-size:13px;font-weight:600;line-height:1.2;}
.sb-user .u-ent{font-size:11px;color:#9FC0E8;}
.signout{margin-top:8px;width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#DCE6F5;border-radius:8px;padding:8px;font-size:12.5px;font-weight:600;}
.signout:hover{background:rgba(255,255,255,.14);}

/* ---- topbar + main ---- */
.main-col{display:flex;flex-direction:column;min-width:0;}
.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:15px 30px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:10;}
.topbar h1{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:0;}
.topbar .tb-sub{font-size:12.5px;color:var(--faint);}
.tb-spacer{flex:1;}

main{padding:26px 30px 60px;}
.page-intro{margin-bottom:20px;}
.page-intro p{color:var(--muted);font-size:13.5px;margin:4px 0 0;max-width:70ch;}

/* ---- generic UI atoms ---- */
.cards{display:grid;gap:14px;margin-bottom:22px;}
.c4{grid-template-columns:repeat(4,1fr);}
.c3{grid-template-columns:repeat(3,1fr);}
.c2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1040px){.c4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.c4,.c3,.c2{grid-template-columns:1fr;}}
.stat{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:17px 18px;}
.stat.hero{background:linear-gradient(140deg,var(--navy),var(--navy-d));border-color:var(--navy);color:#fff;}
.stat .s-lab{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:9px;}
.stat.hero .s-lab{color:#9FC0E8;}
.stat .s-val{font-size:25px;font-weight:800;letter-spacing:-.015em;}
.stat .s-val.sm{font-size:20px;}
.stat .s-sub{font-size:12px;color:var(--muted);margin-top:5px;}
.stat.hero .s-sub{color:#C4D2EA;}
.stat .s-sub.up{color:var(--ok);} .stat.hero .s-sub.up{color:#7FE0AC;}

.panel{background:var(--white);border:1px solid var(--line);border-radius:13px;margin-bottom:22px;overflow:hidden;}
.panel-h{display:flex;align-items:center;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line);}
.panel-h h3{font-size:15px;font-weight:700;margin:0;letter-spacing:-.01em;}
.panel-h .ph-note{font-size:12px;color:var(--faint);margin-left:auto;}
.panel-b{padding:18px;}
.panel-b.flush{padding:0;}

table{width:100%;border-collapse:collapse;font-size:13.5px;}
thead th{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);text-align:right;padding:11px 16px;border-bottom:1px solid var(--line);background:#FBFCFE;white-space:nowrap;}
thead th.l{text-align:left;}
tbody td{padding:11px 16px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;}
tbody td.l{text-align:left;}
tbody tr:last-child td{border-bottom:none;}
tr.grp td{background:var(--navy);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.02em;text-align:left;padding:9px 16px;}
tr.sub td{background:var(--navy-t);font-weight:700;border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);}
tr.sub td.l{color:var(--navy);}
.accent{color:var(--navy);font-weight:700;}
.mut{color:var(--muted);}
.name{font-weight:600;}
.sub-id{color:var(--faint);font-size:11.5px;margin-left:6px;}

.tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:20px;}
.tag.ent{background:#EEF1F6;color:#3A4763;}
.tag.ok{background:var(--ok-t);color:var(--ok);}
.tag.warn{background:var(--warn-t);color:var(--warn);}
.tag.pend{background:var(--yellow-t);color:var(--yellow-d);}
.tag.cap{background:var(--navy-t);color:var(--navy);}

.quick{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px;}
@media(max-width:1040px){.quick{grid-template-columns:repeat(2,1fr);}}
@media(max-width:680px){.quick{grid-template-columns:1fr;}}
.ql{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:16px;text-decoration:none;color:inherit;transition:.14s;display:block;}
.ql:hover{border-color:var(--navy);box-shadow:0 6px 20px -12px rgba(0,49,127,.4);transform:translateY(-1px);}
.ql .q-ic{width:38px;height:38px;border-radius:10px;background:var(--navy-t);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:11px;}
.ql h4{margin:0 0 3px;font-size:14.5px;font-weight:700;}
.ql p{margin:0;font-size:12px;color:var(--muted);}

.row-btw{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.btn-sm{border:1px solid var(--line-d);background:#fff;border-radius:8px;padding:7px 13px;font-size:12.5px;font-weight:600;color:var(--navy);transition:.12s;}
.btn-sm:hover{border-color:var(--navy);background:var(--navy-t);}

.kv{display:grid;grid-template-columns:auto 1fr;gap:11px 22px;font-size:13.5px;}
.kv dt{color:var(--faint);font-weight:600;}
.kv dd{margin:0;font-weight:600;text-align:right;}

/* ============ FRONT-END ADDITIONS (not in the reference) ============ */
.live-badge{display:inline-flex;align-items:center;gap:7px;background:var(--ok-t);color:var(--ok);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:20px;}
.live-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);}

.ribbon{background:var(--ok-t);border:1px solid #BFE0CE;color:var(--ok);border-radius:10px;padding:10px 14px;font-size:12.5px;font-weight:600;margin-bottom:20px;display:flex;align-items:center;gap:9px;}
.ribbon .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;}

.auth-note{background:var(--yellow-t);border:1px solid #EDD9B0;color:var(--yellow-d);border-radius:10px;padding:11px 13px;font-size:12.5px;font-weight:600;line-height:1.45;margin-bottom:18px;}

.login-error{background:#FBEEEE;border:1px solid #E7C9C9;color:var(--neg);border-radius:9px;padding:10px 12px;font-size:12.5px;font-weight:600;margin-bottom:14px;}

/* maker–checker screens */
.frm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;align-items:start;}
.inp.tight{margin-bottom:0;}
select.inp{appearance:auto;padding:10px 11px;}
.banner{border-radius:10px;padding:11px 14px;font-size:12.5px;font-weight:600;margin-bottom:16px;}
.banner.ok{background:var(--ok-t);color:var(--ok);border:1px solid #BFE0CE;}
.banner.err{background:#FBEEEE;color:var(--neg);border:1px solid #E7C9C9;}

/* ============ PRINTABLE PAYSLIP ============ */
body.payslip-open{overflow:hidden;}
#payslipOverlay{position:fixed;inset:0;z-index:200;background:rgba(10,20,40,.55);overflow:auto;padding:26px 16px 60px;}
.ps-actions{max-width:760px;margin:0 auto 14px;display:flex;gap:9px;justify-content:flex-end;}
.ps-actions .btn-sm{background:#fff;}
.payslip{max-width:760px;margin:0 auto;background:#fff;border-radius:12px;padding:34px 38px 30px;box-shadow:0 20px 60px -20px rgba(0,0,0,.5);}
.ps-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:3px solid var(--navy);}
/* the payslip is issued BY the employing legal entity, so its name is the
   masthead; allow it to wrap and keep the mark aligned to the first line */
.ps-brand{display:flex;align-items:flex-start;gap:9px;margin-bottom:6px;max-width:44ch;}
.ps-mark{width:26px;height:26px;border-radius:7px;background:var(--yellow);display:inline-block;position:relative;flex:none;}
.ps-mark::before{content:"";position:absolute;inset:7px 7px auto 7px;height:3px;border-radius:2px;background:var(--navy-d);}
.ps-mark::after{content:"";position:absolute;inset:13px 7px 7px 7px;border-radius:2px;background:var(--navy-d);opacity:.55;}
.ps-word{font-weight:800;font-size:16px;line-height:1.3;letter-spacing:-.01em;color:var(--navy);}
.ps-meta{font-size:11.5px;color:var(--muted);margin-top:2px;}
.ps-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);}
.ps-period{font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.01em;}
.ps-who{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:16px 0 18px;border-bottom:1px solid var(--line);}
.ps-lab{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;}
.ps-val{font-size:13.5px;font-weight:600;}
.ps-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:13px;}
.ps-table thead th{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:right;padding:8px 0;border-bottom:1px solid var(--line);}
.ps-table thead th.l{text-align:left;}
.ps-table td{padding:8px 0;border-bottom:1px solid var(--line);text-align:right;}
.ps-table td.l{text-align:left;}
.ps-table tr.ps-sub td{font-weight:700;border-top:1px solid var(--line-d);border-bottom:none;}
.ps-net{display:flex;justify-content:space-between;align-items:center;margin-top:20px;padding:15px 18px;border-radius:10px;background:linear-gradient(140deg,var(--navy),var(--navy-d));color:#fff;font-weight:800;font-size:17px;}
.ps-info thead th{color:var(--faint);}
.ps-info td{color:var(--muted);}
.ps-notes{margin-top:18px;background:var(--yellow-t);border:1px solid #EDD9B0;border-radius:9px;padding:11px 14px;font-size:12px;color:var(--yellow-d);}
.ps-notes b{display:block;margin-bottom:4px;}
.ps-notes ul{margin:0;padding-left:17px;}
.ps-foot{margin-top:20px;padding-top:14px;border-top:1px solid var(--line);font-size:11px;color:var(--faint);line-height:1.5;}

/* ---- payment record (approved pay run, printed for auditors) ----
   Wider than a payslip: it is a schedule of every employee, not one person's
   statement. Landscape at print time so the money columns are not squeezed. */
.pay-record{max-width:1080px;}
.pr-h{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
      margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line);}
.pr-control{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
            border:1.5px solid var(--navy);border-radius:10px;padding:14px 16px;font-size:12.5px;line-height:1.5;}
.pr-control.bad{border-color:var(--neg);background:#FBEEEE;}
.pr-control b{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:3px;}
.pr-control .mut{font-size:11px;}
.pr-note{font-size:11px;color:var(--muted);line-height:1.55;margin:10px 0 0;}
.pr-table{width:100%;border-collapse:collapse;font-size:12px;}
.pr-table th{background:var(--paper);text-align:right;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
             color:var(--faint);padding:7px 8px;border-bottom:1.5px solid var(--navy);white-space:nowrap;}
.pr-table th.l{text-align:left;}
.pr-table td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;}
.pr-table td.l{text-align:left;}
.pr-table tr.pr-total td{border-top:1.5px solid var(--navy);border-bottom:none;font-weight:800;background:var(--paper);}
.pr-sums{margin-top:16px;margin-left:auto;max-width:420px;font-size:12.5px;}
.pr-sums>div{display:flex;justify-content:space-between;gap:20px;padding:6px 0;border-bottom:1px solid var(--line);}
.pr-sums .pr-grand{border-bottom:none;border-top:2px solid var(--navy);margin-top:4px;padding-top:9px;font-size:14.5px;font-weight:800;}

@media print{
  /* print ONLY the payslip sheet */
  body.payslip-open{overflow:visible;}
  body.payslip-open #login,
  body.payslip-open #app,
  #payslipOverlay .no-print{display:none !important;}
  #payslipOverlay{position:static;background:#fff;padding:0;overflow:visible;}
  .payslip{max-width:none;box-shadow:none;border-radius:0;padding:0;}
  .ps-net{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  @page{margin:16mm;}
  /* keep the authorisation box and its rows intact across page breaks —
     an audit document split mid-signature is not evidence of anything */
  .pr-control,.pr-sums{break-inside:avoid;page-break-inside:avoid;
                       -webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .pr-table tr{break-inside:avoid;page-break-inside:avoid;}
  .pr-table thead{display:table-header-group;}   /* repeat headers on every page */
  .pr-h{break-after:avoid;page-break-after:avoid;}
}

.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:80px 20px;color:var(--muted);font-size:13.5px;}
.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--navy-t);border-top-color:var(--navy);animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

tr.total td{background:linear-gradient(140deg,var(--navy),var(--navy-d));color:#fff;font-weight:800;font-size:13.5px;border-top:2px solid var(--navy-d);}
tr.total td.l{color:#fff;}

.errbox{background:#FBEEEE;border:1px solid #E7C9C9;color:var(--neg);border-radius:12px;padding:20px;font-size:13.5px;line-height:1.5;}

.co-card{background:var(--white);border:1px solid var(--line);border-radius:13px;padding:18px;}
.co-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.co-name{font-size:15.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;}

code{background:var(--paper);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font-size:12px;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--navy);}