/* Portal mock — the shell (P1) */
body.app-portal #bar, body.app-portal .gauge, body.app-portal .page, body.app-portal .tabpage { display: none !important; }
.pz-bar { display: none; }
body.app-portal .pz-bar { display: block; }
.pz-page { position: fixed; inset: 0; z-index: 9; overflow-y: auto; scrollbar-width: none; padding: calc(env(safe-area-inset-top) + 18px) 22px 130px; display: none; }
.pz-page::-webkit-scrollbar, .pz-det::-webkit-scrollbar { display: none; }
body.app-portal .pz-page.on { display: block; }
.pz-det { position: fixed; inset: 0; z-index: 12; overflow-y: auto; scrollbar-width: none; padding: calc(env(safe-area-inset-top) + 14px) 22px 130px;
  background: rgba(8,8,10,.55); -webkit-backdrop-filter: blur(30px) saturate(1.3); backdrop-filter: blur(30px) saturate(1.3);
  transform: translateX(100%); transition: transform .42s cubic-bezier(.2,.9,.25,1.05); }
.pz-det.on { transform: none; }
.pz-head { position: relative; margin-bottom: 14px; }
.pz-head .tp-h { margin: 6px 0 0; }
.pz-hk { position: absolute; right: 0; top: 10px; width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.pz-hk svg, .pz-back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pz-out { height: 30px; padding: 0 12px; border-radius: 7px; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); margin-bottom: 10px; }
.pz-back { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.pz-crumb { margin-top: 12px; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.pz-eb { margin: 22px 0 8px; display: flex; align-items: baseline; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .18em; color: var(--ink3); }
.pz-eb b { font: 700 13px/1 var(--dot); letter-spacing: 0; color: var(--ink); }
.pz-search { width: 100%; box-sizing: border-box; height: 46px; padding: 0 16px; border: 0; border-radius: 8px; font: 600 15px/1 var(--sans); color: var(--ink); outline: none;
  background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16); }
.z-sq { flex: none; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font: 500 9px/1 var(--mono); letter-spacing: .08em; color: #fff; background: linear-gradient(160deg, #3a3e46, #1d2026); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.z-sq.hot { background: linear-gradient(160deg, #d7173f, #8e0f24); }
.z-leaf { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 8px 0; cursor: pointer; transition: transform .35s cubic-bezier(.2,.9,.3,1), opacity .3s; }
.z-b { flex: 1; min-width: 0; }
.z-t { font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-m { margin-top: 5px; font: 500 10px/1 var(--mono); letter-spacing: .14em; opacity: .62; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.z-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.z-r b { font: 700 14px/1 var(--dot); }
.z-act { flex: none; height: 36px; padding: 0 14px; border-radius: 7px; font: 600 13px/1 var(--sans); color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.z-chip { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 7px; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.z-chip.on { color: #fff; background: #d7173f; box-shadow: none; }
.z-chip.white { color: #22262c; background: #f4f6f9; box-shadow: none; }
.z-chip.dim { opacity: .55; text-decoration: line-through; }
.z-seal { flex: none; width: 34px; height: 34px; border-radius: 14px 4px 14px 4px; display: grid; place-items: center; font: 700 11px/1 var(--sans); color: #fff; background: linear-gradient(160deg, var(--c, #3a3e46), color-mix(in srgb, var(--c, #3a3e46), black 45%)); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.z-seals { display: flex; padding-left: 6px; }
.z-seals i { width: 22px; height: 22px; margin-left: -6px; border-radius: 9px 3px 9px 3px; display: grid; place-items: center; font: 700 8px/1 var(--sans); font-style: normal; color: #fff; background: linear-gradient(160deg, #3a3e46, #1d2026); box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.z-marks { display: flex; gap: 3px; }
.z-marks i { width: 12px; height: 4px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.z-marks i.done { background: #f4f6f9; box-shadow: none; }
.z-marks i.cur { background: #d7173f; box-shadow: 0 0 6px #d7173f; }
.z-glyph { flex: none; width: 34px; height: 28px; position: relative; }
.z-glyph::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 6px; border-radius: 3px 2px 0 0; background: var(--c); }
.z-glyph::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; bottom: 0; border-radius: 0 5px 5px 5px; background: linear-gradient(170deg, color-mix(in srgb, var(--c), white 25%), var(--c)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.z-grid7 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.z-grid7 button { height: 74px; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font: 600 12px/1 var(--sans); color: #f4f6f9; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.z-grid7 svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pz-bar .slab { top: 26px; }
/* P2 — folder, clients */
.z-keys { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 4px; }
.z-keys button { height: 38px; padding: 0 13px; border-radius: 7px; display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1 var(--sans); color: var(--ink); background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18); }
.z-keys button.on { color: #fff; background: var(--lit); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(215,23,63,.85); }
.z-seg { display: flex; gap: 4px; margin: 16px 0 8px; padding: 4px; border-radius: 8px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.z-seg button { flex: 1; height: 34px; border-radius: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); }
.z-seg button.on { color: #fff; background: var(--lit); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(215,23,63,.85); }
.z-tl div { display: flex; align-items: center; gap: 10px; padding: 9px 0; font: 500 14px/1.2 var(--sans); }
.z-tl i { width: 10px; height: 10px; flex: none; box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.7); }
.z-tl .on i { background: #f4f6f9; box-shadow: none; }
.z-tl .now i { background: #d7173f; box-shadow: 0 0 6px #d7173f; }
.z-tl .now { font-weight: 700; }
.z-tl em { margin-left: auto; font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; opacity: .65; }
.z-bar { height: 4px; margin-top: 8px; border-radius: 2px; background: rgba(255,255,255,.15); overflow: hidden; }
.z-bar i { display: block; height: 100%; width: 0; background: #d7173f; transition: width 1.2s linear; }
.z-cols { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.z-cols button { width: 40px; height: 40px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.z-cols button.on { box-shadow: 0 0 0 2px #fff; }
.z-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.12); font: 500 14px/1.3 var(--sans); }
.z-row > span:first-child { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.z-row b { font: 700 15px/1 var(--dot); }
/* P3 — money papers */
.z-figs { display: flex; justify-content: space-between; gap: 10px; margin: 6px 2px 4px; }
.z-fig span { display: block; font: 500 10px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.z-fig b { display: block; margin-top: 8px; font: 300 28px/1 var(--dot); letter-spacing: -.02em; }
.z-fig.hot b { color: #ff2e4e; }
.z-sw { width: 48px; height: 28px; border-radius: 8px; padding: 3px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.z-sw i { display: block; width: 22px; height: 22px; border-radius: 6px; background: #fff; transition: transform .25s; }
.z-sw.on { background: linear-gradient(160deg, #d7173f, #8e0f24); } .z-sw.on i { transform: translateX(20px); }
.z-line { display: grid; grid-template-columns: 1fr 34px 70px 76px; gap: 8px; align-items: center; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); font: 500 14px/1.3 var(--sans); }
.z-line b { font: 700 13px/1 var(--dot); text-align: right; }
.z-line.hd { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); }
.z-line.hd span:not(:first-child) { text-align: right; }
.z-wire { margin-top: 8px; padding: 12px 14px; border-radius: 8px; white-space: pre-line; font: 500 12px/1.6 var(--mono); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

body.app-portal .pz-bar { z-index: 13; }
/* P4 — journeys, pipeline, bookings */
.z-col { flex: none; width: 260px; scroll-snap-align: start; min-height: 420px; padding: 12px 10px; border-radius: 14px; background: linear-gradient(170deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1.2px rgba(255,255,255,.3); }
.z-col.drop { box-shadow: inset 0 0 0 2px #d7173f; }
.z-col h5 { margin: 2px 4px 8px; display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: .16em; color: var(--ink2); }
.z-col h5 b { font: 700 13px/1 var(--dot); color: var(--ink); }
.z-card { padding: 12px; margin: 8px 0; cursor: grab; touch-action: pan-y; user-select: none; }
.z-card.lift { position: fixed; z-index: 40; pointer-events: none; transform: rotate(-2deg) scale(1.04); box-shadow: 0 24px 50px rgba(0,0,0,.5); }
.z-card .z-t { white-space: normal; }
.tk-ch button.x { opacity: .4; text-decoration: line-through; pointer-events: none; }

/* P5/P6 — boards, calendar, library */
.z-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.z-cal span { font: 500 9.5px/1 var(--mono); letter-spacing: .1em; text-align: center; color: var(--ink3); padding-bottom: 4px; }
.z-cal button { height: 46px; border-radius: 7px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font: 700 13px/1 var(--dot); color: var(--ink); background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.z-cal button.today { color: #fff; background: var(--lit); }
.z-cal button i { width: 6px; height: 6px; background: #d7173f; }
.z-cal button.off { opacity: .35; }
.z-add { width: 100%; box-sizing: border-box; height: 40px; margin-top: 6px; padding: 0 12px; border: 0; border-radius: 8px; font: 600 13px/1 var(--sans); color: var(--ink); outline: none; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }

/* R2 Calendar in Portal mode */
body.app-portal.pz-cal #tab-cal { display: block !important; z-index: 11; }
body.app-portal.pz-cal .pz-page.on { visibility: hidden; }

/* R2 Home — three screens */
.pz-page[data-p="home"] { overflow-x: hidden; overflow-y: auto; }
.zh-hi { font-size: 19px !important; }
/* screen 1: the stack */
/* screen 2: key dates */
.zk { height: 100%; border-radius: 22px 6px 22px 6px; position: relative; overflow: hidden; touch-action: pan-y;
  background: linear-gradient(170deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1.2px rgba(255,255,255,.28); }
/* screen 3: folders */
.zf { position: relative; height: 330px; margin-top: 8px; }

/* R2 Proposals — the fan */
.zp-dial { display: flex; justify-content: center; gap: 8px; margin: 2px 0 6px; }
.zp-dial { gap: 16px; }
.zp-dial button { position: relative; width: auto; height: auto; padding: 8px 2px 10px; border: 0; background: none; box-shadow: none; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); cursor: pointer; }
.zp-dial button.on { color: var(--ink); background: none; box-shadow: none; }
.zp-dial button.on::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 5px; height: 5px; margin-left: -2.5px; background: #ff2e4e; box-shadow: 0 0 6px rgba(255,46,78,.9); }
.zp-fan { position: relative; height: 470px; margin-top: 8px; touch-action: pan-y; overflow: visible; }
.zp-pp { position: absolute; left: 50%; top: 20px; width: 270px; height: 360px; margin-left: -135px; border-radius: 10px; padding: 22px 20px; box-sizing: border-box; background: var(--paper); color: var(--paper-ink);
  transform-origin: 50% 900px; transition: transform .5s cubic-bezier(.2,.9,.25,1.05), opacity .4s; box-shadow: 0 20px 44px rgba(0,0,0,.45); cursor: pointer; }
.zp-pp::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); opacity: .14; mix-blend-mode: multiply; pointer-events: none; }
.zp-pp .k { font: 500 9.5px/1 var(--mono); letter-spacing: .16em; color: #8e0f24; }
.zp-pp h4 { margin: 14px 0 0; font: 400 17px/1.3 var(--display); }
.zp-pp .c { margin-top: 8px; font: 600 13px/1.3 var(--sans); opacity: .7; }
.zp-pp .v { position: absolute; left: 20px; bottom: 22px; font: 300 40px/1 var(--dot); letter-spacing: -.03em; }
.zp-stamp { position: absolute; right: 16px; top: 120px; padding: 7px 12px; border: 3px solid #d7173f; border-radius: 6px; font: 700 15px/1 var(--mono); letter-spacing: .2em; color: #d7173f; transform: rotate(-12deg); opacity: .88; mix-blend-mode: multiply; }
.zp-stamp.dim { border-color: #7a7f88; color: #7a7f88; }
.zp-lines { position: absolute; left: 20px; right: 20px; top: 176px; }
.zp-lines div { display: flex; justify-content: space-between; align-items: baseline; padding: 7px 0; border-top: 1px solid rgba(34,38,44,.14); font: 600 12.5px/1.2 var(--sans); color: rgba(34,38,44,.6); }
.zp-lines div.on { color: #22262c; }
.zp-lines div.on span::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 7px 1px 0; background: #d7173f; }
.zp-lines b { font: 700 12px/1 var(--mono); letter-spacing: .04em; }
.zp-lines small { display: block; margin-top: 10px; font: 500 8.5px/1 var(--mono); letter-spacing: .16em; color: rgba(34,38,44,.5); }
.zp-pp::before { content: ""; position: absolute; left: 0; right: 0; top: 33.3%; height: 2px; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.07), rgba(255,255,255,.55)); }
/* detail: the package stack (ref 0925–0927) */
.zp-pk { position: relative; height: 250px; margin: 16px 0 6px; touch-action: pan-y; }
.zp-pkc { position: absolute; left: 0; right: 0; top: 0; height: 190px; border-radius: 22px 6px 22px 6px; padding: 18px; box-sizing: border-box; color: #fff; transition: transform .45s cubic-bezier(.2,.9,.25,1.05), opacity .35s;
  background: radial-gradient(70% 50% at 30% 0%, rgba(255,255,255,.45), transparent 70%), linear-gradient(160deg, var(--k1), var(--k2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), 0 22px 44px -16px rgba(0,0,0,.6); }
.zp-pkc h5 { margin: 0; font: 400 14px/1 var(--display); }
.zp-pkc .ln { display: flex; justify-content: space-between; margin-top: 8px; font: 500 13px/1.2 var(--sans); }
.zp-pkc .tot { position: absolute; left: 18px; bottom: 16px; font: 300 32px/1 var(--dot); }
.zp-pkc .on { position: absolute; right: 16px; bottom: 18px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; }
.zp-sig { position: relative; height: 150px; margin-top: 12px; border-radius: 8px; background: var(--paper); touch-action: none; }
.zp-sig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.zp-sig span { position: absolute; left: 16px; right: 16px; bottom: 34px; border-top: 1.5px solid rgba(34,38,44,.35); padding-top: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: rgba(34,38,44,.55); }

/* R3 Clients — the dial (refs 1030–1033) */
.zd { position: relative; width: 340px; height: 340px; left: 50%; margin: 64px 0 0 -170px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.zd::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--cc), transparent 78%) 0%, transparent 62%); }
.zd svg { position: absolute; inset: 0; width: 340px; height: 340px; overflow: visible; }
.zd .tk { stroke: rgba(255,255,255,.26); stroke-width: 1; }
.zd .mark { fill: #ff2e4e; filter: drop-shadow(0 0 6px rgba(255,46,78,.9)); }
.zd .sg { fill: rgba(255,255,255,.03); stroke: rgba(255,255,255,.32); stroke-width: 1; }
.zd .sg.d { fill: url(#zdSil); stroke: rgba(255,255,255,.75); stroke-width: .6; }
.zd .sg.c { fill: url(#zdRed); stroke: rgba(255,170,185,.8); stroke-width: .6; filter: drop-shadow(0 0 8px rgba(215,23,63,.85)); }
/* R3 profile — the stage line and the people (no panels) */
.zsl { position: relative; margin: 20px 0 6px; padding-left: 26px; }
.zsl::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.12)); }
.zsl div { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 9px 0; transition: transform .3s cubic-bezier(.2,.9,.25,1.05); }
.zsl div::before { content: ""; position: absolute; left: -24px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: rgba(10,11,14,.6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.zsl div.d::before { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: none; }
.zsl div.c { padding: 14px 0; touch-action: none; cursor: grab; transition: none; }
.zsl div.c::before { left: -25px; width: 11px; height: 11px; margin-top: -5.5px; background: #ff2e4e; box-shadow: 0 0 10px rgba(255,46,78,.9); }
.zsl span { font: 600 14px/1.2 var(--sans); color: var(--ink2); }
.zsl div.d span { color: var(--ink); }
.zsl div.c span { font: 400 17px/1.2 var(--display); letter-spacing: .03em; color: var(--ink); }
.zsl em { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .1em; color: var(--ink3); white-space: nowrap; }
.zsl div.c em { color: #ff2e4e; }
.zpp { display: flex; gap: 22px; overflow-x: auto; scrollbar-width: none; margin: 0 -22px; padding: 4px 22px 6px; }
.zpp::-webkit-scrollbar { display: none; }
.zpp > div { flex: none; width: 92px; text-align: center; }
.zpp .z-seal { width: 48px; height: 48px; margin: 0 auto; font-size: 14px; }
.zpp b { display: block; margin-top: 9px; font: 600 13px/1.2 var(--sans); color: var(--ink); }
.zpp > div > span:not(.z-seal) { display: block; margin-top: 4px; font: 500 8.5px/1.3 var(--mono); letter-spacing: .12em; color: var(--ink3); }
.zpp button { margin-top: 6px; padding: 4px 0; border: 0; background: none; font: 600 12px/1 var(--sans); color: #ff2e4e; cursor: pointer; }

/* R3 Quotes — till-roll receipts + the split decision (refs 1069/1075) */
@property --s { syntax: "<percentage>"; inherits: true; initial-value: 50%; }
.zq-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 4px -22px 0; padding: 40px 37px 10px; }
.zq-row::-webkit-scrollbar { display: none; }
.zq-w { position: relative; flex: none; width: 300px; scroll-snap-align: center; filter: drop-shadow(0 18px 22px rgba(0,0,0,.45)); }
.zq-r { position: relative; padding: 26px 22px 22px; background: var(--paper); color: var(--paper-ink); cursor: pointer;
  -webkit-mask: radial-gradient(circle at 7px 0, transparent 4.5px, #000 5px) 0 0 / 14px 100% repeat-x; mask: radial-gradient(circle at 7px 0, transparent 4.5px, #000 5px) 0 0 / 14px 100% repeat-x; }
.zq-r::after { content: ""; position: absolute; inset: 0; background: var(--grain); opacity: .14; mix-blend-mode: multiply; pointer-events: none; }
.zq-hd { text-align: center; }
.zq-hd small { display: block; font: 500 8.5px/1 var(--mono); letter-spacing: .22em; opacity: .55; }
.zq-hd b { display: block; margin-top: 8px; font: 400 15px/1 var(--display); letter-spacing: .12em; }
.zq-hd span { display: block; margin-top: 6px; font: 600 12px/1.2 var(--sans); opacity: .7; }
.zq-t { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(34,38,44,.35); font: 600 13px/1.3 var(--sans); }
.zq-ls { margin-top: 8px; }
.zq-ls div { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font: 500 12.5px/1.25 var(--sans); }
.zq-ls i { flex: none; width: 24px; font: 500 10px/1 var(--mono); font-style: normal; opacity: .55; }
.zq-ls span { flex: 1; }
.zq-ls b { font: 700 13px/1 var(--dot); }
.zq-fx { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(34,38,44,.35); }
.zq-fx div { display: flex; justify-content: space-between; padding: 4px 0; font: 500 12px/1.2 var(--sans); }
.zq-fx i, .zq-tot i { font: 500 8.5px/1.4 var(--mono); font-style: normal; letter-spacing: .16em; opacity: .55; }
.zq-tot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 10px; padding-top: 12px; border-top: 1px dashed rgba(34,38,44,.35); }
.zq-tot b { font: 300 32px/1 var(--dot); letter-spacing: -.03em; }
.zq-draft { position: absolute; right: 18px; top: 18px; font: 500 8.5px/1 var(--mono); letter-spacing: .2em; opacity: .5; }
.zq-stamp { position: absolute; left: 50%; top: 46%; padding: 8px 14px; border: 3px solid #d7173f; border-radius: 6px; transform: translate(-50%, -50%) rotate(-12deg); font: 700 18px/1 var(--mono); letter-spacing: .16em; color: #d7173f; opacity: .85; mix-blend-mode: multiply; pointer-events: none; }
.zq-stamp.dim { border-color: #7a7f88; color: #7a7f88; }
.zq-tab { position: absolute; right: 18px; top: -30px; height: 32px; padding: 0 14px 4px; border: 0; border-radius: 7px 7px 0 0; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: #fff; cursor: pointer;
  background: linear-gradient(180deg, #ff2e4e, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.zq-dec { position: relative; height: 104px; margin-top: 14px; touch-action: none; }
.zq-dec:not(.live) { transition: --s .28s cubic-bezier(.2,.9,.25,1.05); }
.zq-wash { position: absolute; left: -10px; right: -10px; top: 0; bottom: 22px;
  background: linear-gradient(90deg, #eef0f4 0%, #c9ced8 calc(var(--s) - 16%), #d7173f calc(var(--s) + 16%), #7e0020 100%);
  -webkit-mask: radial-gradient(ellipse 62% 70% at 50% 50%, #000 40%, transparent 100%); mask: radial-gradient(ellipse 62% 70% at 50% 50%, #000 40%, transparent 100%); }
.zq-dec span { position: absolute; top: 34px; font: 400 12px/1 var(--display); letter-spacing: .1em; pointer-events: none; }
.zq-dec .a { left: 14%; color: #22262c; }
.zq-dec .d { right: 14%; color: #fff; }
.zq-bar { position: absolute; left: 0; right: 0; bottom: 6px; height: 3px; background: linear-gradient(90deg, #f2f4f8 var(--s), #d7173f var(--s)); }
.zq-knob { position: absolute; left: var(--s); top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 7px; cursor: grab; touch-action: none;
  background: linear-gradient(180deg, #fff, #c9ced8); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0,0,0,.5); }
.zq-dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.zq-dots i { width: 5px; height: 5px; background: rgba(255,255,255,.3); }
.zq-dots i.on { background: #ff2e4e; box-shadow: 0 0 6px rgba(255,46,78,.9); }
.zq-none { width: 100%; padding: 80px 0; text-align: center; font: 500 10px/1 var(--mono); letter-spacing: .18em; color: var(--ink3); }
/* R3 Invoices — the month gauge + ring rail (refs 1018/1020, 0986) */
/* the invoice's payment ring */
.zk-plain { gap: 26px; }
.zk-plain button { height: auto; padding: 8px 0; border: 0; background: none; box-shadow: none; }
.zp-pk { height: 290px; }
.zp-pkc { height: 226px; overflow: hidden; }
.zp-pkc .ln { margin-top: 6px; font-size: 12.5px; }

/* R3 Journeys — the flow (refs 1055–1057, 1067) */
.zj-s { flex: none; width: 100%; box-sizing: border-box; padding: 0 22px; scroll-snap-align: start; }
.zj-cancel { display: block; margin: 6px auto 0; padding: 10px 0; border: 0; background: none; font: 600 13px/1 var(--sans); color: var(--ink3); cursor: pointer; }

/* fix: Journeys head seal was restyled by `.zj-hd span` */


/* R3 Library — a shelf of glass book spines (no drawers, no tiles) */
/* inside a Library section the rows are loose papers */
.zl-det .z-leaf.gslip { border-radius: 8px; background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 10px 22px rgba(0,0,0,.35); }
.zl-det .z-leaf.gslip:nth-child(odd) { transform: rotate(-.6deg); }
.zl-det .z-leaf.gslip:nth-child(even) { transform: rotate(.5deg); }
.zl-det .z-leaf.gslip::after { opacity: .12; mix-blend-mode: multiply; }
/* R4 shell: Honjin's Inbox over the Portal */
body.app-portal.pz-inbox #tab-inbox { display: block !important; z-index: 11; }
body.app-portal.pz-inbox .pz-page.on { visibility: hidden; }
/* R4 Clients — the name drum (scales to any number) */
/* R4 a client — four swiped screens */
.zcl-hd { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.zcl-hd .z-keys { margin: 0; }
.zcl-tabs { justify-content: flex-start; margin: 14px 0 6px; }
.zcl-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -22px; }
.zcl-row::-webkit-scrollbar { display: none; }
.zcl-s { flex: none; width: 100%; box-sizing: border-box; padding: 6px 22px 20px; scroll-snap-align: start; }
.zcl-s .zj-s { width: auto; padding: 0; margin-bottom: 26px; }
.zcl-facts { margin-top: 22px; }
.zcl-facts div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); font: 500 13px/1.2 var(--sans); }
.zcl-facts i { font: 500 9px/1.4 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--ink3); }
/* R4 Invoices — slips hanging on a line (no rings) */
.zv-sum { margin: 10px 0 6px; }
.zv-sum em { display: block; font: 700 44px/1 var(--dot); font-style: normal; letter-spacing: -.02em; color: var(--ink); }
.zv-sum i { display: block; margin-top: 8px; font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .18em; color: var(--ink2); }
.zv-sum small { display: block; margin-top: 8px; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zv-sum small b { font-weight: 500; color: #ff2e4e; }
.zv-line { margin: 4px -22px 0; overflow-x: auto; scrollbar-width: none; }
.zv-line::-webkit-scrollbar { display: none; }
.zv-in { position: relative; }
.zv-str { position: absolute; left: 0; right: 0; top: 30px; height: 1px; background: linear-gradient(90deg, transparent, rgba(240,242,246,.7) 6%, rgba(240,242,246,.7) 94%, transparent); box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.zv-m { position: absolute; top: 10px; transform: translateX(-50%); font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .16em; color: var(--ink3); }
.zv-today { position: absolute; top: 26px; width: 9px; height: 9px; margin-left: -4.5px; background: #ff2e4e; box-shadow: 0 0 8px rgba(255,46,78,.9); }
.zv-s { position: absolute; width: 92px; box-sizing: border-box; padding: 16px 10px 12px; border-radius: 4px; cursor: pointer; background: var(--paper); color: var(--paper-ink);
  transform: rotate(var(--r)); transform-origin: 50% -2px; box-shadow: 0 10px 18px rgba(0,0,0,.35); }
.zv-s::before { content: ""; position: absolute; left: 50%; top: calc(-1 * var(--th)); width: 1px; height: var(--th); background: rgba(240,242,246,.45); }
.zv-clip { position: absolute; left: 50%; top: -7px; width: 10px; height: 16px; margin-left: -5px; border-radius: 2px; background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: 0 2px 4px rgba(0,0,0,.35); }
.zv-s.overdue .zv-clip { background: linear-gradient(180deg, #ff2e4e, #8e0f24); box-shadow: 0 0 8px rgba(255,46,78,.8); }
.zv-s small { display: block; font: 500 7.5px/1 var(--mono); letter-spacing: .1em; opacity: .55; }
.zv-s b { display: block; margin-top: 6px; font: 600 11.5px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zv-s em { display: block; margin-top: 8px; font: 700 15px/1 var(--dot); font-style: normal; }
.zv-s span { display: block; margin-top: 7px; font: 500 7.5px/1 var(--mono); letter-spacing: .12em; opacity: .6; }
.zv-s.overdue span { color: #b0122f; opacity: 1; }
.zv-s.void { opacity: .4; }
.zv-paid { position: absolute; right: 6px; top: 40%; padding: 3px 5px; border: 2px solid #b0122f; border-radius: 3px; transform: rotate(-14deg); font: 700 9px/1 var(--mono); font-style: normal; letter-spacing: .12em; color: #b0122f; opacity: .8; }
/* the invoice's due line (drag the handle to record a payment) */
.zv-due { margin: 20px 0 10px; }
.zv-due small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .18em; color: var(--ink2); }
.zv-due em { display: block; margin-top: 8px; font: 700 40px/1 var(--dot); font-style: normal; color: var(--ink); }
.zv-due.overdue em { color: #ff2e4e; }
.zv-bar { position: relative; height: 3px; margin: 18px 13px 0; background: rgba(255,255,255,.16); }
.zv-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #8e0f24, #ff2e4e); box-shadow: 0 0 8px rgba(255,46,78,.7); }
.zv-h { position: absolute; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 7px; touch-action: none; cursor: grab; background: linear-gradient(180deg, #fff, #c9ced8); box-shadow: inset 0 1px 0 #fff, 0 4px 12px rgba(0,0,0,.5); }
.zv-due.paid .zv-h, .zv-due.void .zv-h, .zv-due.draft .zv-h { display: none; }
.zv-due span { display: block; margin-top: 18px; font: 500 9px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); }

/* R4 tray: two keys each side of the crown */
.pz-bar .bar-sc.bar-one { justify-content: center; -webkit-mask: none; mask: none; }
.pz-bar .bar-one button { flex: 0 0 62px; }
.pz-bar .bar-one button:nth-child(2) { margin-right: 80px; }
/* R4: room for the crown Home above the tray */
.pz-page { padding-bottom: 170px; }

/* R4 (the user, 1 Nov: no white solid inside the Library): section rows are lines on the glass, no paper, no slips */
.zl-det .z-leaf.gslip { margin: 0; padding: 14px 2px; border-radius: 0; background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; border-top: 1px solid rgba(255,255,255,.12); transform: none !important; color: var(--ink); }
.zl-det .z-leaf.gslip::after { display: none; }
.zl-det .z-leaf .z-t { color: var(--ink); }
.zl-det .z-leaf .z-m { color: var(--ink3); opacity: 1; }
/* R4 Library = Honjin Files' folder trays; sections are lines on the glass (nothing white) */
.zlp { padding-bottom: 50vh; }
.zlp-ls { padding: 6px 14px 10px; transition: opacity .3s; }
.ft.past .zlp-ls { opacity: 0; pointer-events: none; }
.zlp-r { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 12px; width: 100%; padding: 13px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.zlp-r:first-child { border-top: 0; }
.zlp-r b { font: 600 15px/1.2 var(--sans); }
.zlp-r span { grid-column: 1; margin-top: 5px; font: 500 9px/1.2 var(--mono); letter-spacing: .1em; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zlp-r em { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 700 18px/1 var(--dot); font-style: normal; }
/* R4 Conversations = Honjin Talk's catch-up line */
.zcu { margin-top: 6px; }
.zcu .ci { cursor: pointer; }

/* R4 Home — Coming up + What's new as plain lines (the real Home's lists; no slips) */
/* R4: no white solid — the papers standing in Home's folders are clear glass like Honjin's Files trays */

/* R5 BOARDS — the real Boards: the Library's list, a board's lists side by side as clear-glass trays, Table, Calendar (no white solid) */
.znb-q { margin-top: 6px; }
.znb-n { margin: 14px 2px 4px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--ink3); }
.znb-r { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; padding: 14px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.znb-r:first-child { border-top: 0; }
.znb-r b { grid-column: 1; grid-row: 1; font: 600 15px/1.25 var(--sans); }
.znb-r span { grid-column: 1; grid-row: 2; margin-top: 6px; font: 500 9px/1.3 var(--mono); letter-spacing: .1em; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.znb-r em { grid-column: 2; grid-row: 1; justify-self: end; font: 700 18px/1 var(--dot); font-style: normal; }
.znb-r em small { font-size: 12px; color: var(--ink3); }
.znb-r .z-seals { grid-column: 2; grid-row: 2; justify-self: end; margin-top: 6px; }

.znb-hd { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.znb-hd > i { flex: 1; }
.znb-acc { font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.znb-k { height: 30px; padding: 0 12px; border: 0; border-radius: 7px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); cursor: pointer; }
.znb-k.on { color: #22262c; background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
body.crimson .znb-k.on { color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 12px rgba(215,23,63,.55); }

/* BOARD: a sideways row of trays; the next one peeks */
.znb-kb { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 10px -22px 0; padding: 0 22px 24px; scroll-padding: 0 22px; }
.znb-kb::-webkit-scrollbar { display: none; }
.znb-kb.dragging { scroll-snap-type: none; }
.pz-det .z-col.znb-col, .pz-page .z-col.znb-col { flex: none; width: calc(100vw - 88px); max-width: 300px; min-height: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; scroll-snap-align: start; }
.znb-tab { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 30px 0 12px; border-radius: 8px 4px 0 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 100%, 0 100%);
  font: 400 11.5px/1 var(--display); letter-spacing: .06em; color: #fff; background: linear-gradient(170deg, rgba(255,255,255,.34), rgba(255,255,255,.14)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.znb-tab > i { width: 8px; height: 8px; flex: none; }
.znb-tab svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.znb-tab b { font: 700 13px/1 var(--dot); letter-spacing: 0; }
.znb-bd { position: relative; min-height: 120px; padding: 34px 10px 10px; border-radius: 0 8px 8px 8px; background: linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1.2px rgba(255,255,255,.4), 0 18px 40px -16px rgba(0,0,0,.5); transition: background .3s; }
.znb-col.drop .znb-tab, .znb-col.drop .znb-bd { background: radial-gradient(110% 80% at 20% 0%, rgba(255,190,200,.32), transparent 60%), linear-gradient(160deg, rgba(215,23,63,.62), rgba(142,15,36,.58) 60%, rgba(255,46,78,.5)); }
body.crimson .znb-col.drop .znb-tab, body.crimson .znb-col.drop .znb-bd { background: radial-gradient(110% 80% at 20% 0%, rgba(226,224,230,.22), transparent 60%), linear-gradient(160deg, rgba(142,15,36,.64), rgba(126,0,32,.62) 55%, rgba(167,15,40,.56)); }
.pz-det .z-col.znb-col.drop, .pz-page .z-col.znb-col.drop { box-shadow: none; }
.znb-more { position: absolute; right: 6px; top: 4px; width: 30px; height: 26px; border: 0; border-radius: 7px; background: none; font: 700 13px/1 var(--mono); letter-spacing: .05em; color: var(--ink2); cursor: pointer; }
.znb-cards { display: flex; flex-direction: column; gap: 8px; }
.z-card.znb-c { margin: 0; padding: 11px 12px 10px; border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.10); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18); }
.z-card.znb-c > b { display: block; font: 600 14px/1.3 var(--sans); }
.z-card.znb-c.done > b { color: var(--ink3); text-decoration: line-through; }
.z-card.znb-c.lift { background: rgba(40,42,48,.85); }
.znb-m { display: flex; align-items: center; gap: 6px; margin-top: 9px; min-height: 22px; }
.znb-m > i { flex: 1; }
.znb-m span { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 6px; border-radius: 7px; font: 500 9px/1 var(--mono); letter-spacing: .1em; color: var(--ink2); background: rgba(255,255,255,.08); }
.znb-m span.full { color: var(--ink); }
.znb-m span.late { color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); }
.znb-m svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.znb-create { display: block; width: 100%; margin-top: 8px; padding: 10px 4px; border: 0; background: none; text-align: left; font: 600 13px/1 var(--sans); color: var(--ink2); cursor: pointer; }
.znb-new { margin-top: 8px; }
.znb-ta { height: auto; min-height: 60px; padding: 10px 12px; line-height: 1.35; resize: none; }
.znb-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.znb-addl { flex: none; width: 52px; height: 154px; margin-top: 0; border: 0; border-radius: 8px; font: 300 26px/1 var(--display); color: var(--ink2); background: none; box-shadow: inset 0 0 0 1.2px rgba(255,255,255,.3); scroll-snap-align: end; cursor: pointer; }
.znb-col.znb-nl { flex: none; width: calc(100vw - 88px); max-width: 300px; scroll-snap-align: start; }

/* TABLE: lines on the glass */
.znb-tb { margin-top: 10px; }
.znb-tr { position: relative; display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-top: 1px solid rgba(255,255,255,.14); cursor: pointer; touch-action: pan-y; transition: transform .25s cubic-bezier(.2,.9,.3,1); }
.znb-tr:first-child { border-top: 0; }
.znb-tr::before { content: attr(data-sw); position: absolute; left: -110px; top: 50%; width: 80px; margin-top: -5px; text-align: right; font: 500 10px/1 var(--mono); letter-spacing: .16em; color: #ff2e4e; opacity: 0; }
.znb-tr[style*="translate"]::before { opacity: .45; }
.znb-tr.arm::before { opacity: 1; }
.znb-tr .tk-ck { width: 22px; height: 22px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(244,246,249,.55); }
.znb-tr.done .tk-ck { background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); }
.znb-tr.done .tk-ck svg { opacity: 1; }
.znb-tt { flex: 1; min-width: 0; }
.znb-tt b { display: block; font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.znb-tr.done .znb-tt b { color: var(--ink3); text-decoration: line-through; }
.znb-tt span { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 9px/1 var(--mono); letter-spacing: .12em; color: var(--ink2); }
.znb-tt span i { width: 7px; height: 7px; flex: none; }
.znb-tw { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.znb-tw em { font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--ink2); }
.znb-tw em.late { color: #ff2e4e; }

/* CALENDAR */
.znb-cbar { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.znb-cbar b { font: 400 13px/1 var(--display); letter-spacing: .06em; }
.znb-cbar > i { flex: 1; }
.znb-cbar .znb-k { padding: 0 10px; }
.znb-und { margin-top: 8px; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.znb-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 12px; }
.znb-cal span { padding-bottom: 4px; text-align: center; font: 500 9px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); }
.znb-day { height: 56px; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 6px 5px; border: 0; border-radius: 7px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--ink); cursor: pointer; }
.znb-day b { font: 700 12px/1 var(--dot); text-align: left; }
.znb-day i { height: 3px; background: rgba(244,246,249,.75); }
.znb-day i.done { background: rgba(244,246,249,.28); }
.znb-day i.late { background: #ff2e4e; }
.znb-day em { font: 500 8px/1 var(--mono); font-style: normal; color: var(--ink3); }
.znb-day.out { opacity: .35; }
.znb-day.now { background: var(--lit); box-shadow: none; }

/* the task sheet / list menu additions */
.znb-ttl { font: 400 17px/1.3 var(--display); letter-spacing: .02em; }
.znb-ppl { display: flex; flex-wrap: wrap; gap: 6px; }
.znb-pp { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 10px 0 4px; border: 0; border-radius: 7px; font: 600 13px/1 var(--sans); color: inherit; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); cursor: pointer; }
.znb-pp .z-seals { padding-left: 6px; }
.znb-pp em { font-style: normal; opacity: .6; }
.znb-pp.add { background: none; opacity: .7; }
.znb-none { font: 500 13px/1.3 var(--sans); opacity: .55; }
.znb-cnt { margin-left: 6px; font: 700 12px/1 var(--dot); letter-spacing: 0; }
.znb-prog { height: 2px; margin: 4px 0 6px; background: rgba(255,255,255,.18); }
.znb-prog i { display: block; height: 100%; background: #f4f6f9; }
.znb-x { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; font: 500 16px/1 var(--sans); color: inherit; opacity: .55; cursor: pointer; }
.znb-desc { height: auto; min-height: 76px; padding: 10px 12px; line-height: 1.4; resize: none; }
.znb-tones { display: flex; gap: 8px; }
.znb-tones button { width: 40px; height: 40px; border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); cursor: pointer; }
.znb-tones button.on { box-shadow: 0 0 0 2px #fff; }
.tk-keys button:disabled { opacity: .35; }
.znb-why { margin-top: 6px; text-align: center; font: 500 9px/1 var(--mono); letter-spacing: .14em; opacity: .6; }

/* R5 EVERYTHING / DOCUMENTS — Library lines with a glyph; a document on the glass (no paper) */
.zev-r { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; width: 100%; padding: 13px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.zev-ls > .zev-r:first-child { border-top: 0; }
.zev-r > i { grid-column: 1; grid-row: 1 / span 2; }
.zev-r b { grid-column: 2; grid-row: 1; font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zev-r span { grid-column: 2; grid-row: 2; margin-top: 5px; font: 500 9px/1.3 var(--mono); letter-spacing: .1em; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zev-r em { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--ink2); }
.zev-r em small { font: 500 8.5px/1 var(--mono); letter-spacing: .14em; color: #ff2e4e; }
.zev-r em small.ok { color: var(--ink); }
.zev-k { width: 40px; height: 30px; display: grid; place-items: center; border-radius: 7px; font: 500 8px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.zev-g { position: relative; width: 40px; height: 30px; }
.zev-g::before { content: ""; position: absolute; left: 4px; top: 4px; width: 14px; height: 5px; border-radius: 3px 2px 0 0; background: var(--c); opacity: .9; }
.zev-g::after { content: ""; position: absolute; left: 4px; right: 4px; top: 8px; bottom: 2px; border-radius: 0 5px 5px 5px; background: linear-gradient(170deg, rgba(255,255,255,.3), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.3), inset 0 -3px 0 var(--c); }

.zdc-save { margin: 10px 0 0; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zdc-keys { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 12px -22px 0; padding: 0 22px; }
.zdc-keys::-webkit-scrollbar { display: none; }
.zdc-keys .znb-k { flex: none; }
.zdc-page { position: relative; margin-top: 22px; padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.14); }
.zdc-stamp { position: absolute; right: 0; top: 18px; padding: 7px 9px; border-radius: 6px; font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .16em; color: var(--ink2); box-shadow: inset 0 0 0 1.5px rgba(244,246,249,.55); transform: rotate(-4deg); }
.zdc-stamp.ok { color: #ff2e4e; box-shadow: inset 0 0 0 1.5px #ff2e4e; }
.zdc-t { margin: 18px 110px 14px 0; font: 400 21px/1.3 var(--display); letter-spacing: .02em; outline: none; }
.zdc-sg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 14px; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); }
.zdc-b { position: relative; padding-right: 30px; }
.zdc-b p { margin: 0 0 14px; min-height: 1.6em; font: 500 15px/1.6 var(--sans); color: var(--ink); outline: none; }
.zdc-b p:focus { box-shadow: -10px 0 0 -8px #ff2e4e; }
.zdc-mk { position: absolute; right: 0; top: 2px; min-width: 22px; height: 22px; padding: 0 5px; border: 0; border-radius: 6px; font: 700 11px/1 var(--dot); color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); cursor: pointer; }
.tk-cm .znb-k { margin-top: 8px; height: 28px; }
.zdc-rs { margin: 10px 0 4px; }
.tk-cm.zdc-done { opacity: .55; }
/* R5 REQUESTS — the real board in the Boards trays; a request as lines on the glass */
.z-card.zlq-c > b { padding-right: 0; }
.zlq-v { font: 700 14px/1 var(--dot); font-style: normal; color: var(--ink); }
.zlq-st { margin-top: 8px; }
.zlq-lost { margin-top: 10px; padding-left: 10px; font: 500 14px/1.4 var(--sans); color: var(--ink); box-shadow: inset 2px 0 0 #ff2e4e; }
.zlq-sec { margin-top: 14px; }
.zlq-f { display: flex; align-items: baseline; gap: 14px; padding: 12px 2px; border-top: 1px solid rgba(255,255,255,.14); }
.zlq-f:first-child { border-top: 0; }
.zlq-f span { flex: none; width: 74px; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zlq-f b { flex: 1; min-width: 0; font: 600 14px/1.35 var(--sans); overflow-wrap: anywhere; }
.zlq-f a { color: var(--ink2); }
.zlq-a { padding: 0; border: 0; background: none; font: inherit; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.zlq-li { padding: 10px 2px; border-top: 1px solid rgba(255,255,255,.1); font: 500 14px/1.35 var(--sans); }
.zlq-q { margin: 8px 0 0; padding: 2px 0 2px 12px; font: 500 15px/1.55 var(--sans); color: var(--ink); box-shadow: inset 2px 0 0 rgba(244,246,249,.5); }
.zlq-val { display: flex; gap: 8px; align-items: center; }
.zlq-val .z-add { flex: 1; margin: 0; font: 700 18px/1 var(--dot); }
.zlq-cur { display: flex; gap: 4px; }
.zlq-cur .znb-k { padding: 0 8px; }
.zlq-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.zlq-del { color: #ff2e4e; }
/* R5 BOOKINGS — the real list as lines on the glass */
.zbo-bar { display: flex; align-items: center; gap: 12px; margin: 6px 0 10px; }
.zbo-cp { font: 500 9px/1 var(--mono); letter-spacing: .16em; color: var(--ink2); }
.zbo-r { display: flex; align-items: flex-start; gap: 14px; padding: 14px 2px; border-top: 1px solid rgba(255,255,255,.14); transition: background .4s; }
#pzBk > .zbo-r:first-child { border-top: 0; }
.zbo-r.hi { background: rgba(255,255,255,.08); }
.zbo-r.x .zbo-m, .zbo-r.x .zbo-d { opacity: .45; }
.zbo-r.past .zbo-d { opacity: .6; }
.zbo-d { flex: none; width: 40px; text-align: center; }
.zbo-d b { display: block; font: 700 24px/1 var(--dot); }
.zbo-d span { display: block; margin-top: 5px; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); }
.zbo-m { flex: 1; min-width: 0; }
.zbo-m b { display: block; font: 600 15px/1.25 var(--sans); }
.zbo-m span { display: block; margin-top: 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink); }
.zbo-m em { display: block; margin-top: 7px; font: 500 9px/1.3 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--ink2); }
.zbo-m em .zlq-a { font: 600 13px/1.2 var(--sans); letter-spacing: 0; }
.zbo-m small { display: block; margin-top: 5px; font: 500 12px/1.3 var(--sans); color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zbo-a { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.zbo-a i { font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: #ff2e4e; }
.zbo-fold { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 10px; padding: 14px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: none; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--ink2); text-align: left; cursor: pointer; }
.zbo-fold b { font: 700 13px/1 var(--dot); letter-spacing: 0; color: var(--ink); }
.zbo-fold::after { content: ""; width: 6px; height: 6px; margin-left: auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.zbo-fold.open::after { transform: rotate(-135deg); }
/* R5 OUTBOX / EMBEDS / ARCHIVE / TRASH — lines on the glass */
a.zev-r { text-decoration: none; }
.zev-r > em .znb-k { height: 28px; padding: 0 10px; }
.zob-l { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; font: 500 9px/1.3 var(--mono); letter-spacing: .14em; color: var(--ink2); }
.zob-l i { width: 7px; height: 7px; flex: none; background: rgba(244,246,249,.4); }
.zob-l.ok i { background: #f4f6f9; box-shadow: 0 0 6px rgba(244,246,249,.7); }
.zob-l.wait i { background: #ff2e4e; box-shadow: 0 0 6px rgba(255,46,78,.8); }
.zob-r { cursor: pointer; }
.zob-r em { color: var(--ink2); }
.zob-r em.hot { color: #ff2e4e; }
.zob-x { padding: 4px 2px 16px 52px; }
.zob-x pre { margin: 0; white-space: pre-wrap; font: 500 14px/1.55 var(--sans); color: var(--ink); }
.zob-x small { display: block; margin-top: 10px; font: 500 9px/1.3 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zob-k { display: flex; gap: 8px; margin-top: 12px; }
.ztr-d { display: flex; align-items: baseline; gap: 5px; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--ink2); }
.ztr-d b { font: 700 16px/1 var(--dot); letter-spacing: 0; color: var(--ink); }
.ztr-d.soon, .ztr-d.soon b { color: #ff2e4e; }
.ztr-k { display: flex; gap: 6px; }
/* R5 TEMPLATES — the journey editor's steps */
.zjt-s { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.16); }
.zjt-h { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.zjt-h b { font: 700 16px/1 var(--dot); }
.zjt-h span { flex: 1; }
.zjt-h .znb-k { width: 32px; padding: 0; }
.zjt-h .znb-k:disabled { opacity: .3; }
/* R5 FORMS — the builder as lines on the glass */
.zfm-t { margin: 8px 0 0; font: 400 17px/1 var(--display); letter-spacing: .02em; }
.zfm-del { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.zfm-q { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.14); }
.zfm-q .zjt-h .z-add { flex: 1; min-width: 0; height: 38px; margin: 0; }
.zfm-q .zjt-h span { display: none; }
.zfm-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.zfm-kinds .znb-k { height: 28px; padding: 0 9px; font-size: 8.5px; }
.zfm-req i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; vertical-align: 0; box-shadow: inset 0 0 0 1px currentColor; }
.zfm-req.on i { background: #ff2e4e; box-shadow: 0 0 6px rgba(255,46,78,.8); }
.zfm-opts { margin-top: 8px; padding-left: 26px; }
.zfm-o { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.zfm-o i { width: 9px; height: 9px; flex: none; box-shadow: inset 0 0 0 1.2px rgba(244,246,249,.6); }
.zfm-o .z-add { flex: 1; height: 34px; margin: 0; }
.zfm-help { height: 34px; margin-top: 8px; font-size: 12px; }
.zfm-bar { display: flex; align-items: center; gap: 12px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.14); }
.zfm-bar .znb-create { width: auto; }
.zfm-st { margin-left: auto; font: 500 9px/1.3 var(--mono); letter-spacing: .14em; color: var(--ink2); text-align: right; }
.zfm-st.bad { color: #ff2e4e; }
.znb-k:disabled, .znb-create:disabled { opacity: .3; }
/* R5 JOURNEYS list / FILES / MY TASKS */
.zjy-r { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; padding: 14px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.14); background: none; text-align: left; color: var(--ink); cursor: pointer; }
#pzJList > .zjy-r:first-child { border-top: 0; }
.zjy-r > b { grid-column: 1; font: 600 15px/1.25 var(--sans); }
.zjy-r > em { grid-column: 2; grid-row: 1; justify-self: end; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: var(--ink2); }
.zjy-r > em.hot { color: #ff2e4e; }
.zjy-r > span { grid-column: 1 / span 2; margin-top: 4px; font: 500 13px/1.3 var(--sans); color: var(--ink2); }
.zjy-p { grid-column: 1 / span 2; display: block; height: 2px; margin-top: 10px; background: rgba(255,255,255,.16); }
.zjy-p i { display: block; height: 100%; background: #f4f6f9; }
.zjy-r > small { grid-column: 1 / span 2; margin-top: 7px; font: 500 8.5px/1.3 var(--mono); letter-spacing: .12em; color: var(--ink2); }
.zjy-r > small b { font: 700 12px/1 var(--dot); letter-spacing: 0; color: var(--ink); }
.zmt-v { margin: 6px 0 4px; }

/* R5 — no white solid in the Portal: the money papers are clear glass (the user rejected white solid twice) */
.zp-pp, .zq-r, .zv-s, .zp-sig { --paper-ink: #f4f6f9; color: #f4f6f9;
  background: linear-gradient(170deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1.2px rgba(255,255,255,.4), 0 18px 40px -16px rgba(0,0,0,.5); }
.zp-pp { -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3); }
.zp-pp::after, .zq-r::after { mix-blend-mode: overlay; opacity: .3; }
.zp-pp .k { color: #ff2e4e; }
.zp-lines div { color: rgba(244,246,249,.6); border-top-color: rgba(255,255,255,.16); }
.zp-lines div.on { color: #f4f6f9; }
.zp-lines small { color: rgba(244,246,249,.55); }
.zp-stamp.dim, .zq-stamp.dim { border-color: rgba(244,246,249,.6); color: rgba(244,246,249,.6); }
.zp-sig span { border-top-color: rgba(244,246,249,.4); color: rgba(244,246,249,.6); }
.zq-t, .zq-fx, .zq-tot { border-top-color: rgba(255,255,255,.3); }
.zv-s.overdue span { color: #ff2e4e; }
/* R5 a proposal — the real page's edit mode, sum, signature and facts */
.zpr-k { margin-top: 12px; }
.zpr-pk { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.14); }
.zpr-pk .zjt-h .z-add { flex: 1; min-width: 0; height: 38px; margin: 0; }
.zpr-ln { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
.zpr-ln .z-add { flex: 1; min-width: 0; height: 36px; margin: 0; }
.zpr-ln .zpr-p { flex: none; width: 86px; font: 700 14px/1 var(--dot); }
.zpr-sum { margin-top: 14px; }
.zpr-tot { font: 700 22px/1 var(--dot); font-style: normal; }
.zpr-sig { margin-top: 8px; font: 400 24px/1.2 var(--display); letter-spacing: .02em; }
.zpr-fp { margin-top: 6px; font: 500 9px/1.3 var(--mono); letter-spacing: .12em; color: var(--ink3); }
.zpr-agree { display: flex; align-items: center; gap: 8px; width: 100%; height: auto; min-height: 38px; margin-top: 10px; padding: 8px 12px; text-align: left; line-height: 1.4; }
.zpr-agree i { width: 9px; height: 9px; flex: none; box-shadow: inset 0 0 0 1.2px currentColor; }
.zpr-agree.on i { background: #ff2e4e; box-shadow: 0 0 6px rgba(255,46,78,.8); }
/* R5 a quote — its ID, the qty field */
.zqp-id { display: flex; align-items: center; gap: 10px; margin-top: 10px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); }
.zqp-id .znb-k { height: 26px; padding: 0 9px; }
.zpr-ln .zqp-q { flex: none; width: 46px; text-align: center; font: 700 14px/1 var(--dot); }
.zpr-pk .zjt-h .znb-k { width: auto; padding: 0 10px; }

/* R6-1: the real bar — Inbox · + | crown Home | Clients · Me. + is an action key (opens Create), never lit. */
.pz-bar .pz-plus svg { width: 21px; height: 21px; }   /* 2 Nov: plain like the other keys (the glass box made it sit off-line) */
.pz-bar .pz-plus { color: var(--ink2); }
.pz-bar .pz-plus:active svg { background: var(--lit); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(215,23,63,.85); }
.pz-bar .badge { top: 3px; right: 10px; }
/* R6-2 HOME — the real Portal's Home as one page; rows are lines on the glass, keys are clear glass */
.pz-hk .zh-badge { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; background: #d7173f; color: #fff; font: 700 10px/16px var(--dot); text-align: center; }
.pz-hk.zh-gear svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.zh-body { padding-bottom: 10px; }
.zh-search { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; margin-top: 4px; padding: 0 16px; box-sizing: border-box; border: 0; border-radius: 8px; text-align: left;
  font: 500 15px/1 var(--sans); color: var(--ink3); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16); }
.zh-search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zh-cuts { display: flex; gap: 8px; margin: 12px -22px 0; padding: 0 22px 2px; overflow-x: auto; scrollbar-width: none; }
.zh-cuts::-webkit-scrollbar { display: none; }
.zh-cuts button { flex: none; height: 38px; padding: 0 13px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; gap: 7px; font: 600 13px/1 var(--sans); color: var(--ink);
  background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18); }
.zh-cuts svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zh-sec { margin: 28px 0 4px; font: 500 10px/1 var(--mono); letter-spacing: .22em; color: var(--ink3); }
.zh-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; padding: 12px 2px; border: 0;
  border-top: 1px solid rgba(255,255,255,.12); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.zh-sec + .zh-row { border-top: 0; }
.zh-ri { width: 36px; height: 36px; display: grid; place-items: center; color: var(--ink2); }
.zh-ri svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zh-rt { min-width: 0; }
.zh-rt b { display: block; font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-rt small { display: block; margin-top: 4px; font: 500 12.5px/1.3 var(--sans); color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-row.hot b, .zh-row.hot .zh-ri { color: #ff2e4e; }
.zh-act { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 7px; font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink);
  background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.24); }
.zh-act.hot { color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px rgba(215,23,63,.45); }
.zh-car { display: flex; gap: 10px; margin: 8px -22px 0; padding: 2px 22px 4px; overflow-x: auto; scrollbar-width: none; }
.zh-car::-webkit-scrollbar { display: none; }
.zh-card { flex: none; width: 140px; padding: 14px; box-sizing: border-box; border: 0; border-radius: 8px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; color: var(--ink);
  background: linear-gradient(170deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.22); }
.zh-card .z-fcard { --fs: .24; margin-bottom: 4px; }
.zh-card b { width: 100%; font: 600 14px/1.2 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zh-card small { font: 500 12px/1 var(--sans); color: var(--ink2); }
.zh-news { display: flex; align-items: baseline; gap: 12px; width: 100%; padding: 12px 2px; border: 0; border-top: 1px solid rgba(255,255,255,.12); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.zh-sec + .zh-news { border-top: 0; }
.zh-news span { flex: 1; min-width: 0; font: 500 14px/1.35 var(--sans); color: var(--ink); opacity: 1; }
.zh-news time { flex: none; font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); }
/* R6-3 REQUESTS (phone) — stage chips + a list, as the real LeadsBoard on a phone */
.zrq-chips { display: flex; gap: 8px; margin: 4px -22px 8px; padding: 0 22px 2px; overflow-x: auto; scrollbar-width: none; }
.zrq-chips::-webkit-scrollbar { display: none; }
.zrq-chips button { flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 7px; display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--sans); color: var(--ink);
  background: rgba(255,255,255,.1); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18); }
.zrq-chips button b { font: 500 13px/1 var(--dot); color: var(--ink2); }
.zrq-chips button.on { color: #fff; background: var(--lit); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(215,23,63,.85); }
.zrq-chips button.on b { color: #fff; }
.zrq-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 14px; column-gap: 12px; align-items: center; width: 100%; padding: 14px 2px; border: 0;
  border-top: 1px solid rgba(255,255,255,.12); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.zrq-ls > .zrq-row:first-child { border-top: 0; }
.zrq-v { font: 500 15px/1 var(--dot); font-style: normal; color: var(--ink); }
.zrq-row svg { width: 14px; height: 14px; fill: none; stroke: var(--ink3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zrq-none { padding: 34px 0; text-align: center; font: 500 10px/1 var(--mono); letter-spacing: .16em; color: var(--ink3); }

/* R6-4 CLIENTS — the real ClientsPage on a phone: tabs, search, rows on the glass */
.zcl-q { display: block; width: 100%; height: 46px; margin: 2px 0 6px; padding: 0 14px; box-sizing: border-box; border: 0; border-radius: 8px; outline: none; -webkit-appearance: none; appearance: none;
  font: 500 15px/1 var(--sans); color: var(--ink); background: rgba(255,255,255,.08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.16); }
.zcl-q::placeholder { color: var(--ink3); }
.zcl-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; width: 100%; padding: 12px 2px; border: 0;
  border-top: 1px solid rgba(255,255,255,.12); background: none; text-align: left; color: var(--ink); cursor: pointer; }
#zclL > .zcl-r:first-child { border-top: 0; }
.zcl-r em { font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--ink2); white-space: nowrap; }

/* R6-5a: the back key on section pages (as the real pages) — above the PORTAL line */
.pz-head .pz-up { position: relative; margin-bottom: 12px; }
/* R6-5b A JOURNEY — the real journey page: client + status, title, progress squares n / total, keys, steps as clear-glass cards */
.zjd .zj-s { padding: 0; }
.zj-s { margin: 4px 0 26px; }
.zj-eb { display: flex; align-items: center; gap: 10px; font: 500 10px/1 var(--mono); letter-spacing: .18em; color: var(--ink2); }
.zj-eb em { font-style: normal; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); color: var(--ink); font-size: 9px; letter-spacing: .14em; }
.zj-eb em.hot { color: #ff2e4e; box-shadow: inset 0 0 0 1px rgba(255,46,78,.6); }
.zj-t { margin: 10px 0 0; font: 400 20px/1.2 var(--display); color: var(--ink); }
.zjd .zj-t { display: none; }
.zj-prog { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.zj-sq { display: flex; gap: 3px; }
.zj-sq i { width: 9px; height: 9px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); }
.zj-sq i.on { background: #d7173f; box-shadow: 0 0 6px rgba(215,23,63,.6); }
.zj-prog b { font: 500 16px/1 var(--dot); color: var(--ink); }
.zj-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 14px; }
.zj-keys button { height: 44px; border: 0; border-radius: 8px; font: 600 14px/1 var(--sans); color: var(--ink); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18); }
.zj-keys .zj-x { color: #ff2e4e; }
.zj-cards { display: flex; flex-direction: column; gap: 10px; }
.zj-card { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; row-gap: 12px; padding: 14px; border-radius: 8px; cursor: pointer; color: var(--ink);
  background: linear-gradient(170deg, rgba(255,255,255,.14), rgba(255,255,255,.04)); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.2); }
.zj-tick { width: 24px; height: 24px; margin-top: 2px; border-radius: 6px; display: grid; place-items: center; box-shadow: inset 0 0 0 1.4px rgba(255,255,255,.5); }
.zj-tick svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.zj-card.done .zj-tick { background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
.zj-card.done .zj-tick svg { opacity: 1; }
.zj-tx b { display: block; font: 600 16px/1.25 var(--sans); }
.zj-tx small { display: block; margin-top: 5px; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--ink3); }
.zj-tx span { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink2); }
.zj-card.you .zj-tx span { color: #ff2e4e; }
.zj-open { grid-column: 2; height: 42px; border: 0; border-radius: 8px; font: 500 11px/1 var(--mono); letter-spacing: .2em; color: var(--ink); background: rgba(255,255,255,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.18); }
.zj-card.you .zj-open { color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.45); }
/* R6-5c ME — the real MePage: the person, then rows; Profile = the real profile's sections on the glass */
.zme-ch { width: 14px; height: 14px; fill: none; stroke: var(--ink3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zme-ro { padding: 4px 2px 6px; font: 500 15px/1.3 var(--sans); color: var(--ink2); }
.zme-pf .z-add { width: 100%; box-sizing: border-box; }
.zme-pf .roomact { margin-top: 14px; }
/* R6-5d INBOX — the real Portal Inbox on a phone: four tabs, rows on the glass */
.pz-page[data-p="inbox"] .z-seg button sup { margin-left: 5px; font: 700 10px/1 var(--dot); color: #ff2e4e; vertical-align: 2px; }
.zib-ls > :first-child { border-top: 0 !important; }
.zib-r { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; width: 100%; padding: 14px 2px; border: 0;
  border-top: 1px solid rgba(255,255,255,.12); background: none; text-align: left; color: var(--ink); cursor: pointer; }
.zib-t { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; min-width: 0; }
.zib-t b { font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zib-t time { font: 500 10px/1.5 var(--mono); letter-spacing: .1em; color: var(--ink3); }
.zib-t p { grid-column: 1 / -1; margin: 5px 0 0; font: 500 13.5px/1.35 var(--sans); color: var(--ink2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zib-t small { grid-column: 1 / -1; margin-top: 6px; font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zib-r.un .zib-t b { color: #fff; }
.zib-r em { align-self: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 6px; background: #d7173f; color: #fff; font: 700 10.5px/18px var(--dot); font-style: normal; text-align: center; }
.zib-ap { font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink2); }
.zib-ap.waiting { color: #ff2e4e; }
/* R6-5e SETTINGS — the real Portal's trays: Payments · Booking · Requests · Automations · Mail · Members · Brand · Branding · Files sync · Devices */
.ft-g .z-row > div + span:not(.z-sw) { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink2); white-space: nowrap; }
.zst-ta { height: auto; min-height: 84px; padding: 10px 12px; resize: vertical; font: 500 12px/1.6 var(--mono); }
.zst-mode { margin: -4px 0 4px; font: 500 9px/1 var(--mono); letter-spacing: .16em; color: var(--ink3); }
.zst-day { display: grid; grid-template-columns: 34px 1fr auto 1fr 48px; gap: 6px; align-items: center; margin-top: 6px; }
.zst-day > span:first-child { font: 500 10px/1 var(--mono); letter-spacing: .12em; color: var(--ink2); }
.zst-day em { font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .12em; color: var(--ink3); }
.zst-day .z-add { min-width: 0; margin-top: 0; padding: 0 6px; font-family: var(--dot); }
.zst-day.off .z-add { opacity: .35; }
.zst-counts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 8px; }
.zst-counts div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.zst-counts b { font: 500 24px/1 var(--dot); color: var(--ink); }
.zst-counts span { font: 500 7.5px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); }
.zst-code { margin: 6px 0 2px; font: 500 30px/1 var(--dot); letter-spacing: .06em; color: var(--ink); }

/* R6-6: the hidden toast never takes a tap (it sat over the crown Home); the crown is silver glass, dark ink, crimson underline when lit */
body.app-portal .toast { pointer-events: none; }
body.app-portal .pz-bar .home-k { color: #22262c;
  background: linear-gradient(160deg, rgba(255,255,255,.66), rgba(201,206,216,.42) 45%, rgba(236,239,244,.6)) !important; background-color: rgba(150,156,168,.62) !important;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), 0 10px 22px rgba(0,0,0,.4) !important; }
body.app-portal .pz-bar .home-k.on { box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.5), inset 0 -2px 0 rgba(215,23,63,.9), 0 10px 22px rgba(0,0,0,.4) !important; }
/* R6-7: five keys centred under the crown (the crown floats above the strip); seals are petals */
.pz-bar .bar-one button:nth-child(2) { margin-right: 0; }
.pz-bar .bar-one button { flex: 0 0 60px; }

/* R6-8 FILES — the Portal's real Files: Akinai's directory in a frame between the head and the bar */
.pz-page[data-p="files"] { overflow: hidden; }
.zfi { position: absolute; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 92px); width: 100%; height: calc(100% - env(safe-area-inset-top) - 192px); border: 0; background: transparent; }
/* R6-9: the live square after each page's brandline (Honjin's .sq); Me wears Honjin's ID card */
.pz-head > .pz-sq { position: absolute; top: 26px; right: 0; margin: 0 !important; }
.pz-head > .pz-hk ~ .pz-sq { right: 48px; }
.pz-head > .pz-hk ~ .pz-hk ~ .pz-sq { right: 94px; }
.zme-card { display: flex; justify-content: center; margin: -6px 0 6px; }
.zme-card .idc-l { opacity: 1; }
/* R6-10: Honjin's card keys and edit panel under the Portal Me card */
.zme-keys { justify-content: center; margin: 2px 0 28px; }
.zme-keys button { background: none !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } .zme-keys button::after { display: none; }   /* Honjin's keys exactly (size, gap, type, place under the card), the petal glass and grain off */
.zme-ed { width: 100%; max-width: none; margin: 4px 0 14px; box-sizing: border-box; }

/* R6-11: four keys, the slot under the crown Home left empty again */
.pz-bar .bar-one button:nth-child(2) { margin-right: 80px; }
/* R6-12 MOTION — pages rise in, re-drawn lists settle in row by row, chosen keys glide between states */
@keyframes pzIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes zRow { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body.app-portal .pz-page.on { animation: pzIn .34s cubic-bezier(.2,.8,.2,1) both; }
/* every list that is re-drawn when a tab, chip or segment changes */
#zhBody > *, #zclL > *, .zib-ls > *, .zrq-ls > *, #pzRq > .zrq-none, .zj-cards > *, .zev-ls > *, #pzJList > *, .zcl-s > *, .zme-pf > *, .pz-page[data-p="me"] > .zh-row {
  animation: zRow .3s cubic-bezier(.2,.8,.2,1) both; }
#zhBody > :nth-child(2), #zclL > :nth-child(2), .zib-ls > :nth-child(2), .zrq-ls > :nth-child(2), .zj-cards > :nth-child(2), .zev-ls > :nth-child(2), #pzJList > :nth-child(2) { animation-delay: .03s; }
#zhBody > :nth-child(3), #zclL > :nth-child(3), .zib-ls > :nth-child(3), .zrq-ls > :nth-child(3), .zj-cards > :nth-child(3), .zev-ls > :nth-child(3), #pzJList > :nth-child(3) { animation-delay: .06s; }
#zhBody > :nth-child(4), #zclL > :nth-child(4), .zib-ls > :nth-child(4), .zrq-ls > :nth-child(4), .zj-cards > :nth-child(4), .zev-ls > :nth-child(4), #pzJList > :nth-child(4) { animation-delay: .09s; }
#zhBody > :nth-child(5), #zclL > :nth-child(5), .zib-ls > :nth-child(5), .zrq-ls > :nth-child(5), .zj-cards > :nth-child(5), .zev-ls > :nth-child(5), #pzJList > :nth-child(5) { animation-delay: .12s; }
#zhBody > :nth-child(n+6), #zclL > :nth-child(n+6), .zib-ls > :nth-child(n+6), .zrq-ls > :nth-child(n+6), .zj-cards > :nth-child(n+6), .zev-ls > :nth-child(n+6), #pzJList > :nth-child(n+6) { animation-delay: .15s; }
/* chosen keys: segments, chips, shortcut keys, card keys glide between states instead of snapping */
.z-seg button, .zrq-chips button, .zh-cuts button, .zcl-tabs button, .zd-grp button, .zme-keys button, .znb-k, .tk-ch button { transition: background .28s ease, color .28s ease, box-shadow .28s ease, transform .2s ease; }
.z-seg button:active, .zrq-chips button:active, .zh-cuts button:active, .zme-keys button:active { transform: scale(.96); }
/* the edit panel under the Me card opens instead of popping */
.zme-ed.on { animation: zRow .3s cubic-bezier(.2,.8,.2,1) both; }
/* the ID card turns over smoothly when flipped from the Portal Me page */
.zme-card .idc-in { transition: transform .6s cubic-bezier(.2,.8,.2,1) !important; }
@media (prefers-reduced-motion: reduce) { body.app-portal .pz-page.on, .zme-ed.on, #zhBody > *, #zclL > *, .zib-ls > *, .zrq-ls > *, .zj-cards > *, .zev-ls > *, #pzJList > *, .zcl-s > * { animation: none; } }
/* R7-1: a client's JOURNEY / TIMELINE / MONEY in Honjin's language — one clear-glass petal leaf each (22/6/22/6), rows on a rail,
   Akinai's red LED for what is current; no stacked cards or papers */
.zlf { position: relative; border-radius: 22px 6px 22px 6px; color: var(--ink);
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(214,219,228,.06) 45%, rgba(255,255,255,.13));
  -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.35); }
.zled { display: inline-block; flex: none; width: 5px; height: 5px; border-radius: 1px; background: #ff2e4e; box-shadow: 0 0 8px #ff2e4e; }
/* JOURNEY */
.zj-s.zlf, .zcl-s .zj-s.zlf, .zjd .zj-s.zlf { width: auto; box-sizing: border-box; margin: 4px 0 18px; padding: 18px 18px 8px; }
.zj-eb em { height: auto; padding: 0; gap: 7px; border-radius: 0; box-shadow: none !important; color: var(--ink2); }
.zj-eb em.hot { color: #ff2e4e; }
.zj-sq i { width: 9px; height: 9px; border-radius: 1px; background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.zj-sq i.on { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: none; }
.zj-sq i.c { background: #ff2e4e; box-shadow: 0 0 8px #ff2e4e; }
.zj-keys { margin: 16px 0 6px; }
.zj-keys button { height: 44px; border-radius: 22px 6px 22px 6px; background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.2); }
.zj-cards { position: relative; gap: 0; }
.zj-cards::before { content: ""; position: absolute; left: 6px; top: 30px; bottom: 30px; width: 1px; background: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,.12)); }
.zj-card { grid-template-columns: 13px minmax(0, 1fr) auto; column-gap: 14px; row-gap: 0; align-items: center; padding: 13px 0; border-radius: 0;
  background: none !important; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none !important; }
.zj-tick { position: relative; z-index: 1; width: 13px; height: 13px; margin: 0; border-radius: 2px; background: rgba(10,11,14,.7); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.zj-tick svg { width: 11px; height: 11px; stroke: #22262c; stroke-width: 3; }
.zj-card.done .zj-tick { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: none; }
.zj-card.c .zj-tick { background: #ff2e4e; box-shadow: 0 0 10px rgba(255,46,78,.9); }
.zj-card.notready .zj-tick { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.zj-card.notready .zj-tx { opacity: .5; }
.zj-tx { min-width: 0; }
.zj-tx b { font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zj-tx small { margin-top: 5px; font: 500 9px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zj-card.c .zj-tx small { color: #ff2e4e; }
.zj-open { grid-column: auto; height: 30px; padding: 0 12px; border-radius: 7px; font: 500 10px/1 var(--mono); letter-spacing: .16em;
  background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.24); }
.zj-card.you .zj-open { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px rgba(215,23,63,.45); }
/* TIMELINE */
.zsl.zlf { margin: 4px 0 6px; padding: 10px 18px 10px 40px; }
.zsl.zlf::before { left: 22px; top: 28px; bottom: 28px; }
.zsl.zlf div { padding: 11px 0; }
.zsl.zlf div.c { padding: 16px 0; }
.zsl.zlf div::before { left: -22px; border-radius: 1px; }
.zsl.zlf div.c::before { left: -23px; border-radius: 1px; background: #ff2e4e; box-shadow: 0 0 10px rgba(255,46,78,.9); }
.zsl.zlf div:not(.d):not(.c) span { color: var(--ink3); }
/* MONEY */
.zmn { margin: 4px 0 6px; padding: 4px 18px; }
.zmn-r { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid rgba(255,255,255,.12); cursor: pointer; }
.zmn-r:first-child { border-top: 0; }
.zmn-m { width: 9px; height: 9px; border-radius: 1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.zmn-r.dn .zmn-m { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: none; }
.zmn-r.hot .zmn-m { background: #ff2e4e; box-shadow: 0 0 8px #ff2e4e; }
.zmn-t { min-width: 0; }
.zmn-t small { display: block; font: 500 9px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zmn-r.hot .zmn-t small { color: #ff2e4e; }
.zmn-t b { display: block; margin-top: 5px; font: 600 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zmn-r em { font: 700 18px/1 var(--dot); font-style: normal; color: var(--ink); }
/* R7-3: Home — search without a panel; the shortcut keys without panels, on one continuous underline (a slider) */
.zh-search { height: 40px; margin-top: 2px; padding: 0 2px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; color: var(--ink3); }
.zh-cuts { gap: 22px; margin-top: 6px; padding: 0 22px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 22px, rgba(255,255,255,.28) calc(100% - 22px), transparent) left bottom / 100% 1px no-repeat; }
.zh-cuts button { height: 42px; padding: 0; border-radius: 0; background: none; box-shadow: none; color: var(--ink2); }
/* R7-5: Home head — ‹ HONJIN in the keys' petal shape and milk glass, on their row; more air between it, the brandline and Welcome */
.pz-out { height: 38px; margin: 10px 0 0; padding: 0 16px; border: 0; border-radius: 6px 22px 6px 22px; color: var(--ink);
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(214,219,228,.06) 45%, rgba(255,255,255,.13));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.3); }
body.crimson .pz-out { background: linear-gradient(160deg, rgba(226,224,230,.16), rgba(142,15,36,.22) 50%, rgba(215,23,63,.12)); }
.pz-out + .brandline { margin-top: 24px !important; }
.pz-out ~ .zh-hi { margin-top: 10px; }
.zh-search { margin-top: 16px; }
/* R7-15: the bar's four keys centred in the strip (their icon + label sat 9 px low); the crown stays */
body.app-portal .pz-bar .bar-one button:not(.home-k) { position: relative; top: -9px; }
.tk-ov:not(.on) .tk-sheet { transform: translateY(calc(100% + 24px)); }   /* a closed sheet sits fully below the screen (a short empty one's top rim showed as a line along the bottom) */
body .bar { box-shadow: inset 0 1px 0 rgba(255,255,255,.9) !important; }   /* the bar meets the phone's edges: its top hairline only, no rim down the sides and along the bottom */
/* R7-22: Clients — the switch and the search without panels; the two keys petals mirrored by side; a search icon */
.pz-page[data-p="clients"] .z-seg { gap: 10px; padding: 0; background: none; box-shadow: none; border-radius: 0; }
.pz-page[data-p="clients"] .z-seg button { height: 44px; border-radius: 6px 22px 6px 22px;
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(214,219,228,.06) 45%, rgba(255,255,255,.13));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.18); }
.pz-page[data-p="clients"] .z-seg button + button { border-radius: 22px 6px 22px 6px; }
.pz-page[data-p="clients"] .z-seg button.on { background: var(--lit); box-shadow: inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 rgba(215,23,63,.85); }
.zcl-sr { display: flex; align-items: center; gap: 10px; height: 44px; margin: 8px 0 4px; padding: 0 2px; color: var(--ink3); cursor: text; }
.zcl-sr svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zcl-sr .zcl-q { flex: 1; min-width: 0; height: 44px; margin: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* R7-23: Clients — one list: each client (the company) with its contacts under it on a branch line */
.zcl-g { padding: 4px 0 10px; border-top: 1px solid rgba(255,255,255,.12); }
#zclL > .zcl-g:first-child { border-top: 0; }
.zcl-g .zcl-r { border-top: 0; }
.zcl-co .zme-ch { width: 14px; height: 14px; }
.zcl-pp { position: relative; grid-template-columns: 26px minmax(0, 1fr) auto; padding: 8px 2px 8px 46px; }
.zcl-pp::before { content: ""; position: absolute; left: 19px; top: -2px; height: calc(50% + 2px); width: 18px; border-left: 1px solid rgba(255,255,255,.24); border-bottom: 1px solid rgba(255,255,255,.24); border-bottom-left-radius: 6px; pointer-events: none; }
.zcl-pp + .zcl-pp::after { content: ""; position: absolute; left: 19px; top: -50%; height: 50%; border-left: 1px solid rgba(255,255,255,.24); pointer-events: none; }
.zcl-in { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px 3px 8px 3px; font: 600 10px/1 var(--sans); color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.zcl-pp .zh-rt b { font-size: 14px; }
.zcl-pp .zh-rt small { font-size: 12px; }
/* R7-24 TIMELINE — the stages on time: the stage you are in, then tiles as tall as their days, today's line on the current one */
.ztl-hd { padding: 6px 2px 20px; }
.ztl-hd small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .18em; color: var(--ink3); }
.ztl-hd b { display: block; margin-top: 10px; font: 400 24px/1.1 var(--display); letter-spacing: .02em; color: var(--ink); }
.ztl-hd span { display: block; margin-top: 9px; font: 500 15px/1 var(--dot); color: var(--ink2); }
.ztl-hd em { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .16em; color: #ff2e4e; }
.ztl-hd em::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: #ff2e4e; box-shadow: 0 0 8px #ff2e4e; }
.ztl-col { display: flex; flex-direction: column; gap: 6px; padding-bottom: 6px; }
.ztl-b { position: relative; flex: none; height: var(--h); box-sizing: border-box; padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; overflow: hidden;
  border-radius: 22px 6px 22px 6px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); transition: transform .3s cubic-bezier(.2,.9,.25,1.05); }
.ztl-b:nth-child(even) { border-radius: 6px 22px 6px 22px; }
.ztl-b b { font: 600 14px/1.2 var(--sans); color: var(--ink3); }
.ztl-b span { font: 500 9px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.ztl-b.d { background: linear-gradient(165deg, rgba(220,224,232,.32), rgba(150,156,168,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.22); }
.ztl-b.d b { color: var(--ink); }
.ztl-b.d span { color: var(--ink2); }
.ztl-b.c { touch-action: none; cursor: grab; transition: none; color: #fff;
  background: radial-gradient(110% 80% at 20% 0%, rgba(255,190,200,.32), transparent 60%), linear-gradient(160deg, rgba(215,23,63,.62), rgba(142,15,36,.58) 60%, rgba(255,46,78,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,140,160,.5), 0 10px 26px rgba(215,23,63,.22); }
body.crimson .ztl-b.c { background: radial-gradient(110% 80% at 20% 0%, rgba(226,224,230,.22), transparent 60%), linear-gradient(160deg, rgba(142,15,36,.64), rgba(126,0,32,.62) 55%, rgba(167,15,40,.56)); }
.ztl-b.c b { font: 400 17px/1.2 var(--display); letter-spacing: .02em; color: #fff; }
.ztl-b.c span { color: rgba(255,255,255,.82); }
.ztl-now { position: absolute; left: 0; right: 0; top: var(--now); height: 1px; background: rgba(255,255,255,.85); }
.ztl-now::before { content: ""; position: absolute; left: 14px; top: -3px; width: 7px; height: 7px; border-radius: 1px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.9); }
.ztl-now em { position: absolute; right: 16px; top: -15px; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .16em; color: #fff; }
/* R7-24 JOURNEY — what's next: the current step as a big crimson leaf, the steps as a track of tokens under it */
.zjr, .zcl-s .zjr, .zjd .zjr { width: auto; padding: 0; margin: 4px 0 26px; }
.zjr .zj-eb { display: flex; align-items: center; }
.zjr-n { margin-left: auto; font: 700 15px/1 var(--dot); letter-spacing: 0; color: var(--ink); }
.zjr-n i { font-style: normal; margin: 0 2px; color: var(--ink3); }
.zjr-now { position: relative; margin-top: 16px; padding: 18px; min-height: 96px; box-sizing: border-box; border-radius: 22px 6px 22px 6px; cursor: pointer; color: #fff;
  background: radial-gradient(110% 80% at 20% 0%, rgba(255,190,200,.32), transparent 60%), linear-gradient(160deg, rgba(215,23,63,.62), rgba(142,15,36,.58) 60%, rgba(255,46,78,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,140,160,.5), 0 14px 30px rgba(215,23,63,.22); }
body.crimson .zjr-now { background: radial-gradient(110% 80% at 20% 0%, rgba(226,224,230,.22), transparent 60%), linear-gradient(160deg, rgba(142,15,36,.64), rgba(126,0,32,.62) 55%, rgba(167,15,40,.56)); }
.zjr-now small { display: block; font: 500 9px/1 var(--mono); letter-spacing: .16em; color: rgba(255,255,255,.82); }
.zjr-now b { display: block; margin-top: 10px; padding-right: 100px; font: 600 19px/1.25 var(--sans); }
.zjr-go { position: absolute; right: 16px; bottom: 16px; height: 34px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 14px 4px 14px 4px;
  font: 500 10px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: #22262c; background: linear-gradient(180deg, #f6f7fa, #c9ced8); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0,0,0,.25); }
.zjr-now.done { cursor: default; background: linear-gradient(165deg, rgba(220,224,232,.32), rgba(150,156,168,.18)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 0 0 1px rgba(255,255,255,.22); }
.zjr-track { display: flex; gap: 6px; margin: 22px -22px 0; padding: 0 22px 4px; overflow-x: auto; scrollbar-width: none; }
.zjr-track::-webkit-scrollbar { display: none; }
.zjr-t { position: relative; flex: none; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; }
.zjr-t + .zjr-t::before { content: ""; position: absolute; top: 20px; left: -19px; width: 32px; height: 1px; background: rgba(255,255,255,.3); }
.zjr-t i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 14px 4px 14px 4px; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--ink2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); }
.zjr-t:nth-child(even) i { border-radius: 4px 14px 4px 14px; }
.zjr-t i svg { width: 16px; height: 16px; fill: none; stroke: #22262c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zjr-t.done i { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: none; }
.zjr-t.c i { color: #fff; background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 14px rgba(215,23,63,.55); }
.zjr-t.notready i { opacity: .5; }
.zjr-t span { width: 100%; font: 500 10.5px/1.25 var(--sans); color: var(--ink3); text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zjr-t.done span { color: var(--ink2); }
.zjr-t.c span { color: var(--ink); }
.zjr-keys { display: flex; justify-content: center; gap: 34px; margin-top: 20px; }
.zjr-keys button { height: 36px; padding: 0 4px; border: 0; background: none; font: 600 13px/1 var(--sans); color: var(--ink2); cursor: pointer; }
.zjr-keys .zj-x { color: #ff2e4e; }
/* R7-25 JOURNEY — one organic diagonal curve through the journey, scrolling on its own; the timeline HUD pinned under it */
.zjp, .zcl-s .zjp, .zjd .zjp { width: auto; padding: 0; margin: 4px 0 14px; }
.zjp .zj-eb { display: flex; align-items: center; }
.zjp-sc { position: relative; height: 46vh; min-height: 300px; margin: 12px -22px 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  -webkit-mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 36px), transparent); mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 36px), transparent); }
.zjp-sc::-webkit-scrollbar { display: none; }
.zjd .zjp-sc { height: 62vh; }
.zjp-in { position: relative; margin: 0 22px; }
.zjp-svg { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.zjp-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.zjp-svg .all { stroke: rgba(255,255,255,.26); stroke-width: 1.5; stroke-dasharray: 2 7; }
.zjp-svg .lit { stroke: rgba(240,242,246,.92); stroke-width: 2.2; filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); }
.zjp-n { position: absolute; width: 40px; height: 40px; margin: -20px 0 0 -20px; padding: 0; border: 0; background: none; cursor: pointer; z-index: 1; }
.zjp-n > i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 14px 4px 14px 4px; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: .08em; color: var(--ink2);
  background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 0 0 1px rgba(255,255,255,.24); }
.zjp-n.r > i { border-radius: 4px 14px 4px 14px; }
.zjp-n > i svg { width: 16px; height: 16px; fill: none; stroke: #22262c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zjp-n.done > i { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0,0,0,.25); }
.zjp-n.notready > i { opacity: .55; }
.zjp-n.c { width: 54px; height: 54px; margin: -27px 0 0 -27px; z-index: 2; }
.zjp-n.c > i { font-size: 10px; color: #fff; border-radius: 18px 5px 18px 5px; background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 6px rgba(215,23,63,.14), 0 0 26px rgba(215,23,63,.6); }
.zjp-n.c.r > i { border-radius: 5px 18px 5px 18px; }
.zjp-l { position: absolute; top: 50%; width: 150px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 5px; text-align: left; pointer-events: none; }
.zjp-n.l .zjp-l { left: calc(100% + 14px); }
.zjp-n.r .zjp-l { right: calc(100% + 14px); text-align: right; align-items: flex-end; }
.zjp-l b { font: 600 14px/1.25 var(--sans); color: var(--ink); }
.zjp-l small { font: 500 8.5px/1.2 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.zjp-n.done .zjp-l b { color: var(--ink2); }
.zjp-n.notready .zjp-l { opacity: .55; }
.zjp-l.now { width: 168px; padding: 14px 16px; box-sizing: border-box; gap: 8px; border-radius: 22px 6px 22px 6px; color: #fff;
  background: radial-gradient(110% 80% at 20% 0%, rgba(255,190,200,.32), transparent 60%), linear-gradient(160deg, rgba(215,23,63,.62), rgba(142,15,36,.58) 60%, rgba(255,46,78,.5));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,140,160,.5), 0 14px 30px rgba(215,23,63,.22); }
.zjp-n.r .zjp-l.now { border-radius: 6px 22px 6px 22px; }
body.crimson .zjp-l.now { background: radial-gradient(110% 80% at 20% 0%, rgba(226,224,230,.22), transparent 60%), linear-gradient(160deg, rgba(142,15,36,.64), rgba(126,0,32,.62) 55%, rgba(167,15,40,.56)); }
.zjp-l.now small { color: rgba(255,255,255,.82); }
.zjp-l.now b { font-size: 16px; color: #fff; }
.zjp-l.now em { align-self: flex-start; height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 12px 4px 12px 4px; font: 500 9.5px/1 var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: #22262c; background: linear-gradient(180deg, #f6f7fa, #c9ced8); box-shadow: inset 0 1px 0 #fff, 0 6px 14px rgba(0,0,0,.25); }
.zjp-n.r .zjp-l.now em { align-self: flex-end; }
.zjp-keys { position: absolute; left: 0; right: 0; margin: 0; }
/* the timeline HUD */
.zhud { margin: 4px 0 6px; padding: 14px 16px 16px; border-radius: 22px 6px 22px 6px;
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(214,219,228,.06) 45%, rgba(255,255,255,.13));
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.3); }
.zhud-t { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 12px; row-gap: 6px; }
.zhud-t b { font: 400 15px/1.1 var(--display); letter-spacing: .02em; color: var(--ink); }
.zhud-t em { display: inline-flex; align-items: center; gap: 6px; font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: .14em; color: #ff2e4e; }
.zhud-t em::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: #ff2e4e; box-shadow: 0 0 8px #ff2e4e; }
.zhud-t span { margin-left: auto; font: 500 8.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); }
.zhud-bar { position: relative; display: flex; gap: 3px; height: 12px; margin-top: 14px; }
.zhud-s { min-width: 8px; height: 100%; padding: 0; border: 0; border-radius: 3px; cursor: default; box-shadow: inset 0 0 0 1px rgba(255,255,255,.26); background: none; }
.zhud-s:first-child { border-radius: 6px 3px 3px 6px; }
.zhud-s:last-child { border-radius: 3px 6px 6px 3px; }
.zhud-s.d { background: linear-gradient(180deg, #f2f4f8, #aeb4bf); box-shadow: none; }
.zhud-s.c { background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: 0 0 10px rgba(215,23,63,.5); }
.zhud-s.nx { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.zhud-now { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.9); pointer-events: none; }
.zhud-now em { position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%); font: 500 8px/1 var(--mono); font-style: normal; letter-spacing: .16em; color: var(--ink2); white-space: nowrap; }
.zhud { padding-bottom: 26px; }
.zcl-jy .zjp-sc { height: calc(100vh - 530px); min-height: 220px; }   /* the curve's scroller ends so the HUD sits whole above the bar */
/* R7-26: no white solids on the journey curve and its HUD — silver glass with lit rims, white ticks and text */
.zjp-n.done > i { background: linear-gradient(160deg, rgba(240,242,246,.42), rgba(174,180,191,.18)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.42), 0 6px 14px rgba(0,0,0,.22); }
.zjp-n.done > i svg { stroke: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.zjp-l.now em { color: #fff; background: linear-gradient(160deg, rgba(255,255,255,.3), rgba(255,255,255,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.4); text-shadow: 0 1px 2px rgba(0,0,0,.3); }
.zhud-s.d { background: linear-gradient(180deg, rgba(240,242,246,.5), rgba(174,180,191,.24)); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(255,255,255,.4); }
/* R7-27: a client's head — the seal, Message and View as client up on the back key's row (top right); centred tabs */
.pz-det .zcl-hd { position: absolute; top: 14px; right: 22px; height: 38px; margin: 0; gap: 12px; }
.pz-det .zcl-hd .z-seal { width: 34px; height: 34px; font-size: 11px; }
.pz-det .zcl-hd .z-keys button { padding: 0 2px; }
.zcl-tabs { justify-content: center; gap: 30px; margin: 22px 0 12px; }
/* R8-1 JOURNEY on the diagonal: the curve runs top-left → bottom-right; a vertical swipe pans it along the diagonal and rests on a step */
.zjp-dg .zjp-sc { scroll-snap-type: y mandatory;
  -webkit-mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 36px), transparent), linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 36px), transparent), linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  mask-composite: intersect; }
.zjp-sp0 { display: block; height: 0; scroll-snap-align: start; }
.zjp-sp { display: block; height: 112px; scroll-snap-align: end; }
.zjp-st { position: sticky; top: 0; height: 100%; overflow: hidden; }
.zjp-dg .zjp-in { position: absolute; left: 0; top: 0; width: 0; height: 0; margin: 0; will-change: transform; }
.zjp-dg .zjp-svg { overflow: visible; }
.zjp-dg .zjp-l { top: auto; bottom: 14px; transform: none; width: 140px; }
.zjp-dg .zjp-n.c .zjp-l { bottom: 21px; width: 168px; }
.zjp-dg .zjp-n.l .zjp-l { left: calc(100% + 12px); }
.zjp-dg .zjp-keys { right: auto; gap: 24px; white-space: nowrap; }
/* R8-1 the HUD names its stages: each name hangs under its segment on a leader line, two staggered rows; TODAY moves above the bar */
.zhud { padding-bottom: 14px; }
.zhud-bar { margin: 24px 0 30px; }
.zhud-s { position: relative; }
.zhud-s > span { position: absolute; top: calc(100% + 3px); left: 0; padding: 4px 0 0 4px; border-left: 1px solid rgba(255,255,255,.28); font: 500 8.5px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); white-space: nowrap; pointer-events: none; }
.zhud-s.lo > span { padding-top: 16px; }
.zhud-s.rt > span { left: auto; right: 0; padding: 4px 4px 0 0; border-left: 0; border-right: 1px solid rgba(255,255,255,.28); }
.zhud-s.lo.rt > span { padding-top: 16px; }
.zhud-s.d > span { color: var(--ink2); }
.zhud-s.c > span { color: #ff2e4e; border-color: rgba(255,46,78,.7); }
.zhud-now em { top: auto; bottom: calc(100% + 4px); }
.zcl-jy .zjp-sc { height: calc(100vh - 558px); }
/* R8-2 a client's tabs BILLING · JOURNEY · PEOPLE: the chosen one underlined (silver; crimson in ZASHFIRE Crimson) instead of the LED */
.zcl-tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 1.5px; margin: 0; border-radius: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.35), #fff 50%, rgba(255,255,255,.35)); box-shadow: 0 0 8px rgba(255,255,255,.55); transform: scaleX(0); transition: transform .28s ease; }
.zcl-tabs button.on::after { left: 0; width: auto; height: 1.5px; margin: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.35), #fff 50%, rgba(255,255,255,.35)); box-shadow: 0 0 8px rgba(255,255,255,.55); transform: scaleX(1); }
body.crimson .zcl-tabs button::after, body.crimson .zcl-tabs button.on::after { background: linear-gradient(90deg, rgba(255,46,78,.45), #ff2e4e 50%, rgba(255,46,78,.45)); box-shadow: 0 0 8px rgba(255,46,78,.7); }

/* R8-3 the HUD small and calm: no head line, an 8 px bar, names above (1/3/5) and below (2/4/6), low above the Home key */
.zhud { margin: 4px 0 0; padding: 10px 14px; border-radius: 16px 5px 16px 5px; }
.zhud-bar { height: 8px; margin: 15px 0; }
.zhud-s > span, .zhud-s.lo > span, .zhud-s.rt > span, .zhud-s.lo.rt > span { padding: 0; border: 0; }
.zhud-s > span { top: auto; bottom: calc(100% + 5px); }
.zhud-s.lo > span { top: calc(100% + 5px); bottom: auto; }
.zhud-s > span b { font: 700 9px/1 var(--dot); letter-spacing: 0; color: #ff2e4e; }
.zhud-now { top: -3px; bottom: -3px; }
.zcl-jy .zjp-sc { height: calc(100vh - 457px); min-height: 260px; }

/* R8-4 "+ Add step" fixed in the journey's empty bottom-left corner (petal glass key); Cancel journey stays at the curve's end */
.zjp-dg { position: relative; }
.zjp-add { position: absolute; left: 0; bottom: 44px; z-index: 3; height: 34px; padding: 0 14px; border: 0; border-radius: 6px 18px 6px 18px; font: 600 13px/1 var(--sans); color: var(--ink); cursor: pointer;
  background: linear-gradient(160deg, rgba(255,255,255,.20), rgba(214,219,228,.06) 45%, rgba(255,255,255,.13)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.3); }
body.crimson .zjp-add { background: linear-gradient(160deg, rgba(226,224,230,.16), rgba(142,15,36,.22) 50%, rgba(215,23,63,.12)); }
.zjp-add:active { transform: scale(.96); }

/* R7-28: every key and row in the Portal presses in and springs back; the journey's steps settle in when it draws */
.pz-page :is(button, .zmn-r), .pz-det :is(button, .zmn-r) { transition: transform .32s cubic-bezier(.2,.9,.25,1.2), opacity .3s ease; }
.pz-page :is(button, .zmn-r):active, .pz-det :is(button, .zmn-r):active { transform: scale(.95); }
.pz-page :is(.zh-row, .zcl-r):active, .pz-det :is(.zh-row, .zcl-r, .zmn-r):active { transform: scale(.985); }
.zjp-n:active { transform: scale(.9); }
@keyframes zjpIn { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
@keyframes zjpLabel { from { opacity: 0; } to { opacity: 1; } }
.zjp-n > i { animation: zjpIn .5s cubic-bezier(.2,.9,.25,1.2) backwards; }
.zjp-n .zjp-l { animation: zjpLabel .45s ease backwards; }
.zjp-n:nth-child(2) > i, .zjp-n:nth-child(2) .zjp-l { animation-delay: .04s; }
.zjp-n:nth-child(3) > i, .zjp-n:nth-child(3) .zjp-l { animation-delay: .08s; }
.zjp-n:nth-child(4) > i, .zjp-n:nth-child(4) .zjp-l { animation-delay: .12s; }
.zjp-n:nth-child(5) > i, .zjp-n:nth-child(5) .zjp-l { animation-delay: .16s; }
.zjp-n:nth-child(n+6) > i, .zjp-n:nth-child(n+6) .zjp-l { animation-delay: .2s; }
@keyframes zhudIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.zhud { animation: zhudIn .45s cubic-bezier(.2,.9,.25,1.05) backwards; }

/* R8-5 "+ Add step" without a panel, top right of the journey on the title's row */
.zjp-add { top: 20px; right: 0; left: auto; bottom: auto; height: 34px; padding: 0 2px; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; font: 600 13px/1 var(--sans); color: var(--ink2); }
body.crimson .zjp-add { background: none; }
.zjp-dg .zj-t { padding-right: 104px; }
/* R8-6 Message on a client's head = Honjin's Talk bubble */
.zcl-hd .zcl-msg { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; color: var(--ink); }
.zcl-hd .zcl-msg svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* R8-7 the seal beside the client's name; two icon keys top right; the step count on the large petal */
.tp-h.zcl-tt { display: flex; align-items: center; gap: 12px; }
.zcl-tt .z-seal { flex: none; width: 38px; height: 38px; font-size: 12px; }
.pz-det .zcl-hd .z-keys { gap: 10px; }
.zjp-k { margin-right: 8px; font: 700 11px/1 var(--dot); font-style: normal; letter-spacing: 0; color: #fff; }
body.app-portal .pz-bar .bar-sc { top: -8px; height: 68px; padding-top: 8px; }   /* R8-8 the bar's clip edge 8 px higher, keys unmoved, so the LED fits above the icon */
body.app-portal .pz-bar .bar-one button.on:not(.home-k)::before { top: 2px; }
/* R8-9 DIAGONAL · VERTICAL switch on the journey's eyebrow row; the vertical look keeps today's head keys; HUD stage names are tappable */
.zjp-mode { margin-left: auto; display: inline-flex; gap: 12px; }
.zjp-mode button { position: relative; height: 22px; padding: 0; border: 0; background: none; font: 500 8.5px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); cursor: pointer; }
.zjp-mode button.on { color: var(--ink); }
.zjp-mode button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; background: rgba(255,255,255,.8); }
body.crimson .zjp-mode button.on::after { background: #ff2e4e; }
.zjp-vt { position: relative; }
.zjp-vt .zj-t { padding-right: 104px; }
.zhud .zhud-s > span[data-zjump] { pointer-events: auto; cursor: pointer; padding: 6px 4px; margin: -6px -4px; }
/* R8-10 "+ Add step" lower: top right of the curve area, off the title's row */
.zjp-add { top: 70px; z-index: 4; }
.zjp-dg .zj-t, .zjp-vt .zj-t { padding-right: 0; }
/* R8-11 the look switch as two small lines */
.zjp-mode { gap: 4px; }
.zjp-mode button { width: 22px; display: inline-grid; place-items: center; }
.zjp-mode svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.zjp-mode button.on::after { left: 4px; right: 4px; bottom: 0; }
/* R8-12 CLIENT ONBOARDING — the invite's four steps on a contact, the Sent sheet, the client's join page */
.zpp .zinv-m { position: relative; display: flex; justify-content: space-between; width: 58px; margin: 9px auto 0; }
.zpp .zinv-m::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.22); }
.zpp .zinv-m > i { position: relative; width: 6px; height: 6px; border-radius: 1px; background: rgba(20,22,26,.9); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.zpp .zinv-m > i.on { background: #e9ecf1; box-shadow: 0 0 6px rgba(255,255,255,.5); }
.zpp .zinv-m > i.nx { background: #f3b23a; box-shadow: 0 0 8px rgba(243,178,58,.8); }
.zpp .zinv-st { display: block; margin-top: 6px; font: 500 8px/1.2 var(--mono); font-style: normal; letter-spacing: .12em; color: #f3b23a; }
.zinv-card { display: flex; justify-content: center; margin: 14px 0 6px; }
.zinv-rows { margin-top: 8px; }
.zinv-r { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.14); }
.zinv-dot { flex: none; width: 7px; height: 7px; border-radius: 1px; background: rgba(255,255,255,.25); }
.zinv-dot.on { background: #ff2e4e; box-shadow: 0 0 8px #ff2e4e; }
.zinv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.zinv-t b { font: 600 15px/1.2 var(--sans); color: #fff; }
.zinv-t span { font: 500 9px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(244,246,249,.7); }
.zinv-k { display: flex; gap: 8px; }
.zinv-k button { height: 32px; padding: 0 12px; border: 0; border-radius: 6px 14px 6px 14px; font: 600 12px/1 var(--sans); color: #fff; cursor: pointer;
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(255,255,255,.2); }
.zinv-qr { flex: none; width: 76px; height: 76px; padding: 4px; box-sizing: border-box; border-radius: 6px; background: #f2f3f6; }
.zinv-qr svg { display: block; width: 100%; height: 100%; }
.zinv-code { display: flex; align-items: baseline; justify-content: space-between; margin: 6px 0 4px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.zinv-code span { font: 500 9px/1 var(--mono); letter-spacing: .16em; color: rgba(244,246,249,.7); }
.zinv-code b { font: 700 30px/1 var(--dot); letter-spacing: .06em; color: #fff; }
.zjn { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 20px; }
.zjn-card { display: flex; justify-content: center; margin: -4px 0 4px; }
.zjn-card .idc-l { opacity: 1; }
.zjn-p { margin: 6px 0 0; font: 500 15px/1.4 var(--sans); color: var(--ink); }
.zjn-p.sm { font: 500 9.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.zjn-lbl { align-self: stretch; margin: 26px 0 10px; text-align: left; font: 500 9.5px/1 var(--mono); letter-spacing: .16em; color: var(--ink3); }
.zjn-app { align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
.zjn-app img { width: 46px; height: 46px; border-radius: 8px; }
.zjn-app b { display: block; font: 400 14px/1 var(--display); letter-spacing: .06em; }
.zjn-app span { display: block; margin-top: 6px; font: 500 13px/1.3 var(--sans); color: var(--ink2); }
.zjn-steps { align-self: stretch; margin: 0; padding: 6px 16px; list-style: none; text-align: left; }
.zjn-steps li { display: flex; align-items: center; gap: 14px; min-height: 50px; border-top: 1px solid rgba(255,255,255,.12); }
.zjn-steps li:first-child { border-top: 0; }
.zjn-steps i { flex: none; width: 24px; font: 700 16px/1 var(--dot); font-style: normal; color: var(--ink2); }
.zjn-steps span { flex: 1; font: 500 14px/1.35 var(--sans); color: var(--ink); }
.zjn-steps em svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.zjn-code { margin-top: 22px; font: 700 44px/1 var(--dot); letter-spacing: .08em; color: var(--ink); }
.zjn-new { margin-top: 12px; height: 36px; padding: 0 4px; border: 0; background: none; font: 600 13px/1 var(--sans); color: var(--ink2); cursor: pointer; }
/* R8-14 client invites without an ID card; the portal's web address first */
.zinv-who { display: flex; align-items: center; gap: 10px; margin: 10px 0 6px; font: 500 9px/1.2 var(--mono); letter-spacing: .14em; color: rgba(244,246,249,.7); }
.zinv-who .z-seal { width: 30px; height: 30px; font-size: 10px; }
.zinv-url { text-transform: none !important; letter-spacing: .02em !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zjn-mark { width: 120px; height: auto; margin: 4px 0 6px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.45)); }
.zjn-web { align-self: stretch; display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
.zjn-web > div { flex: 1; min-width: 0; }
.zjn-web b { display: block; font: 600 15px/1.2 var(--sans); color: var(--ink); overflow-wrap: anywhere; }
.zjn-web span { display: block; margin-top: 6px; font: 500 9px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.zjn-web button { flex: none; height: 36px; padding: 0 16px; border: 0; border-radius: 6px 16px 6px 16px; font: 600 13px/1 var(--sans); color: #fff; cursor: pointer;
  background: linear-gradient(160deg, #d7173f, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 6px 16px rgba(215,23,63,.3); }
.zjn-app + .zjn-steps { margin-top: 10px; }
/* R8-29 Create › Folder: the colour swatches */
.tk-ch.zsw-row { gap: 10px; }
.tk-ch .zsw { width: 34px; height: 34px; min-width: 0; padding: 0; border-radius: 8px; background: var(--sw) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35) !important; }
.tk-ch .zsw.on { box-shadow: inset 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.45) !important; }
/* R9-1 the Files hold menu: Honjin's chat fan (.cv-ov.tfan .fp) over the whole screen, its glass slips (.cv-slip.cb-slip) */
.cv-ov.zhm { position: fixed; inset: 0; z-index: 200; --mk-cv: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 160'%3E%3Cpath d='M70%20158%20C%2056%20146%2C%208%2098%2C%205%2056%20C%200%2020%2C%2028%202%2C%2070%202%20C%20112%202%2C%20140%2020%2C%20135%2056%20C%20132%2098%2C%2084%20146%2C%2070%20158%20Z'/%3E%3C/svg%3E"); }
.zhm-tag { position: absolute; transform: translateX(-50%); width: 200px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; pointer-events: none; opacity: 0; transition: opacity .25s .12s; }
.cv-ov.zhm.on .zhm-tag { opacity: 1; }
.zhm-tag span { font: 500 9.5px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.zhm-tag b { font: 600 15px/1.2 var(--sans); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.zhm-slip { z-index: 2; }
.zhm-slip > * { position: relative; z-index: 1; }
.zhm-in { display: block; width: 100%; box-sizing: border-box; height: 42px; margin: 10px 0 12px; padding: 0 12px; border: 0; border-radius: 8px; background: rgba(255,255,255,.4); box-shadow: inset 0 0 0 1px rgba(36,32,31,.18); font: 500 15px/1 var(--sans); color: inherit; outline: none; -webkit-user-select: text; user-select: text; }
.zhm-in:focus { box-shadow: inset 0 0 0 1.5px #d7173f; }
.zhm-sw { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.zhm-sw .zsw { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); cursor: pointer; }
.zhm-sw .zsw.on { box-shadow: inset 0 0 0 2px #fff, 0 0 12px rgba(255,255,255,.45); }
.zhm-lb { display: block; margin: 12px 0 6px; font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.zhm-pp { display: flex; flex-wrap: wrap; gap: 6px; }
.zhm-p { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 4px; border: 0; border-radius: 8px; background: rgba(0,0,0,.06); box-shadow: inset 0 0 0 1px rgba(36,32,31,.16); color: inherit; font: 500 13px/1 var(--sans); cursor: pointer; transition: background .28s ease, color .28s ease, box-shadow .28s ease; }
.zhm-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: rgba(36,32,31,.1); font: 700 11px/1 var(--dot); }
.zhm-p.on { color: #22262c; background: linear-gradient(160deg, #f4f6fa, #c9ced8 55%, #9aa1ae); box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(255,255,255,.45); }
body.crimson .zhm-p.on { color: #fff; background: linear-gradient(160deg, #ff2e4e, #d7173f 55%, #8e0f24); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 12px rgba(215,23,63,.5); }
.zhm-p.on .zhm-av { background: rgba(255,255,255,.35); }
.zhm-q { margin: 10px 0 12px; font: 500 14px/1.35 var(--sans); }
/* R9-2 the hold menu on the Portal's own rows: no callout or text pick on a press; the held row lifts */
[data-zh] { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.zhm-held { position: relative; }   /* R9-5 no box round the held row: the flower marks it */
/* R9-4 the hold menu is Akinai's flower (bizlab dash Petal.tsx / dashboard.css .db-petal, glass.css .glass.pale): milk-glass petals round
   a glowing point, springing out one after another, labels upright; Delete (and a hovered petal) in Akinai's red */
.cv-ov.zhm { --zf-spring: cubic-bezier(.34, 1.4, .5, 1); --zf-ease: cubic-bezier(.2, .8, .2, 1); }
.zhf-p { position: absolute; padding: 0; border: 0; transform-origin: 50% 100%; opacity: 0; pointer-events: none; color: #f6f1f2; cursor: pointer; isolation: isolate;
  transform: scale(.2) rotate(var(--a));
  transition: transform .45s var(--zf-spring), opacity .3s var(--zf-ease), filter .25s var(--zf-ease);
  background: radial-gradient(80% 60% at 50% 25%, rgba(255,255,255,.94), rgba(240,238,244,.88) 60%, rgba(220,216,226,.84));
  -webkit-backdrop-filter: none; backdrop-filter: none;   /* R9-6 each petal's blur smeared the petal under it and the dark room at its edges: shadows */
  box-shadow: none; }   /* R9-5 no box shadows: clipped to the petal they drew straight box edges across it */
.zhf-p::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: -1; background: var(--grain); opacity: .35; mix-blend-mode: overlay; }
.cv-ov.zhm.on .zhf-p { opacity: 1; pointer-events: auto; transform: rotate(var(--a)); }
.cv-ov.zhm:not(.on) .zhf-p { transition-delay: 0s !important; }
.zhf-p.hot, .zhf-p:hover { background: radial-gradient(80% 60% at 50% 30%, rgba(255,170,185,.96), rgba(255,46,78,.92) 60%, rgba(142,15,36,.9)); }
.cv-ov.zhm.on .zhf-p:hover { filter: brightness(1.08); transform: rotate(var(--a)) scale(1.04); }
.zhf-in { position: absolute; left: 50%; top: 38%; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; color: #f6f1f2; pointer-events: none; }
.zhf-in svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.zhf-in em { font: 500 8.5px/1.3 var(--mono); font-style: normal; letter-spacing: .2em; text-transform: uppercase; color: #2b2f36; }
.zhf-p:not(.hot):not(:hover) .zhf-in { color: #2b2f36; }
.zhf-p.hot .zhf-in em, .zhf-p:hover .zhf-in em { color: #fff; }
.zhf-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 22px 8px rgba(255,220,228,.9); pointer-events: none; z-index: 3;
  opacity: 0; transform: scale(.2); transition: transform .45s var(--zf-spring), opacity .3s var(--zf-ease); }
.cv-ov.zhm.on .zhf-dot { opacity: 1; transform: none; }

/* R9-7 every folder glyph is clear glass tinted with its folder's colour (Akinai Files' clear folders), never solid paint */
.z-glyph::before { background: color-mix(in srgb, var(--c) 72%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.z-glyph::after { background: linear-gradient(170deg, color-mix(in srgb, color-mix(in srgb, var(--c), white 32%) 58%, transparent), color-mix(in srgb, var(--c) 30%, transparent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65), inset 0 0 0 1px color-mix(in srgb, color-mix(in srgb, var(--c), white 45%) 75%, transparent);
  -webkit-backdrop-filter: blur(6px) saturate(1.4); backdrop-filter: blur(6px) saturate(1.4); }
/* R9-8 the folder card (ZASHFIRE Files' .fd-card at 170 × 230, scaled by --s): clear glass in the folder's colour at 60 %, sheets, band, rim */
.z-fcard { --fs: .155; flex: none; position: relative; display: block; width: calc(170px * var(--fs)); height: calc(230px * var(--fs)); }
.zfc-in { position: absolute; left: 0; top: 0; width: 170px; height: 230px; transform: scale(var(--fs)); transform-origin: 0 0; }
.zfc-face { position: absolute; inset: 0;
  clip-path: path("M0 10 Q0 0 10 0 L64 0 Q71 0 74 5 L79 11 Q82 16 89 16 L160 16 Q170 16 170 26 L170 220 Q170 230 160 230 L10 230 Q0 230 0 220 Z");
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,255,255,.34), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--c) 60%, transparent), color-mix(in srgb, color-mix(in srgb, var(--c), black 35%) 55%, transparent) 60%, color-mix(in srgb, color-mix(in srgb, var(--c), white 15%) 48%, transparent)); }
.zfc-sheets { position: absolute; left: 25px; top: 24px; width: 120px; height: 50px; }
.zfc-sheets i { position: absolute; left: 0; width: 120px; height: 38px; border-radius: 6px;
  background: repeating-linear-gradient(180deg, rgba(43,13,20,.14) 0 3px, transparent 3px 9px) 10px 8px / calc(100% - 20px) calc(100% - 12px) no-repeat, rgba(255,255,255,.6); }
.zfc-sheets i:nth-child(1) { top: 0; transform: rotate(-2deg); }
.zfc-sheets i:nth-child(2) { top: 6px; transform: rotate(1deg); }
.zfc-sheets i:nth-child(3) { top: 12px; transform: rotate(-1deg); }
.zfc-band { position: absolute; left: 0; right: 0; top: 60px; bottom: 0; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.06)); box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.zfc-rim { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; fill: none; stroke: rgba(230,236,245,.5); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.zfc-rim path { vector-effect: non-scaling-stroke; }
body.app-portal .pz-bar .bar-sc.bar-one { padding-left: 0 !important; padding-right: 0 !important; overflow-x: hidden !important; scroll-snap-type: none !important; }   /* R9-12 Honjin's strip padding (R8-21) made the Portal's 4 keys scroll */