:root{
  --bg:#fff;--surface:#fff;--sunk:#f3f4f7;--ink:#1E1A14;--muted:#5c5c72;--line:#e4e4ec;
  --accent:#8A6A2F;--on-accent:#fff;--good:#0e9c66;--warn:#b97300;--bad:#d23a5e;--green:#B8893A;--rose:#C9A24A;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans","Noto Sans Arabic",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:16px;line-height:1.55}
main{max-width:1180px;margin:0 auto;padding:0 16px 64px}
a{color:var(--accent)}
h1{font-size:clamp(26px,4vw,40px);line-height:1.15;margin:.4em 0 .2em;letter-spacing:-.015em}
h2{font-size:20px;margin:0 0 10px}
h3{font-size:15px;margin:14px 0 6px;color:var(--muted)}
.lead{color:var(--muted);font-size:18px;max-width:62ch}
.note{color:var(--muted);font-size:14px}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;max-width:1180px;margin:0 auto;padding:14px 16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.03em;text-decoration:none;color:var(--ink);margin-inline-end:auto}
.logo .mark{width:30px;height:30px;background:url(/static/brand/pl-mark.svg) center/contain no-repeat}
.top nav{display:flex;gap:4px;flex-wrap:wrap}
.top nav a{padding:7px 12px;border-radius:999px;color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.top nav a:hover{background:var(--sunk);color:var(--ink)}
.langs{display:flex;gap:8px;font-size:14px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;margin:14px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;border-radius:12px;border:1px solid var(--line);background:var(--sunk);color:var(--ink);font:inherit;font-weight:700;cursor:pointer;text-decoration:none}
.btn.main{background:var(--accent);border-color:transparent;color:var(--on-accent)}
.btn.sm{padding:5px 10px;font-size:13px;border-radius:9px}
.btn.danger{color:var(--bad)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.field{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
.field input,.field select,.field textarea,input.in,select.in,textarea.in{font:inherit;font-weight:400;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:9px 11px;min-width:0;width:100%}
.field textarea,textarea.in{min-height:90px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid .full{grid-column:1/-1}
@media (max-width:640px){.form-grid{grid-template-columns:1fr}}
.row{display:flex;gap:8px;align-items:center}
.hp{position:absolute;left:-9999px;width:1px;height:1px}
.ok{background:color-mix(in srgb,var(--good) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--good) 35%,var(--line));padding:10px 12px;border-radius:12px}
.err{background:color-mix(in srgb,var(--bad) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--bad) 35%,var(--line));padding:10px 12px;border-radius:12px}
.form-msg:empty{display:none}
.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em}
.badge.warn{background:color-mix(in srgb,var(--warn) 18%,transparent);color:var(--warn)}
.pill{display:inline-block;padding:3px 10px;border-radius:999px;font-size:12.5px;font-weight:700;background:var(--sunk);color:var(--muted)}
.pill.confirmed,.pill.paid,.pill.won,.pill.approved,.pill.verified,.pill.updated,.pill.done{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.pill.pending,.pill.partial,.pill.new,.pill.open,.pill.in_progress{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.pill.cancelled,.pill.unpaid,.pill.lost,.pill.error,.pill.paused,.pill.declined,.pill.failed{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.lines{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.lines li{display:flex;justify-content:space-between;gap:12px}
.lines li.struck{text-decoration:line-through;color:var(--muted)}
.total{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin:12px 0 0;padding-top:10px;font-size:18px}
.total.sub{border:0;margin:0;padding-top:4px;font-size:15px;color:var(--muted)}
details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:8px 0}
summary{cursor:pointer;font-weight:700}

/* Planner */
.planner{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width:860px){.planner{grid-template-columns:1fr}}
.pick{position:sticky;top:12px;max-height:calc(100vh - 24px);display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
@media (max-width:860px){.pick{position:static;max-height:none}}
.pick .list{overflow:auto;display:grid;gap:8px;min-height:0;padding:2px}
.exp{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px}
.exp b{display:block;line-height:1.25}
.exp small{color:var(--muted)}
.days{display:grid;gap:12px}
.dayc{border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface)}
.dayc.active{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.dayh{display:flex;gap:10px;align-items:end;flex-wrap:wrap;margin-bottom:8px}
.dayh b{font-size:18px;margin-inline-end:auto}
.item{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-top:1px dashed var(--line)}
.item input[type=time]{width:110px}
.summary{position:sticky;bottom:10px;background:var(--ink);color:var(--bg);border-radius:16px;padding:12px 16px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px}
.summary b{font-size:20px}
.summary .grow{flex:1}

/* Tables (admin, portal) */
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:start;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--line);padding:8px 6px}
.tbl td{border-bottom:1px solid var(--line);padding:8px 6px;vertical-align:top}
.tbl tr.click{cursor:pointer}.tbl tr.click:hover td{background:var(--sunk)}
.tblwrap{overflow-x:auto}

/* Invoice */
.invoice{background:#fff;color:#14141f;max-width:820px;margin:24px auto;padding:36px;border:1px solid #e6e6ee;border-radius:14px}
.invoice header{display:flex;justify-content:space-between;gap:20px;border-bottom:2px solid #14141f;padding-bottom:14px;margin-bottom:16px}
.invoice .brand{font-size:22px}
.invoice p{margin:2px 0}
.invoice .r{text-align:end}
.invoice table{width:100%;border-collapse:collapse;margin:16px 0}
.invoice th,.invoice td{border-bottom:1px solid #e6e6ee;padding:8px 4px;text-align:start}
.invoice th.r,.invoice td.r{text-align:end}
.invoice .tots{margin-inline-start:auto;width:min(320px,100%)}
.invoice .tots div{display:flex;justify-content:space-between;padding:4px 0}
@media print{.noprint,.top{display:none}.invoice{border:0;margin:0}}

/* Admin */
.admin{display:grid;grid-template-columns:220px minmax(0,1fr);min-height:100vh}
.admin .side{background:var(--sunk);border-inline-end:1px solid var(--line);padding:14px;display:flex;flex-direction:column;gap:2px}
.admin .side a{padding:8px 10px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px;display:flex;justify-content:space-between}
.admin .side a[aria-current]{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.admin .side .count{background:var(--bad);color:#fff;border-radius:999px;font-size:12px;padding:0 7px}
.admin .side .who{margin-top:auto;font-size:13px;color:var(--muted);padding:8px 10px}
.admin .content{padding:20px 24px;min-width:0}
.admin .bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.admin .bar h1{margin:0 auto 0 0;font-size:26px}
.admin .kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
.admin .kpi{border:1px solid var(--line);border-radius:14px;padding:12px}
.admin .kpi b{display:block;font-size:26px}
.admin .kpi span{color:var(--muted);font-size:13px}
.pad{padding:24px}
.login{max-width:380px;margin:12vh auto;padding:24px}
.toast{position:fixed;bottom:16px;inset-inline-end:16px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:12px;z-index:9;max-width:360px}
.toast.bad{background:var(--bad);color:#fff}
@media (max-width:760px){.admin{grid-template-columns:1fr}.admin .side{flex-direction:row;flex-wrap:wrap}.admin .side .who{margin:0}}
.narrow{width:80px}
main:has(> .admin){max-width:none;padding:0}
.admin .bar .in,.admin form.row .in{width:auto}
.admin .side .who a{display:inline;padding:0}

/* two-step sign-in */
img.qr { display: block; width: 220px; height: 220px; margin: 8px 0 12px; border: 1px solid #e3e3ea; border-radius: 12px; background: #fff; }
pre.codes { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 16px; line-height: 1.7; background: #f6f6f9; border: 1px solid #e3e3ea; border-radius: 10px; padding: 12px 16px; columns: 2; max-width: 360px; }
.verify { max-width: 440px; margin: 40px auto; }
.verify input[name=code] { font-size: 22px; letter-spacing: 6px; text-align: center; }
/* sign-in screens (login, code, forgot, reset) sit alone in the middle, not in the menu column */
.admin > .login { grid-column: 1 / -1; width: 100%; max-width: 420px; margin: 8vh auto; align-self: start; }

/* Passlabb Pro (DMC partner product) logo on the partner sign-in forms */
.probrand{display:flex;align-items:center;gap:10px;margin:0 0 14px}.probrand img{border-radius:12px;flex:none}.probrand span{display:flex;flex-direction:column;gap:4px}.probrand b{font-size:22px;letter-spacing:-.04em;line-height:1}.probrand b i{font-style:normal;color:#0E8A5B}.probrand small{font-size:9px;letter-spacing:.26em;text-transform:uppercase;color:#6A6A80;font-weight:600}
.logo .lb{color:#B8893A;font-weight:inherit}
.logo .mark{display:none!important}/* V2.7: the word logo only (the pl mark stays as the favicon) */
/* ===== V2.8 sign-in design: travellers (ivory & gold) and employees (black & gold Ops Hub) ===== */
body.auth-page{background:#FFFCF6}
body.auth-page .admin{min-height:100vh;display:block!important;padding:0!important;margin:0!important;max-width:none!important}
.auth{display:grid;grid-template-columns:1.05fr 1fr;min-height:100vh;font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif}
.auth .ico{display:grid;place-items:center}.auth .ico svg{width:18px;height:18px}
.auth-vis{position:relative;overflow:hidden;padding:48px 56px;display:flex;flex-direction:column}
.auth-vis>*{position:relative;z-index:1}
.aw-w{font:800 30px/1 "Inter Tight","Helvetica Neue",Arial,sans-serif;letter-spacing:-.045em}
.aw-w b{background:linear-gradient(100deg,#B8893A,#E2BE73 55%,#B08232);-webkit-background-clip:text;background-clip:text;color:transparent}
.aw-t{font:700 10px "Manrope","Segoe UI",sans-serif;letter-spacing:.34em;text-transform:uppercase;margin-top:6px;display:flex;align-items:center;gap:8px}.aw-t::before{content:"";width:18px;height:1px;background:currentColor}
.auth-vis h2{margin:auto 0 0}
.auth-vis .lede{max-width:450px;margin:16px 0 26px;font-size:17px}
.auth-side{display:grid;place-items:center;padding:40px 24px;max-width:none;margin:0}
.auth-card{width:min(460px,100%);margin:0;border:0;background:transparent;padding:0;box-shadow:none}
.auth-card h1{margin:8px 0 6px}
.auth-card .field{margin:0 0 14px;font:700 12.5px "Manrope","Segoe UI",sans-serif;gap:6px}
.auth-card .field input{height:50px;border-radius:14px;padding:0 16px;font:500 15.5px "Source Sans 3","Segoe UI",sans-serif}
.auth-card .btn.main{width:100%;height:52px;border-radius:999px;font:800 15.5px "Manrope","Segoe UI",sans-serif;border:0}
.auth-card p{margin:0 0 12px}
.auth-card .probrand{display:none}
.auth-kick{font:700 11px "Manrope","Segoe UI",sans-serif;letter-spacing:.24em;text-transform:uppercase;display:flex;align-items:center;gap:8px}
.auth-kick .ico svg{width:14px;height:14px}
.auth-card .note{font-size:14px}
.auth-card label.check,.auth-card label[style*="display:flex"]{font:500 13.5px "Source Sans 3",sans-serif}
.auth-or{display:flex;align-items:center;gap:12px;font-size:12.5px;margin:18px 0}.auth-or::before,.auth-or::after{content:"";flex:1;height:1px;background:currentColor;opacity:.25}
.auth-soft{width:100%;height:52px;border-radius:999px;font:700 15px "Manrope",sans-serif;text-decoration:none}
.auth-foot{font-size:12.5px!important;margin-top:16px!important}
.dom{display:flex;align-items:center;border-radius:14px;height:50px;overflow:hidden}
.dom input{flex:1;border:0!important;height:48px!important;background:transparent!important;box-shadow:none!important;min-width:0}
.dom span{padding:0 14px;height:100%;display:grid;place-items:center;font:700 14px "Manrope",sans-serif;white-space:nowrap}
/* travellers */
.auth-t .auth-vis{color:#2A2013;background:radial-gradient(700px 500px at 20% 10%,rgba(246,227,161,.55),transparent 60%),linear-gradient(160deg,#F7EEDB,#EAD7AE 55%,#D9BC7E)}
.auth-t .auth-vis::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23B8893A' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M40 4l10 26 26 10-26 10-10 26-10-26L4 40l26-10z'/%3E%3Ccircle cx='40' cy='40' r='9'/%3E%3C/g%3E%3C/svg%3E");-webkit-mask:linear-gradient(200deg,#000 10%,transparent 70%);mask:linear-gradient(200deg,#000 10%,transparent 70%)}
.auth-t .aw-w{color:#1E1810}.auth-t .aw-t{color:#8A6A2F}
.auth-t .auth-vis h2{font:500 54px/1.02 "Cormorant Garamond",Georgia,serif;color:#1E1810}.auth-t .auth-vis h2 i{color:#9A7428}
.auth-t .lede{color:#4E4636}
.auth-t .perks{display:grid;gap:10px;max-width:440px}
.auth-t .perk{display:flex;gap:12px;align-items:center;background:rgba(255,252,245,.72);border:1px solid rgba(184,137,58,.25);border-radius:16px;padding:12px 14px}
.auth-t .perk .ico{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,#F6E3A1,#C9A24A);color:#1B140A;flex:none}
.auth-t .perk b{display:block;font:700 14.5px "Manrope",sans-serif;color:#1E1810}.auth-t .perk span{font-size:13px;color:#6A5E48}
.auth-t .auth-side{background:#FFFCF6}
.auth-t .auth-kick{color:#8A6A2F}
.auth-t .auth-card h1{font:500 40px/1.05 "Cormorant Garamond",Georgia,serif;color:#1E1810;letter-spacing:0}
.auth-t .auth-card p,.auth-t .auth-card .note{color:#6A5E48}
.auth-t .auth-card .field{color:#4E4636}
.auth-t .auth-card .field input{border:1px solid #E2D3B2;background:#fff;color:#1E1810}
.auth-t .auth-card .field input:focus{outline:none;border-color:#B8893A;box-shadow:0 0 0 4px rgba(226,190,115,.25)}
.auth-t .auth-card .btn.main{background:linear-gradient(105deg,#F6E3A1,#E2C27A 50%,#C9A24A);color:#1B140A;box-shadow:0 14px 30px -14px rgba(184,137,58,.9)}
.auth-t .auth-card a{color:#7A5A24;font-weight:700}
.auth-t .auth-soft{background:#fff;border:1px solid #E2D3B2;color:#1E1810!important}
.auth-t .auth-or{color:#9A8E78}
/* employees */
body.auth-page:has(.auth-e){background:#0E0C0A}
.auth-e{color:#F2EEE4}
.auth-e .auth-vis{background:radial-gradient(600px 420px at 85% -5%,rgba(184,137,58,.30),transparent 65%),linear-gradient(165deg,#100E0B,#0A0908 60%,#15100A)}
.auth-e .auth-vis::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(230,199,126,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(230,199,126,.07) 1px,transparent 1px);background-size:36px 36px;-webkit-mask:radial-gradient(500px 400px at 30% 70%,#000,transparent 75%);mask:radial-gradient(500px 400px at 30% 70%,#000,transparent 75%)}
.auth-e .aw-w{color:#FBF3E2}.auth-e .aw-t{color:#E2BE73}
.auth-e .badge{display:inline-flex;gap:8px;align-items:center;align-self:flex-start;margin-top:28px;padding:6px 12px;border:1px solid rgba(226,190,115,.4);border-radius:999px;font:700 11px "Manrope",sans-serif;letter-spacing:.18em;color:#E2BE73;text-transform:uppercase}
.auth-e .badge i{width:7px;height:7px;border-radius:50%;background:#5DBE8E;box-shadow:0 0 0 4px rgba(93,190,142,.18)}
.auth-e .auth-vis h2{font:800 46px/1.02 "Inter Tight",sans-serif;letter-spacing:-.04em;color:#FBF3E2}.auth-e .auth-vis h2 b{background:linear-gradient(100deg,#F6E3A1,#E2BE73 60%,#B8893A);-webkit-background-clip:text;background-clip:text;color:transparent}
.auth-e .lede{color:#B5A68A}
.auth-e .steps{max-width:460px;border:1px solid rgba(230,199,126,.2);border-radius:20px;background:rgba(30,25,18,.6);overflow:hidden}
.auth-e .step{display:flex;gap:14px;align-items:center;padding:14px 16px}.auth-e .step+.step{border-top:1px solid rgba(230,199,126,.12)}
.auth-e .step .n{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font:800 14px "Manrope",sans-serif;background:rgba(230,199,126,.1);color:#E2BE73;border:1px solid rgba(230,199,126,.3);flex:none}
.auth-e .step.done .n,.auth-e .step.now .n{background:linear-gradient(135deg,#F6E3A1,#C9A24A);color:#1B140A;border:0}
.auth-e .step.now{background:rgba(230,199,126,.06)}
.auth-e .step b{display:block;font:700 14.5px "Manrope",sans-serif}.auth-e .step span{font-size:13px;color:#9C9282}
.auth-e .step em{margin-left:auto;font:700 11px "Manrope",sans-serif;font-style:normal;color:#5DBE8E;letter-spacing:.06em}
.auth-e .auth-side{background:linear-gradient(170deg,#17140F,#0E0C0A);border-left:1px solid rgba(230,199,126,.15)}
.auth-e .auth-card{background:linear-gradient(170deg,rgba(36,30,22,.95),rgba(22,19,14,.95));border:1px solid rgba(230,199,126,.25);border-radius:28px;padding:34px 34px 26px;box-shadow:0 40px 80px -40px #000,inset 0 1px 0 rgba(255,240,200,.08)}
.auth-e .auth-kick{color:#E2BE73}
.auth-e .auth-card h1{font:800 32px/1.1 "Inter Tight",sans-serif;letter-spacing:-.03em;color:#FBF3E2}
.auth-e .auth-card p,.auth-e .auth-card .note{color:#B5A68A}
.auth-e .auth-card .field{color:#D8CCB2}
.auth-e .auth-card .field input,.auth-e .dom{border:1px solid rgba(230,199,126,.22);background:rgba(8,7,5,.6);color:#FBF3E2}
.auth-e .auth-card .field input:focus,.auth-e .dom:focus-within{outline:none;border-color:#E2BE73;box-shadow:0 0 0 4px rgba(226,190,115,.14)}
.auth-e .dom input{color:#FBF3E2}
.auth-e .dom span{color:#E2BE73;border-left:1px solid rgba(230,199,126,.2);background:rgba(230,199,126,.06)}
.auth-e .auth-card .btn.main{background:linear-gradient(105deg,#F6E3A1,#F1DFAE 45%,#E2BE73);color:#1B140A;box-shadow:0 16px 34px -14px rgba(230,199,126,.7)}
.auth-e .auth-card a{color:#E2BE73;font-weight:700}
.auth-e .auth-tip{margin-top:16px!important;padding:12px 14px;border-radius:14px;background:rgba(230,199,126,.06);border:1px dashed rgba(230,199,126,.25)}
.auth-e .auth-card .err{color:#F3C4BC}
.auth-e .auth-card .ok{color:#9EE3BE}
.auth-card :focus-visible{outline:3px solid #E2BE73;outline-offset:2px}
@media (max-width:860px){
  .auth{grid-template-columns:1fr}
  .auth-vis{padding:28px 20px 22px}
  .auth-vis h2,.auth-vis .lede,.auth-vis .perks,.auth-vis .steps,.auth-e .badge{display:none}
  .auth-side{padding:20px 16px 40px;place-items:start center}
  .auth-e .auth-card{padding:24px 20px}
  .auth-t .auth-card h1{font-size:34px}
}