/* MARK dashboard design system — ported from the "MARK Dashboards" Claude Design canvas.
   Every rule is scoped under .mk (the dashboard shell root) and written with logical
   properties so the same classes work in LTR (en) and RTL (ar). */

.mk{min-height:100vh;background:#F4F6F8;color:#101828;font-family:var(--font-plex),var(--font-plex-ar),system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}
.mk[dir=rtl]{font-family:var(--font-plex-ar),var(--font-plex),system-ui,'Segoe UI',Tahoma,sans-serif}
.mk *{box-sizing:border-box}
.mk .btn-ghost{border-color:transparent;background:transparent}
.mk a.nav-item{text-decoration:none}
.mk a{color:#0E6B63}
.mk a:hover{color:#0A4F49}
.mk .ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mk .ic-sm{width:15px;height:15px}
.mk .nav-item{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;background:transparent;border-radius:8px;font:inherit;font-size:14px;color:#344054;cursor:pointer;text-align:start}
.mk .nav-item:hover{background:#F2F4F7;color:#101828}
.mk .nav-item.on{background:#E3F1EE;color:#0A4F49;font-weight:600}
.mk .nav-item .cnt{margin-inline-start:auto;font-size:12px;font-weight:600;padding:1px 7px;border-radius:999px;background:#F2F4F7;color:#344054}
.mk .nav-item .cnt.alert{background:#FEF0E6;color:#B93815}
.mk .nav-label{font-size:12px;font-weight:600;color:#475467;padding:16px 10px 6px}
.mk .card{background:#fff;border:1px solid #E4E7EC;border-radius:12px;min-width:0}
.mk .card-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid #EEF0F3}
.mk .card-t{margin:0;font-size:15px;font-weight:600;color:#101828}
.mk .card-s{margin:2px 0 0;font-size:13px;color:#475467}
.mk .btn{height:36px;padding:0 14px;border-radius:8px;border:1px solid #D0D5DD;background:#fff;color:#344054;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.mk .btn:hover{background:#F9FAFB;color:#101828}
.mk .btn-primary{background:#0E6B63;border-color:#0E6B63;color:#fff}
.mk .btn-primary:hover{background:#0A5A53;color:#fff}
.mk .btn-sm{height:30px;padding:0 10px;font-size:12.5px}
.mk .pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:500;white-space:nowrap;line-height:20px}
.mk .pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.mk .p-ok{background:#E7F6EE;color:#05603A}
.mk .p-warn{background:#FEF6E4;color:#93370D}
.mk .p-bad{background:#FEEEEC;color:#B42318}
.mk .p-neutral{background:#F2F4F7;color:#344054}
.mk .p-info{background:#EAF1FE;color:#1849A9}
.mk .p-hot{background:#FFEEE3;color:#B93815}
.mk .p-warm{background:#FEF6E4;color:#93370D}
.mk .p-cold{background:#EAF1FE;color:#1849A9}
.mk .tbl-wrap{overflow-x:auto}
.mk .tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.mk .tbl th{text-align:start;font-weight:600;color:#475467;font-size:12.5px;padding:10px 16px;background:#F9FAFB;border-bottom:1px solid #E4E7EC;white-space:nowrap}
.mk .tbl td{padding:12px 16px;border-bottom:1px solid #EEF0F3;color:#344054;white-space:nowrap;vertical-align:middle}
.mk .tbl tr:last-child td{border-bottom:0}
.mk .tbl td.num,.mk .tbl th.num{text-align:end;font-variant-numeric:tabular-nums}
.mk .tbl tr.sel td{background:#F0F8F6}
.mk .tbl tr.clk{cursor:pointer}
.mk .row-hover:hover td{background:#FAFBFC}
.mk .strong{color:#101828;font-weight:600}
.mk .sub{display:block;font-size:12.5px;color:#475467;font-weight:400;margin-top:1px}
.mk .mono{font-family:var(--font-plex-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;direction:ltr;unicode-bidi:isolate}
.mk .ltr{direction:ltr;unicode-bidi:isolate}
.mk .bar{height:6px;background:#EEF0F3;border-radius:99px;overflow:hidden}
.mk .bar span{display:block;height:100%;background:#0E6B63;border-radius:99px}
.mk .segs{display:flex;gap:3px}
.mk .seg{width:14px;height:6px;border-radius:2px;background:#E4E7EC}
.mk .seg.done{background:#0E6B63}
.mk .seg.cur{background:#E88A2E}
.mk .seg.err{background:#B42318}
.mk .kpi-v{font-size:27px;font-weight:600;font-variant-numeric:tabular-nums;color:#101828;margin:6px 0 4px}
.mk .delta-up{color:#05603A;font-weight:600}
.mk .delta-dn{color:#B42318;font-weight:600}
.mk .tab{height:34px;padding:0 12px;border:0;border-radius:7px;background:transparent;font:inherit;font-size:13.5px;font-weight:500;color:#475467;cursor:pointer}
.mk .tab.on{background:#fff;color:#101828;box-shadow:0 1px 2px rgba(16,24,40,.08)}
.mk .field{display:flex;flex-direction:column;gap:6px}
.mk .field label{font-size:13px;font-weight:500;color:#344054}
.mk .input{height:38px;border:1px solid #D0D5DD;border-radius:8px;padding:0 12px;font:inherit;font-size:14px;color:#101828;background:#fff;width:100%}
.mk textarea.input{height:auto;padding:10px 12px;line-height:1.7;resize:vertical}
.mk .input:focus{outline:2px solid #0E6B63;outline-offset:-1px}
.mk .chip{height:32px;padding:0 12px;border-radius:999px;border:1px solid #D0D5DD;background:#fff;font:inherit;font-size:13px;font-weight:500;color:#344054;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.mk .chip.on{background:#101828;border-color:#101828;color:#fff}
.mk .sw{width:40px;height:24px;border-radius:999px;border:0;background:#D0D5DD;position:relative;cursor:pointer;flex:none;padding:0}
.mk .sw::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.2);transition:inset-inline-start .15s}
.mk .sw.on{background:#0E6B63}
.mk .sw.on::after{inset-inline-start:19px}
.mk .sw:disabled{opacity:.5;cursor:not-allowed}
.mk .set-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 20px;border-bottom:1px solid #EEF0F3}
.mk .set-row:last-child{border-bottom:0}
.mk .set-t{font-size:14px;font-weight:500;color:#101828}
.mk .set-d{font-size:12.5px;color:#475467;margin-top:2px;line-height:1.6}
.mk .conv{display:flex;gap:12px;width:100%;padding:14px 16px;border:0;border-bottom:1px solid #EEF0F3;background:#fff;text-align:start;font:inherit;cursor:pointer;align-items:flex-start}
.mk .conv:hover{background:#FAFBFC}
.mk .conv.on{background:#F0F8F6;box-shadow:inset -3px 0 0 #0E6B63}
.mk .av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex:none}
.mk .msg{display:flex;flex-direction:column;max-width:78%;gap:3px}
.mk .msg .bub{padding:9px 13px;font-size:14px;line-height:1.7;border-radius:12px}
.mk .msg .meta{font-size:11.5px;color:#475467}
.mk .m-buyer{align-self:flex-start}
.mk .m-buyer .bub{background:#fff;border:1px solid #E4E7EC;border-end-start-radius:4px;color:#101828}
.mk .m-mark{align-self:flex-end;align-items:flex-end}
.mk .m-mark .bub{background:#DDEFEB;color:#0B2E2A;border-end-end-radius:4px}
.mk .m-admin{align-self:flex-end;align-items:flex-end}
.mk .m-admin .bub{background:#1D2939;color:#fff;border-end-end-radius:4px}
.mk .m-sys{align-self:center;max-width:90%}
.mk .m-sys .bub{background:#F2F4F7;color:#344054;font-size:12.5px;padding:5px 12px;border-radius:999px;text-align:center}
.mk .m-sys .meta{display:none}
.mk .check{display:flex;align-items:center;gap:8px;font-size:13px;color:#344054;padding:5px 0}
.mk .check .ok{color:#05603A}
.mk .check .no{color:#B42318}
.mk .ph{background:#E7ECEB;display:flex;align-items:center;justify-content:center;color:#475467;font-size:12.5px;gap:8px}
.mk .diff{font-family:var(--font-plex-mono),'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;line-height:1.7;padding:14px 16px;background:#F9FAFB;border-radius:8px;border:1px solid #EEF0F3;white-space:pre-wrap;color:#344054;direction:ltr;text-align:left}
.mk .btn.sel{background:#E3F1EE;border-color:#0E6B63;color:#0A4F49}
.mk .tbl tr.clk:hover td{background:#FAFBFC}
.mk .m-agent{align-self:flex-end;align-items:flex-end}
.mk .m-agent .bub{background:#0E6B63;color:#fff;border-end-end-radius:4px}
.mk .fld{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid #EEF0F3}
.mk .fld span:first-child{font-size:12px;color:#475467}
.mk .fld span:last-child{font-size:13.5px;color:#101828;font-weight:500}
.mk .opt{display:flex;gap:12px;align-items:flex-start;width:100%;padding:14px 16px;border:1px solid #D0D5DD;border-radius:10px;background:#fff;font:inherit;text-align:start;cursor:pointer}
.mk .opt.on{border-color:#0E6B63;background:#F0F8F6;box-shadow:0 0 0 1px #0E6B63}
.mk .radio{width:18px;height:18px;border-radius:50%;border:2px solid #98A2B3;flex:none;margin-top:2px;display:flex;align-items:center;justify-content:center}
.mk .opt.on .radio{border-color:#0E6B63}
.mk .opt.on .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:#0E6B63}
.mk .step{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid #EEF0F3}
.mk .step:last-child{border-bottom:0}
.mk .dot-ok{width:22px;height:22px;border-radius:50%;background:#E7F6EE;color:#05603A;display:flex;align-items:center;justify-content:center;flex:none;font-size:12px;font-weight:700}

/* LTR typography differs slightly from RTL in the source designs */
.mk[dir=ltr] .kpi-v{font-size:28px;letter-spacing:-.01em}
.mk[dir=ltr] .nav-label{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase}
.mk[dir=ltr] .tbl th{font-size:12px;letter-spacing:.03em;text-transform:uppercase}
.mk[dir=ltr] .msg .bub{line-height:1.6}
.mk[dir=ltr] .set-d{line-height:1.5}
.mk[dir=ltr] textarea.input{line-height:1.55}
.mk[dir=ltr] .radio{margin-top:1px}
.mk[dir=ltr] .mono{direction:inherit;unicode-bidi:normal}
/* Agency dashboard uses slightly thicker progress bars than the admin console */
.mk-agency .bar{height:8px}
.mk-agency .nav-item .cnt.alert{background:#FFEEE3}