:root{
  --mist:#F0F3F8;--paper:#fff;--ink:#162134;--ink-2:#4E5A70;--ink-3:#8590A5;--line:#DDE2EC;--line-2:#EBEEF4;
  --pine:#01958F;--pine-d:#017671;--pine-s:#D8F1EF;
  --blue:#334FFA;--blue-d:#2239C9;--blue-s:#E5E9FF;--teal-l:#00B0A5;
  --mari:#F2B53A;--mari-s:#FDF0D3;--mari-d:#835400;
  --lilac:#C9C2F2;--lilac-s:#EFECFD;
  --sky-s:#E3F1F9;--rose:#D3435B;--rose-s:#FBE4E8;
  --r-xl:26px;--r-lg:18px;--r-md:12px;
  --f-d:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-b:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--f-b);font-size:15px;line-height:1.5;color:var(--ink);background:var(--mist);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-d);margin:0;letter-spacing:-.01em;line-height:1.15}
h1{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.025em}
h2{font-size:19px;font-weight:700}
h3{font-size:16px;font-weight:600}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}.small{font-size:13px}.faint{color:var(--ink-3)}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.icon.sm{width:16px;height:16px}
.link{color:var(--pine);font-weight:600;font-size:14px;text-decoration:none}
.link:hover{text-decoration:underline}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* top bar */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px clamp(16px,3vw,32px);background:rgba(240,243,248,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;flex:none}
.brand img{height:30px;width:auto;display:block}
.mark{width:30px;height:30px;flex:none}
.biz{display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-size:13px;font-weight:600}
.biz i{width:8px;height:8px;border-radius:50%;background:var(--pine)}
.search{flex:1;max-width:400px;margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:0 14px;height:40px;color:var(--ink-3)}
.search input{border:0;outline:0;background:none;font:inherit;color:var(--ink);width:100%}
.search:focus-within{border-color:var(--pine)}
.top-actions{display:flex;align-items:center;gap:8px}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--paper);cursor:pointer;position:relative;text-decoration:none;flex:none}
.icon-btn:hover{border-color:var(--ink-3)}
.icon-btn .dot{position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;background:var(--rose);border:2px solid #fff}
.me{position:relative}
.me>button{border:0;background:none;padding:0;cursor:pointer;border-radius:50%}
.menu{position:absolute;right:0;top:48px;min-width:220px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:6px;box-shadow:0 20px 40px -20px rgba(31,42,46,.35);display:none}
.menu.open{display:block}
.menu a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:14px}
.menu a:hover{background:var(--mist)}
.menu .who-m{padding:10px 12px;border-bottom:1px solid var(--line-2);margin-bottom:4px}
@media(max-width:860px){.biz,.search,.hide-sm{display:none!important}.top-actions{margin-left:auto}}
@media(max-width:420px){.nb-t{display:none}}

