/* ==========================================================================
   Components — shared by the public site and the role portals
   ========================================================================== */

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 15px;border-radius:8px;border:1px solid transparent;
  font-weight:600;font-size:var(--fs-sm);line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s;text-decoration:none!important;user-select:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.55;pointer-events:none}
.btn-primary{background:var(--brand);color:var(--on-brand)} .btn-primary:hover{background:var(--brand-hover)}
.btn-secondary{background:var(--surface);color:var(--text);border-color:var(--line-strong)} .btn-secondary:hover{background:var(--surface-3)}
.btn-ghost{color:var(--text-2)} .btn-ghost:hover{background:var(--surface-3);color:var(--text)}
.btn-soft{background:var(--brand-soft);color:var(--link)} .btn-soft:hover{background:var(--brand-line)}
.btn-danger{background:var(--bad);color:#fff} .btn-danger:hover{filter:brightness(.92)}
.btn-danger-soft{background:var(--bad-soft);color:var(--bad)} .btn-danger-soft:hover{filter:brightness(.96)}
.btn-ok{background:var(--ok);color:#fff} .btn-ok:hover{filter:brightness(.92)}
.btn-accent{background:var(--accent);color:#fff} .btn-accent:hover{filter:brightness(.94)}
.btn-sm{height:32px;padding:0 11px;font-size:var(--fs-xs);border-radius:7px}
.btn-lg{height:48px;padding:0 24px;font-size:var(--fs-base);border-radius:10px}
.btn-icon{width:38px;padding:0} .btn-icon.btn-sm{width:32px}
.btn-block{width:100%}
.link-btn{color:var(--link);font-weight:600;font-size:inherit;display:inline-flex;align-items:center;gap:6px} .link-btn:hover{text-decoration:underline}

/* ---- forms ---- */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.label{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.field .req{color:var(--accent);margin-left:2px}
.field .hint{font-size:var(--fs-xs);color:var(--text-3)}
.input,.select,.textarea{width:100%;height:40px;padding:0 12px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface);color:var(--text);
  font-size:var(--fs-base);transition:border-color .15s,box-shadow .15s}
.textarea{height:auto;min-height:92px;padding:10px 12px;resize:vertical;line-height:1.5}
.select{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368748F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
.input::placeholder,.textarea::placeholder{color:var(--text-3);opacity:.85}
.input:hover,.select:hover,.textarea:hover{border-color:var(--text-3)}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 28%,transparent)}
.input[readonly]{background:var(--surface-2);color:var(--text-2)}
.input-sm,.select-sm{height:34px;font-size:var(--fs-sm)}
.field.has-error .input,.field.has-error .select,.field.has-error .textarea{border-color:var(--bad)}
.field-error{font-size:var(--fs-xs);color:var(--bad);font-weight:550;display:flex;align-items:center;gap:5px}
.input-group{position:relative;display:flex;align-items:center}
.input-group>.icon{position:absolute;left:12px;color:var(--text-3);pointer-events:none}
.input-group>.input{padding-left:38px}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.fg-3{grid-template-columns:repeat(3,minmax(0,1fr))} .fg-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.fg .full{grid-column:1/-1} .fg .s2{grid-column:span 2}
@media (max-width:760px){.fg,.fg-3,.fg-4{grid-template-columns:minmax(0,1fr)} .fg .s2{grid-column:auto}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:var(--fs-sm);cursor:pointer;color:var(--text-2)}
.check input{appearance:none;width:18px;height:18px;margin:1px 0 0;border:1.5px solid var(--line-strong);border-radius:5px;background:var(--surface);flex-shrink:0;display:grid;place-content:center;cursor:pointer;transition:.12s}
.check input:checked{background:var(--brand);border-color:var(--brand)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input[type=radio]{border-radius:50%} .check input[type=radio]:checked::after{width:7px;height:7px;border:0;background:#fff;border-radius:50%;transform:none}
.switch{display:inline-block;position:relative;width:38px;height:22px;flex-shrink:0}
.switch input{appearance:none;position:absolute;inset:0;margin:0;border-radius:99px;background:var(--line-strong);cursor:pointer;transition:.15s}
.switch input:checked{background:var(--ok)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s;pointer-events:none;box-shadow:0 1px 2px rgba(0,0,0,.3)}
.switch:has(input:checked)::after{transform:translateX(16px)}
.seg{display:inline-flex;padding:3px;background:var(--surface-3);border-radius:10px;gap:2px}
.seg button{height:32px;padding:0 14px;border-radius:8px;font-size:var(--fs-sm);font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:7px}
.seg button.on{background:var(--surface);color:var(--brand-strong);box-shadow:0 1px 3px rgba(13,26,74,.14)}
.dropzone{border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);padding:18px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:.15s}
.dropzone:hover,.dropzone.drag{border-color:var(--brand);background:var(--brand-soft)}
.dropzone input{display:none}

/* ---- cards ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);min-height:54px}
.card-h h3{font-size:.95rem;font-weight:650;color:var(--text);letter-spacing:0}
.card-h .sub{font-size:var(--fs-xs);color:var(--text-3);margin-top:1px}
.card-b{padding:18px} .card-b.flush{padding:0} .card-f{padding:12px 18px;border-top:1px solid var(--line);background:var(--surface-2);border-radius:0 0 12px 12px}
.card.pad{padding:18px}
.tinted{background:var(--surface-2)}

/* ---- ledger KPI strip ---- */
.ledger-w{container-type:inline-size}
@container (min-width:1000px){.ledger{grid-template-columns:repeat(var(--n),minmax(0,1fr))!important}}
.ledger{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-card)}
.ledger .cell{background:var(--surface);padding:15px 18px 14px;display:flex;flex-direction:column;gap:2px;position:relative;min-width:0}
.ledger .k-label{font-size:var(--fs-xs);color:var(--text-3);font-weight:600;display:flex;align-items:center;gap:6px}
.ledger .k-value{font-family:var(--font-serif);font-size:1.85rem;font-weight:600;color:var(--brand-strong);line-height:1.15;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.ledger .k-sub{overflow-wrap:anywhere;font-size:var(--fs-xs);color:var(--text-3);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.ledger .cell.is-alert::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;background:var(--accent);border-radius:0 3px 3px 0}
.delta{display:inline-flex;align-items:center;gap:3px;font-weight:650} .delta.up{color:var(--ok)} .delta.down{color:var(--bad)}

/* ---- pills / badges ---- */
.pill{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;font-size:.72rem;font-weight:650;white-space:nowrap;background:var(--surface-3);color:var(--text-2)}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.9}
.pill.nodot::before{display:none}
.pill.ok{background:var(--ok-soft);color:var(--ok)} .pill.warn{background:var(--warn-soft);color:var(--warn)} .pill.bad{background:var(--bad-soft);color:var(--bad)}
.pill.info{background:var(--info-soft);color:var(--info)} .pill.brand{background:var(--brand-soft);color:var(--link)} .pill.violet{background:var(--violet-soft);color:var(--violet)}
.pill.teal{background:var(--teal-soft);color:var(--teal)} .pill.accent{background:var(--accent-soft);color:var(--accent)}
.count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--accent);color:#fff;font-size:.68rem;font-weight:700;line-height:1}
.tag{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:5px;background:var(--surface-3);color:var(--text-2);font-size:.72rem;font-weight:600}
.avatar{display:inline-grid;place-items:center;border-radius:50%;background:var(--brand-soft);color:var(--link);font-weight:700;flex-shrink:0;width:34px;height:34px;font-size:.78rem;letter-spacing:.02em}
.avatar.lg{width:52px;height:52px;font-size:1.05rem} .avatar.sm{width:26px;height:26px;font-size:.66rem}

/* ---- tables ---- */
.table-wrap{overflow:auto;max-width:100%}
table.t{width:100%;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
table.t th{position:sticky;top:0;background:var(--surface-2);color:var(--text-3);font-weight:650;font-size:var(--fs-xs);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
table.t th.sortable{cursor:pointer;user-select:none} table.t th.sortable:hover{color:var(--text)}
table.t th .sort{opacity:.45;margin-left:4px;vertical-align:-2px} table.t th.sorted .sort{opacity:1;color:var(--link)}
table.t td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
table.t tbody tr:last-child td{border-bottom:0}
table.t tbody tr.clickable{cursor:pointer} table.t tbody tr.clickable:hover td{background:var(--surface-2)}
table.t td.r,table.t th.r{text-align:right} table.t td.c,table.t th.c{text-align:center}
table.t.dense td{padding:8px 14px}
.cell-title{font-weight:600;color:var(--text);line-height:1.3} .cell-sub{font-size:var(--fs-xs);color:var(--text-3);line-height:1.3;margin-top:1px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line)}
.toolbar .input-group{flex:1 1 220px;max-width:340px} .toolbar .select{width:auto;min-width:140px;max-width:220px}
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-3);flex-wrap:wrap}
.pager .pages{display:flex;gap:4px} .pager .pg{min-width:32px;height:32px;padding:0 8px;border-radius:7px;font-weight:600;color:var(--text-2);display:grid;place-items:center} .pager .pg:hover{background:var(--surface-3)} .pager .pg.on{background:var(--brand);color:#fff} .pager .pg[disabled]{opacity:.4;pointer-events:none}
.bar{height:7px;border-radius:99px;background:var(--surface-3);overflow:hidden;min-width:60px} .bar>i{display:block;height:100%;border-radius:99px;background:var(--brand)} .bar.ok>i{background:var(--ok)} .bar.warn>i{background:var(--warn)} .bar.bad>i{background:var(--bad)}
.bar-stack{display:flex;height:9px;border-radius:99px;overflow:hidden;background:var(--surface-3);gap:2px} .bar-stack>i{display:block;height:100%}
.ring{--p:0;--sz:64px;--w:7px;width:var(--sz);height:var(--sz);border-radius:50%;background:conic-gradient(var(--ring-c,var(--brand)) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center;position:relative;flex-shrink:0}
.ring::before{content:"";position:absolute;inset:var(--w);background:var(--surface);border-radius:50%}
.ring span{position:relative;font-weight:700;font-size:.8rem;color:var(--brand-strong);font-variant-numeric:tabular-nums}

/* ---- tabs ---- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs button{padding:11px 14px;font-size:var(--fs-sm);font-weight:600;color:var(--text-3);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:7px;align-items:center}
.tabs button:hover{color:var(--text)} .tabs button.on{color:var(--brand-strong);border-color:var(--accent)}
.tabs .count{background:var(--surface-3);color:var(--text-2)} .tabs button.on .count{background:var(--accent);color:#fff}

/* ---- workflow stepper (horizontal) ---- */
.flow{display:flex;align-items:flex-start;width:100%}
.flow .st{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:7px;position:relative;min-width:0;padding:0 4px}
.flow .st::before{content:"";position:absolute;top:15px;left:-50%;width:100%;height:2px;background:var(--line-strong);z-index:0}
.flow .st:first-child::before{display:none}
.flow .st.done::before,.flow .st.now::before{background:var(--ok)}
.flow .dot{width:32px;height:32px;border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);display:grid;place-items:center;color:var(--text-3);position:relative;z-index:1;font-size:.75rem;font-weight:700}
.flow .st.done .dot{background:var(--ok);border-color:var(--ok);color:#fff}
.flow .st.now .dot{background:var(--surface);border-color:var(--brand);color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 18%,transparent)}
.flow .st.bad .dot{background:var(--bad);border-color:var(--bad);color:#fff}
.flow .st.bad::before{background:var(--ok)}
.flow .lbl{font-size:var(--fs-xs);font-weight:600;color:var(--text-2);line-height:1.25} .flow .st.now .lbl{color:var(--brand-strong)} .flow .st .when{font-size:.68rem;color:var(--text-3);font-weight:500}
@media (max-width:720px){.flow .lbl{font-size:.66rem}}
.timeline{position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .ev{position:relative;padding:0 0 18px} .timeline .ev:last-child{padding-bottom:0}
.timeline .ev::before{content:"";position:absolute;left:-23px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2.5px solid var(--brand)}
.timeline .ev.ok::before{border-color:var(--ok)} .timeline .ev.bad::before{border-color:var(--bad)} .timeline .ev.warn::before{border-color:var(--warn)} .timeline .ev.muted::before{border-color:var(--line-strong)}
.timeline .ev .h{font-weight:650;font-size:var(--fs-sm)} .timeline .ev .m{font-size:var(--fs-xs);color:var(--text-3)} .timeline .ev .r{margin-top:6px;padding:8px 11px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line);font-size:var(--fs-sm);color:var(--text-2)}

/* ---- lists ---- */
.list>li{display:flex;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line)} .list>li:last-child{border-bottom:0}
.list.clickable>li{cursor:pointer} .list.clickable>li:hover{background:var(--surface-2)}
.ico-box{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;background:var(--brand-soft);color:var(--link);flex-shrink:0}
.ico-box.ok{background:var(--ok-soft);color:var(--ok)} .ico-box.warn{background:var(--warn-soft);color:var(--warn)} .ico-box.bad{background:var(--bad-soft);color:var(--bad)}
.ico-box.info{background:var(--info-soft);color:var(--info)} .ico-box.violet{background:var(--violet-soft);color:var(--violet)} .ico-box.teal{background:var(--teal-soft);color:var(--teal)} .ico-box.accent{background:var(--accent-soft);color:var(--accent)}
.ico-box.sm{width:30px;height:30px;border-radius:8px}
.datebox{width:46px;flex-shrink:0;text-align:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface)}
.datebox b{display:block;font-family:var(--font-serif);font-size:1.15rem;line-height:1.25;color:var(--brand-strong);padding-top:3px}
.datebox span{display:block;font-size:.62rem;font-weight:700;color:#fff;background:var(--accent);padding:1px 0;letter-spacing:.04em;text-transform:uppercase}
.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:9px 14px;font-size:var(--fs-sm)} .kv dt{color:var(--text-3);font-weight:550} .kv dd{color:var(--text);font-weight:550;word-break:break-word}
@media (max-width:560px){.kv{grid-template-columns:110px minmax(0,1fr)}}
.callout{display:flex;gap:12px;padding:12px 14px;border-radius:10px;font-size:var(--fs-sm);background:var(--info-soft);color:var(--text);border:1px solid color-mix(in srgb,var(--info) 25%,transparent)}
.callout>.icon{color:var(--info);margin-top:2px} .callout.warn{background:var(--warn-soft);border-color:color-mix(in srgb,var(--warn) 30%,transparent)} .callout.warn>.icon{color:var(--warn)}
.callout.bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 30%,transparent)} .callout.bad>.icon{color:var(--bad)}
.callout.ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)} .callout.ok>.icon{color:var(--ok)}
.chips{display:flex;flex-wrap:wrap;gap:8px} .chip{height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line-strong);background:var(--surface);font-size:var(--fs-sm);font-weight:600;color:var(--text-2);display:inline-flex;align-items:center;gap:6px}
.chip:hover{border-color:var(--brand);color:var(--brand-strong)} .chip.on{background:var(--brand);border-color:var(--brand);color:#fff}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:44px 20px;color:var(--text-3)}
.empty .ico-box{width:52px;height:52px;border-radius:14px;margin-bottom:6px} .empty h4{font-size:var(--fs-md);color:var(--text)} .empty p{max-width:44ch;font-size:var(--fs-sm)}
.skel{background:linear-gradient(90deg,var(--surface-3) 25%,var(--surface-2) 50%,var(--surface-3) 75%);background-size:200% 100%;animation:sk 1.3s infinite linear;border-radius:6px;height:14px}
@keyframes sk{to{background-position:-200% 0}}
.spin{animation:spin .9s linear infinite} @keyframes spin{to{transform:rotate(360deg)}}

/* ---- overlays ---- */
.overlay{position:fixed;inset:0;background:var(--overlay);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .16s ease-out;backdrop-filter:blur(2px)}
@keyframes fade{from{opacity:0}} @keyframes rise{from{opacity:0;transform:translateY(10px) scale(.985)}} @keyframes slide{from{transform:translateX(40px);opacity:0}}
.modal{background:var(--surface);border-radius:16px;box-shadow:var(--shadow-pop);width:100%;max-width:560px;max-height:calc(100vh - 40px);display:flex;flex-direction:column;animation:rise .2s ease-out;border:1px solid var(--line)}
.modal.lg{max-width:760px} .modal.xl{max-width:980px} .modal.sm{max-width:440px}
.modal-h{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:18px 22px 14px;border-bottom:1px solid var(--line)} .modal-h h3{font-size:1.08rem;color:var(--text)} .modal-h p{font-size:var(--fs-sm);color:var(--text-3);margin-top:2px}
.modal-b{padding:20px 22px;overflow:auto;flex:1} .modal-f{padding:14px 22px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px;background:var(--surface-2);border-radius:0 0 16px 16px;flex-wrap:wrap}
.overlay.drawer-o{justify-content:flex-end;padding:0;align-items:stretch}
.drawer{background:var(--surface);width:100%;max-width:760px;height:100%;display:flex;flex-direction:column;box-shadow:var(--shadow-pop);animation:slide .22s ease-out;border-left:1px solid var(--line)}
.drawer.xl{max-width:920px} .drawer .modal-b{padding:0} .drawer .pad{padding:20px 24px}
.toasts{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:400;pointer-events:none}
.toast{pointer-events:auto;display:flex;gap:11px;align-items:flex-start;min-width:280px;max-width:400px;background:var(--brand-strong);color:#fff;padding:12px 16px;border-radius:11px;box-shadow:var(--shadow-pop);font-size:var(--fs-sm);animation:rise .22s ease-out}
:root[data-theme="dark"] .toast{background:var(--surface-3);border:1px solid var(--line-strong);color:var(--text)}
.toast .icon{margin-top:1px} .toast.ok .icon{color:#5EE0B0} .toast.bad .icon{color:#FF9A93} .toast.warn .icon{color:#FFD07A} .toast b{display:block;font-weight:650}
.menu{position:absolute;z-index:150;min-width:220px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;animation:rise .15s ease-out}
.menu .mi{display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:8px;font-size:var(--fs-sm);font-weight:550;color:var(--text);text-align:left} .menu .mi:hover{background:var(--surface-3);text-decoration:none}
.menu .mi .icon{color:var(--text-3)} .menu .sep{height:1px;background:var(--line);margin:6px 4px} .menu .mh{padding:8px 11px 4px;font-size:var(--fs-xs);font-weight:700;color:var(--text-3)}

/* ---- certificate ---- */
.cert{position:relative;background:var(--surface);color:#131A33;border-radius:6px;padding:14px;aspect-ratio:1.414/1;width:100%;max-width:880px;margin-inline:auto;box-shadow:var(--shadow-pop);
  background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(27,58,158,.055) 27px 28px);color-scheme:light}
.cert,.cert *{--text:#131A33;--text-2:#434E6B;--text-3:#68748F;--brand-strong:#0E1E5B;--brand:#1B3A9E;--line:#E1E6F2}
.cert{background-color:#FCFDFF}
.cert .frame{position:absolute;inset:14px;border:2px solid #1B3A9E;border-radius:3px}
.cert .frame::before{content:"";position:absolute;inset:5px;border:1px solid #9EB2EC;border-radius:2px}
.cert .margin{position:absolute;left:11.5%;top:14px;bottom:14px;width:2px;background:#D23F36;opacity:.55}
.cert .inner{position:absolute;inset:14px;padding:5% 6% 4% 14%;display:flex;flex-direction:column;gap:2.2%}
.cert .head{display:flex;align-items:center;gap:14px} .cert .head .org{font-family:var(--font-serif);font-weight:650;color:#0E1E5B;font-size:clamp(.7rem,1.7cqw,1.15rem);line-height:1.15}
.cert{container-type:inline-size}
.cert .head .org small{display:block;font-family:var(--font-sans);font-weight:600;font-size:.6em;color:#68748F;letter-spacing:.02em;margin-top:2px}
.cert h2{font-family:var(--font-serif);font-weight:600;font-size:clamp(1.05rem,4cqw,2.2rem);color:#0E1E5B;line-height:1.1;letter-spacing:-.015em}
.cert .body{font-size:clamp(.62rem,1.55cqw,.98rem);line-height:1.65;color:#2A3554;max-width:60ch} .cert .body b{color:#0E1E5B;font-weight:650}
.cert .school{font-family:var(--font-serif);font-size:clamp(.95rem,3cqw,1.7rem);font-weight:600;color:#0E1E5B;line-height:1.2;border-bottom:1.5px solid #C6D3F5;padding-bottom:4px;display:inline-block}
.cert .meta{display:grid;grid-template-columns:repeat(2,auto);gap:4px 30px;max-width:56%;font-size:clamp(.55rem,1.3cqw,.8rem);margin-top:auto;justify-content:start}
.cert .meta span{color:#68748F;display:block;font-weight:550} .cert .meta b{font-weight:650;color:#131A33;font-variant-numeric:tabular-nums}
.cert .qr{position:absolute;right:6%;bottom:8%;width:15.5%;text-align:center;font-size:clamp(.45rem,1cqw,.62rem);color:#68748F;font-weight:600}
.cert .qr .box{background:#fff;padding:5%;border:1px solid #C6D3F5;border-radius:6px} .cert .qr svg{width:100%;height:auto}
.cert .seal{position:absolute;right:8%;top:9%;width:13%;aspect-ratio:1;transform:rotate(-8deg)}
.cert .sign{position:absolute;right:26%;bottom:9%;text-align:center;font-size:clamp(.5rem,1.15cqw,.72rem);color:#434E6B;font-weight:600;width:19%}
.cert .sign svg{width:100%;height:auto;margin-bottom:2px} .cert .sign div{border-top:1px solid #9EB2EC;padding-top:3px}
.cert .wm{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;font-family:var(--font-serif);font-weight:700;font-size:clamp(2rem,10cqw,6.2rem);letter-spacing:.08em;color:rgba(210,63,54,.075);transform:rotate(-18deg);white-space:nowrap}
.cert .disc{font-size:clamp(.5rem,1.15cqw,.72rem);color:#9A2A24;font-weight:600;border-left:3px solid #D23F36;padding-left:8px;max-width:58ch;line-height:1.45}
.stamp{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:2px solid var(--ok);color:var(--ok);border-radius:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;transform:rotate(-2deg);position:relative}
.stamp::after{content:"";position:absolute;inset:2px;border:1px solid currentColor;border-radius:5px;opacity:.5}
.stamp.bad{border-color:var(--bad);color:var(--bad)} .stamp.warn{border-color:var(--warn);color:var(--warn)}
@media print{body *{visibility:hidden} .print-area,.print-area *{visibility:visible} .print-area{position:absolute;left:0;top:0;width:100%} .cert{box-shadow:none;max-width:none;border-radius:0} @page{size:A4 landscape;margin:8mm}}

/* selectable chips (checkbox inside) */
label.chip{cursor:pointer;user-select:none}
label.chip:has(input:checked){background:var(--brand);border-color:var(--brand);color:#fff}
label.chip:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.select[multiple]{height:auto;padding:6px;background-image:none}
.select[multiple] option{padding:6px 8px;border-radius:5px}