/* dock */
.dock{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:40;display:flex;gap:2px;padding:6px;background:var(--ink);border-radius:24px;box-shadow:0 20px 44px -18px rgba(31,42,46,.6);max-width:calc(100vw - 20px);overflow-x:auto;scrollbar-width:none}
.dock::-webkit-scrollbar{display:none}
.dock a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:70px;padding:9px 8px 7px;border-radius:18px;color:#A9B3C7;text-decoration:none;font-size:11.5px;font-weight:600;flex:none}
.dock a:hover{color:#fff;background:rgba(255,255,255,.07)}
.dock a.on{background:var(--blue);color:#fff}

/* layout */
.page{max-width:1280px;margin:0 auto;padding:6px clamp(16px,3vw,32px) 130px}
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin:16px 0 24px}
.head .sub{color:var(--ink-2);margin-top:6px;max-width:60ch}
.head-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-xl);padding:22px}
:not(.grid)>.panel+.panel{margin-top:18px}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.panel-h p{font-size:13px;color:var(--ink-2);margin-top:2px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
.g2e{grid-template-columns:repeat(2,minmax(0,1fr))}
.gside{grid-template-columns:300px minmax(0,1fr);align-items:start}
.mt{margin-top:18px}
@media(max-width:980px){.g2,.g2e,.gside{grid-template-columns:minmax(0,1fr)}}

.brief{font-family:var(--f-d);font-size:clamp(20px,2.3vw,27px);line-height:1.4;font-weight:500;letter-spacing:-.015em;max-width:44ch;color:var(--ink-2)}
.brief b{color:var(--ink);font-weight:700;background:linear-gradient(transparent 64%,var(--blue-s) 64%)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.btn:active{transform:translateY(1px)}
.btn-p{background:var(--pine);color:#fff}.btn-p:hover{background:var(--pine-d)}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#0B1322}
.btn-g{background:var(--paper);border-color:var(--line)}.btn-g:hover{border-color:var(--ink-3)}
.btn-s{background:var(--pine-s);color:var(--pine-d)}.btn-s:hover{background:#cce6de}
.btn-d{background:var(--rose-s);color:var(--rose)}.btn-d:hover{background:#f7d3da}
.btn-sm{height:34px;padding:0 13px;font-size:13px;gap:6px}
.btn-block{width:100%}
.btn[disabled]{opacity:.45;cursor:not-allowed}

/* chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-size:12.5px;font-weight:600;white-space:nowrap;background:var(--line-2);color:var(--ink-2)}
.chip.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.c-ok{background:var(--pine-s);color:var(--pine-d)}
.c-wait{background:var(--mari-s);color:var(--mari-d)}
.c-bad{background:var(--rose-s);color:var(--rose)}
.c-info{background:var(--sky-s);color:#1B5D7E}
.c-lil{background:var(--lilac-s);color:#43359F}

/* segmented */
.seg{display:inline-flex;padding:4px;background:#E3E8F0;border-radius:999px;gap:2px;overflow-x:auto;max-width:100%;scrollbar-width:none}
.seg button{border:0;background:none;padding:7px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(31,42,46,.14)}

/* table */
.tbl-wrap{overflow-x:auto;margin:0 -22px;padding:0 22px}
table.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.tbl th{text-align:left;font-weight:600;color:var(--ink-3);font-size:12.5px;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:#F6F8FC}
.who{display:flex;align-items:center;gap:10px;min-width:0}
.who b{display:block;font-weight:600;white-space:nowrap}
.who span:not(.av){display:block;font-size:12.5px;color:var(--ink-3);white-space:nowrap}
.av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:12.5px;font-family:var(--f-d);flex:none;background:var(--line-2);color:var(--ink-2)}
.av.lg{width:64px;height:64px;font-size:22px}
.av.sm{width:26px;height:26px;font-size:10.5px}
.stack{display:flex}.stack .av{border:2px solid #fff;margin-left:-8px}.stack .av:first-child{margin-left:0}
.empty{padding:36px 12px;text-align:center;color:var(--ink-2)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field>label,.lbl{font-size:13px;font-weight:600;color:var(--ink-2)}
.hint{font-size:12.5px;color:var(--ink-3)}
.in{height:44px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 14px;font:inherit;background:#fff;color:var(--ink);width:100%;min-width:0}
select.in{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2356646A' stroke-width='1.8'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
textarea.in{height:auto;min-height:96px;padding:12px 14px;resize:vertical;line-height:1.5}
.in:focus{outline:0;border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-s)}
.in.err{border-color:var(--rose);box-shadow:0 0 0 3px var(--rose-s)}
.err-msg{color:var(--rose);font-size:13px;font-weight:500}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:560px){.row2,.row3{grid-template-columns:1fr}}
.inline-in{display:flex;align-items:center;gap:8px}
.affix{display:flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;height:44px;overflow:hidden}
.affix span{padding:0 12px;color:var(--ink-3);font-size:14px;background:var(--mist);height:100%;display:grid;place-items:center;border-right:1px solid var(--line)}
.affix input{border:0;outline:0;height:100%;padding:0 12px;font:inherit;width:100%;min-width:0}
.affix:focus-within{border-color:var(--pine);box-shadow:0 0 0 3px var(--pine-s)}
.switch{position:relative;width:42px;height:24px;flex:none;display:inline-block}
.switch input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:999px;background:#C5CCD9;transition:.2s;pointer-events:none}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.switch input:checked+span{background:var(--pine)}
.switch input:checked+span::after{transform:translateX(18px)}
.switch input:focus-visible+span{outline:2.5px solid var(--blue);outline-offset:2px}
.setting{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
.setting:last-child{border-bottom:0}
.setting b{display:block;font-weight:600;font-size:14.5px}
.setting span.d{display:block;font-size:13px;color:var(--ink-2)}
.checks{display:grid;gap:8px}
.check{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:14px}
.check:has(input:checked){border-color:var(--pine);background:#F2FAF9}
.check input{accent-color:var(--pine);width:17px;height:17px;margin:0}

/* overlays */
.scrim{position:fixed;inset:0;background:rgba(31,42,46,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .2s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:10px;right:10px;bottom:10px;width:min(480px,calc(100vw - 20px));background:var(--paper);border-radius:var(--r-xl);z-index:70;transform:translateX(calc(100% + 20px));transition:transform .28s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:-24px 0 60px -30px rgba(31,42,46,.5);visibility:hidden}
.drawer.open{transform:none;visibility:visible}
.drawer-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 16px;border-bottom:1px solid var(--line-2)}
.drawer-h p{color:var(--ink-2);font-size:13.5px;margin-top:4px}
.drawer-b{flex:1;overflow:auto;padding:20px 22px}
.drawer-f{display:flex;gap:10px;padding:14px 22px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.modal{position:fixed;left:50%;top:50%;width:min(560px,calc(100vw - 24px));max-height:calc(100vh - 40px);overflow:auto;background:var(--paper);border-radius:var(--r-xl);z-index:70;padding:24px;transform:translate(-50%,-47%);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;visibility:hidden}
.modal.open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%);visibility:visible}
.modal-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px}
.modal-h p{color:var(--ink-2);font-size:14px;margin-top:4px}
.modal-f{display:flex;justify-content:flex-end;gap:10px;margin-top:8px;flex-wrap:wrap}
.x{width:36px;height:36px;border-radius:50%;border:0;background:var(--mist);display:grid;place-items:center;cursor:pointer;flex:none}
.x:hover{background:var(--line)}
.toast{position:fixed;left:50%;bottom:104px;transform:translate(-50%,16px);background:var(--ink);color:#fff;padding:12px 18px;border-radius:999px;font-weight:500;font-size:14px;z-index:90;opacity:0;transition:.25s;display:flex;align-items:center;gap:8px;pointer-events:none;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .icon{color:var(--teal-l)}
.kv{display:grid;grid-template-columns:130px 1fr;gap:10px 14px;font-size:14px}
.kv dt{color:var(--ink-3)}.kv dd{margin:0;font-weight:500}
.sec-t{font-family:var(--f-d);font-weight:700;font-size:15px;margin:22px 0 10px}
.sec-t:first-child{margin-top:0}
.money{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.money div{display:flex;justify-content:space-between;padding:4px 0;font-size:14px}
.money div.total{border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;font-weight:700}

/* list rows */
.lrow{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-2)}
.lrow:last-child{border-bottom:0}
.lrow .grow{flex:1;min-width:0}
.lrow .grow b{display:block;font-weight:600;font-size:14.5px}
.lrow .grow span:not(.av){display:block;font-size:13px;color:var(--ink-2)}
.time-big{font-family:var(--f-d);font-weight:700;font-size:20px;letter-spacing:-.02em;min-width:62px;font-variant-numeric:tabular-nums}

/* lanes: the day as a floor plan */
.lanes{overflow-x:auto;margin:0 -22px;padding:30px 22px 6px}
.lanes-in{min-width:1120px;position:relative}
.lane-scale,.lane{display:grid;grid-template-columns:180px 1fr}
.lane-scale{height:24px}
.ticks{position:relative}
.ticks span{position:absolute;transform:translateX(-50%);font-size:12px;color:var(--ink-3);font-family:var(--f-d);font-weight:600}
.lane{min-height:66px;border-top:1px solid var(--line-2)}
.lane-who{display:flex;align-items:center;gap:10px;padding-right:12px}
.lane-who b{font-size:14px;display:block;font-weight:600}
.lane-who span:not(.av){font-size:12px;color:var(--ink-3)}
.track{position:relative;background-image:linear-gradient(to right,var(--line-2) 1px,transparent 1px)}
.blk{position:absolute;top:7px;bottom:7px;border-radius:12px;padding:5px 9px;font-size:12.5px;line-height:1.3;overflow:hidden;cursor:pointer;border:0;text-align:left;display:flex;flex-direction:column;justify-content:center;min-width:0}
.blk b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.blk span{opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.blk.completed{opacity:.5}
.blk.pending{background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.6) 0 5px,transparent 5px 10px)}
.blk.noshow{text-decoration:line-through;opacity:.55}
.blk.brk{background:repeating-linear-gradient(135deg,#F0F3F8 0 6px,#fff 6px 12px)!important;color:var(--ink-3)!important;cursor:default;border:1px dashed var(--line)}
.blk:not(.brk):hover{box-shadow:0 0 0 2px var(--ink) inset}
.now{position:absolute;top:24px;bottom:0;width:2px;background:var(--blue);z-index:3;pointer-events:none;margin-left:-1px}
.now::before{content:attr(data-t);position:absolute;top:0;left:50%;transform:translate(-50%,-110%);background:var(--blue);color:#fff;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;font-family:var(--f-d);white-space:nowrap}
.now::after{content:"";position:absolute;bottom:-4px;left:50%;width:10px;height:10px;border-radius:50%;background:var(--blue);transform:translateX(-50%)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2)}
.legend i{display:inline-block;width:14px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--lilac-s)}

/* bar charts */
.bars{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:24px}
.bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end;min-width:0}
.bar i{display:block;width:100%;max-width:56px;border-radius:10px 10px 4px 4px;background:var(--pine-s);position:relative}
.bar i em{position:absolute;top:-20px;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;font-weight:700;font-family:var(--f-d)}
.bar.hi i{background:var(--blue)}
.bar span{font-size:12px;color:var(--ink-3);font-weight:600}
.hbar{display:grid;grid-template-columns:150px 1fr 70px;align-items:center;gap:12px;padding:7px 0;font-size:14px}
.hbar .t{height:12px;border-radius:999px;background:var(--line-2);overflow:hidden}
.hbar .t i{display:block;height:100%;border-radius:999px;background:var(--pine)}
.hbar b{text-align:right;font-family:var(--f-d);font-variant-numeric:tabular-nums}
@media(max-width:560px){.hbar{grid-template-columns:100px 1fr 56px}}

/* hours editor */
.hours .hr{display:grid;grid-template-columns:110px 50px 1fr;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2)}
.hours .hr:last-child{border-bottom:0}
.hours .shifts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.shift{display:flex;align-items:center;gap:6px;background:var(--mist);border-radius:999px;padding:4px 6px 4px 10px}
.shift input{border:0;background:none;font:inherit;font-size:13.5px;width:116px;color:var(--ink)}
.shift button{border:0;background:none;cursor:pointer;color:var(--ink-3);display:grid;place-items:center;padding:2px}
.hours .off{color:var(--ink-3);font-size:14px}
.addshift{border:1px dashed var(--line);background:none;border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;color:var(--pine);cursor:pointer}
@media(max-width:560px){.hours .hr{grid-template-columns:1fr auto}.hours .shifts{grid-column:1/-1}}

/* ---------- shared: public, auth, misc ---------- */
.pub-top{display:flex;align-items:center;gap:14px;padding:16px clamp(16px,4vw,48px);border-bottom:1px solid var(--line-2);flex-wrap:wrap;background:#fff}
.logo-n{width:44px;height:44px;border-radius:14px;background:var(--pine);color:#fff;display:grid;place-items:center;font-family:var(--f-d);font-weight:700;font-size:20px;flex:none;text-decoration:none}
.pub-top h1{font-size:19px;letter-spacing:-.01em}
.pub-top .addr{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:4px}
.pub-top .right{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pub-foot{display:flex;justify-content:center;align-items:center;gap:8px;padding:10px 20px 36px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.pub-foot img{height:20px}
body[data-pub]{background:#fff}
.pub-main{max-width:760px;margin:0 auto;padding:40px 20px 50px}
.pub-main.wide{max-width:1120px}
.pub-main h2.big,.big{font-size:clamp(28px,4vw,40px);letter-spacing:-.03em}
.auth{min-height:100vh;display:grid;place-items:center;padding:32px 16px}
.auth-card{width:min(470px,100%);background:#fff;border:1px solid var(--line);border-radius:28px;padding:clamp(22px,5vw,36px)}
.auth-card.wide{width:min(760px,100%)}
.auth-card>.brand img{height:34px}
.auth-card>.brand{margin-bottom:26px}
.auth-card h1{font-size:28px;margin-bottom:6px}
.auth-card .sub{color:var(--ink-2);margin-bottom:22px}
.auth-foot{text-align:center;margin-top:18px;font-size:14px;color:var(--ink-2)}
.center-msg{max-width:580px;margin:0 auto;padding:70px 20px;text-align:center}
.bigicon{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;margin:0 auto 22px;background:var(--blue);color:#fff}
.bigicon .icon{width:38px;height:38px;stroke-width:2.4}
.bigicon.bad{background:var(--rose-s);color:var(--rose)}.bigicon.ok{background:var(--pine-s);color:var(--pine-d)}.bigicon.soft{background:var(--blue-s);color:var(--blue)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.card{border:1px solid var(--line);border-radius:22px;padding:18px;background:#fff;display:flex;flex-direction:column;gap:8px}
.card h3{font-size:17px}
.card .price{font-family:var(--f-d);font-weight:700;font-size:24px;letter-spacing:-.02em}
.stars{color:var(--mari);letter-spacing:1px;font-size:15px;white-space:nowrap}
.back{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:14px;margin:8px 0 -4px}
.back:hover{color:var(--ink)}
.tabs-l{display:flex;gap:4px;padding:4px;background:#E3E8F0;border-radius:999px;overflow-x:auto;scrollbar-width:none}
.tabs-l a{padding:7px 14px;border-radius:999px;text-decoration:none;font-weight:600;font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.tabs-l a.on{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(22,33,52,.14)}
.more-g{display:grid;gap:18px}
.more-g h3{font-size:13px;color:var(--ink-3);margin-bottom:6px}
.more-g a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;text-decoration:none;font-weight:600;font-size:14.5px}
.more-g a:hover,.more-g a.on{background:var(--mist)}
.more-g a .icon{color:var(--pine)}
.statline{display:flex;flex-wrap:wrap;gap:10px 28px;margin:4px 0 22px}
.statline div{font-size:13px;color:var(--ink-2)}
.statline b{display:block;font-family:var(--f-d);font-size:24px;color:var(--ink);letter-spacing:-.02em}
.steps-n{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px;padding:0}
.steps-n li{list-style:none;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-3);padding:6px 12px 6px 6px;border-radius:999px;background:var(--mist)}
.steps-n li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:11.5px}
.steps-n li.on{background:var(--ink);color:#fff}.steps-n li.on span{background:var(--blue);color:#fff}
.steps-n li.done{background:var(--pine-s);color:var(--pine-d)}.steps-n li.done span{background:var(--pine);color:#fff}
.bubble-in,.bubble-out{max-width:78%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.45;margin-bottom:8px}
.bubble-in{background:var(--mist);border-top-left-radius:4px}
.bubble-out{background:var(--pine);color:#fff;margin-left:auto;border-top-right-radius:4px}
.bubble-in small,.bubble-out small{display:block;font-size:11px;opacity:.7;margin-top:3px}
.upl{border:2px dashed var(--line);border-radius:20px;padding:30px;text-align:center;color:var(--ink-2)}
.upl:hover{border-color:var(--pine)}
.code{background:var(--ink);color:#D8F1EF;border-radius:14px;padding:14px 16px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;overflow-x:auto;white-space:pre;line-height:1.6}

/* Print: keep chart colours and hide overlays and chrome */
@media print{
.bars .bar i,.bar i em,.hbar .t,.hbar .t i,.heat i,.av,.chip,.seg button.on{-webkit-print-color-adjust:exact;print-color-adjust:exact}
.toast,.scrim,.drawer,.modal,.dock,.topbar{display:none!important}
}

/* ---------- RTL (Arabic). Mirrors only the physical left/right rules above; LTR rendering is untouched. ---------- */
html[dir=rtl]{--f-d:"IBM Plex Sans Arabic","Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;--f-b:"IBM Plex Sans Arabic","Figtree",system-ui,-apple-system,"Segoe UI",sans-serif}
[dir=rtl] body{font-family:var(--f-b)}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3,[dir=rtl] h4,[dir=rtl] .brief,[dir=rtl] .time-big,[dir=rtl] .statline b,[dir=rtl] .card .price,[dir=rtl] .pub-top h1,[dir=rtl] .pub-main h2.big,[dir=rtl] .big{letter-spacing:0}
/* top bar */
[dir=rtl] .search{margin-left:0;margin-right:auto}
[dir=rtl] .icon-btn .dot{right:auto;left:9px}
[dir=rtl] .menu{right:auto;left:0}
@media(max-width:860px){[dir=rtl] .top-actions{margin-left:0;margin-right:auto}}
/* avatars, tables */
[dir=rtl] .stack .av{margin-left:0;margin-right:-8px}
[dir=rtl] .stack .av:first-child{margin-right:0}
[dir=rtl] .tbl th{text-align:right}
[dir=rtl] .hbar b{text-align:left}
/* forms */
[dir=rtl] select.in{background-position:left 14px center;padding-right:14px;padding-left:36px}
[dir=rtl] .affix span{border-right:0;border-left:1px solid var(--line)}
[dir=rtl] .switch span::after{left:auto;right:3px}
[dir=rtl] .switch input:checked+span::after{transform:translateX(-18px)}
[dir=rtl] .shift{padding:4px 10px 4px 6px}
[dir=rtl] .steps-n li{padding:6px 6px 6px 12px}
/* drawers slide in from the left */
[dir=rtl] .drawer{right:auto;left:10px;transform:translateX(calc(-100% - 20px));box-shadow:24px 0 60px -30px rgba(31,42,46,.5)}
[dir=rtl] .drawer.open{transform:none}
/* lanes and charts keep a left-to-right time/value axis */
[dir=rtl] .lanes,[dir=rtl] .bars,[dir=rtl] .heat{direction:ltr}
[dir=rtl] .lane-who{direction:rtl}
[dir=rtl] .legend i{margin-right:0;margin-left:6px}
/* public, messages, misc */
[dir=rtl] .pub-top .right{margin-left:0;margin-right:auto}
[dir=rtl] .bubble-in{border-top-left-radius:16px;border-top-right-radius:4px}
[dir=rtl] .bubble-out{margin-left:0;margin-right:auto;border-top-right-radius:16px;border-top-left-radius:4px}
[dir=rtl] .back .icon{transform:scaleX(-1)}
[dir=rtl] .code{direction:ltr;text-align:left}
/* Language switch on public pages (same look as the booking page header). */
.lang a{border:0;background:none;font-weight:600;cursor:pointer;padding:6px 8px;border-radius:8px;color:var(--ink-3);text-decoration:none}.lang .on{color:var(--ink);background:var(--mist)}