.staff-page{--so-bg:#141920;--so-surface:#1b222d;--so-inset:#11161e;--so-text:#f6f7fa;--so-muted:#b0b8c6;--so-line:#303b4b;--so-lime:#c6f56f;--so-purple:#b497ff;--so-blue:#7ac9f7;background:var(--so-bg);color:var(--so-text);overflow:hidden}
html[data-theme="light"] .staff-page{--so-bg:#f6f8fb;--so-surface:#fff;--so-inset:#f0f3f8;--so-text:#202631;--so-muted:#5e6878;--so-line:#dce2eb;--so-lime:#547a1e;--so-purple:#7043c4;--so-blue:#087abe}
.staff-page h1,.staff-page h2,.staff-page h3,.staff-page h4,.staff-page strong{color:var(--so-text)}.staff-page p{color:var(--so-muted);line-height:1.7}.staff-page .pill-label{background:var(--so-surface);border:1px solid var(--so-line);color:var(--so-lime)}.staff-page .button-outline{color:var(--so-text);border-color:var(--so-line)}
.staff-hero{padding:165px 0 80px;background:radial-gradient(ellipse at 78% 42%,rgba(127,84,244,.16),transparent 42%),radial-gradient(ellipse at 18% 5%,rgba(198,245,111,.06),transparent 44%)}.staff-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.95fr);gap:65px;align-items:center}.staff-hero-copy h1{font-size:clamp(45px,5.5vw,72px);font-weight:500;letter-spacing:-.06em;line-height:1.04;margin:27px 0}.staff-hero-copy h1 em{display:block;color:var(--so-purple);font-style:normal}.staff-hero-copy>p{max-width:570px;font-size:17px}.staff-hero-copy .hero-actions{margin-top:29px;flex-wrap:wrap}.staff-live-pill{display:inline-flex;align-items:center;gap:9px;margin-top:24px;padding:8px 12px;border:1px solid var(--so-line);border-radius:30px;color:var(--so-muted);font-size:11px}.staff-live-pill i,.staff-live-label i{width:7px;height:7px;background:#55cf98;border-radius:50%;box-shadow:0 0 12px #55cf9870}
.staff-hero-art{height:410px;position:relative;display:grid;place-items:center}.staff-orbit{position:absolute;border:1px solid #b497ff37;border-radius:50%;transform:rotate(-25deg)}.staff-orbit-one{width:420px;height:230px}.staff-orbit-two{width:340px;height:335px;transform:rotate(55deg);border-color:#c6f56f28}.staff-center{position:relative;z-index:2;width:120px;height:120px;border:1px solid #b497ff85;border-radius:34px;background:linear-gradient(145deg,#282448,#1c2431);display:grid;place-content:center;text-align:center;box-shadow:0 0 70px #8b60ef38;transform:rotate(-8deg)}.staff-center>span{font-size:42px;font-weight:700;color:#c6f56f}.staff-center small{font-size:10px;color:#d2c9eb}.staff-node{position:absolute;z-index:3;display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid var(--so-line);border-radius:13px;background:var(--so-surface);box-shadow:0 12px 30px #0003;font-size:11px;color:var(--so-text)}.staff-node b{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--so-inset);color:var(--so-lime);font-size:17px}.staff-node-manager{left:5%;top:18%}.staff-node-waiter{right:4%;top:18%}.staff-node-kitchen{left:0;bottom:19%}.staff-node-cashier{right:1%;bottom:19%}.staff-node-calls{top:0;left:42%}.staff-pulse{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--so-lime);box-shadow:0 0 0 8px #c6f56f1c,0 0 35px #c6f56f}
.staff-screens{background:var(--so-bg)}.staff-heading{max-width:790px;margin-bottom:38px}.staff-heading h2,.staff-roles-intro h2,.staff-realtime-grid h2,.staff-close-card h2{font-size:clamp(36px,4vw,55px);font-weight:500;letter-spacing:-.05em;line-height:1.1;margin:22px 0}.staff-heading>p{max-width:680px;font-size:16px}.staff-demo{border:1px solid var(--so-line);border-radius:23px;background:var(--so-inset);overflow:hidden;box-shadow:0 28px 85px #0003}.staff-demo-tabs{display:flex;gap:7px;overflow:auto;padding:15px;border-bottom:1px solid var(--so-line);scrollbar-width:thin}.staff-demo-tabs button{display:flex;align-items:center;gap:8px;flex:0 0 auto;border:1px solid transparent;border-radius:11px;background:transparent;padding:10px 14px;color:var(--so-muted);font:inherit;font-size:12px;cursor:pointer}.staff-demo-tabs button>span{font-size:16px;color:var(--so-purple)}.staff-demo-tabs button[aria-selected="true"]{background:var(--so-surface);border-color:var(--so-line);color:var(--so-text)}.staff-demo-tabs button:focus-visible{outline:2px solid var(--so-purple);outline-offset:2px}.staff-demo-top{height:44px;padding:0 18px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--so-line);font-size:10px;color:var(--so-muted)}.staff-demo-top>span:first-child{display:flex;gap:4px}.staff-demo-top>span:first-child i{width:7px;height:7px;border-radius:50%;background:var(--so-line)}.staff-demo-top>b{color:var(--so-text);font-size:11px}.staff-demo-top>b small{color:var(--so-muted);font-weight:400}.staff-demo-top>em{font-style:normal;margin-left:auto}.staff-live-label{display:flex;align-items:center;gap:6px;color:#55cf98;font-size:9px}.staff-panels{padding:21px}.staff-panel[hidden]{display:none}.staff-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:19px}.staff-panel-heading small{color:var(--so-purple);font-size:10px;letter-spacing:.08em}.staff-panel-heading h3{margin:4px 0 0;font-size:17px;font-weight:500}.staff-branch-chip{border:1px solid var(--so-line);border-radius:30px;padding:7px 10px;color:var(--so-muted);font-size:10px;white-space:nowrap}
.staff-manager-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.staff-manager-grid article{display:flex;flex-direction:column;min-height:145px;padding:15px;border:1px solid var(--so-line);border-radius:13px;background:var(--so-surface)}.staff-manager-grid article>span{color:var(--so-purple);font-size:20px}.staff-manager-grid strong{font-size:12px;margin-top:11px}.staff-manager-grid small{font-size:9px;color:var(--so-muted);line-height:1.5;margin-top:5px}.staff-manager-grid b{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px;font-size:9px;color:var(--so-muted);font-weight:400}.staff-manager-grid b i{color:#55cf98;font-size:13px;font-style:normal}.staff-permission-note{display:flex;align-items:center;gap:12px;margin-top:12px;padding:13px;border:1px solid #b497ff40;border-radius:12px;background:#b497ff0d}.staff-permission-note>span{font-size:22px;color:var(--so-purple)}.staff-permission-note strong,.staff-permission-note small{display:block}.staff-permission-note strong{font-size:11px}.staff-permission-note small{font-size:9px;color:var(--so-muted);margin-top:4px}
.staff-promo-strip{display:flex;align-items:center;gap:10px;padding:12px;border:1px dashed #72caff;border-radius:11px;background:#65c8ff0a;color:var(--so-blue)}.staff-promo-strip>span{font-size:20px}.staff-promo-strip strong,.staff-promo-strip small{display:block}.staff-promo-strip strong{font-size:11px}.staff-promo-strip small{font-size:9px;color:var(--so-muted);margin-top:3px}.staff-promo-strip>b{margin-left:auto;color:#50ca8f;font-size:12px}.staff-menu-tools{display:flex;justify-content:space-between;gap:14px;align-items:center;margin:16px 0}.staff-category-row{display:flex;gap:7px;overflow:auto}.staff-category-row span{white-space:nowrap;padding:7px 10px;border-radius:9px;border:1px solid var(--so-line);color:var(--so-muted);font-size:10px}.staff-category-row .active{background:#159deb;color:white;border-color:#159deb}.staff-search{min-width:190px;border:1px solid var(--so-line);border-radius:10px;padding:8px 10px;color:var(--so-muted);font-size:10px}.staff-product-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) 130px;gap:10px}.staff-product-grid article,.staff-product-grid aside{display:flex;flex-direction:column;padding:13px;border:1px solid var(--so-line);border-radius:12px;background:var(--so-surface)}.staff-product-grid article>b{font-size:12px}.staff-product-grid article>small{color:var(--so-muted);font-size:9px;margin-top:6px}.staff-product-grid article>span{align-self:flex-start;margin-top:12px;color:var(--so-blue);font-size:10px}.staff-product-grid aside{background:#f38f1711;border-color:#f38f1740}.staff-product-grid aside small{color:var(--so-muted);font-size:9px}.staff-product-grid aside strong{font-size:25px;margin:5px 0}.staff-product-grid aside span{color:#f3a044;font-size:9px}
.staff-kitchen-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.staff-kitchen-columns>article{padding:12px;border:1px solid var(--so-line);border-radius:13px;background:var(--so-surface);min-width:0}.staff-kitchen-columns>article>header{display:flex;align-items:center;gap:8px;margin-bottom:11px;font-size:11px}.staff-kitchen-columns>article>header b{font-size:17px;color:var(--so-blue)}.staff-kitchen-columns .preparing>header b{color:#f2b738}.staff-kitchen-columns .ready>header b{color:#55cf98}.staff-kitchen-columns article>div{padding:12px;border:1px dashed var(--so-line);border-radius:10px}.staff-kitchen-columns article>div>strong,.staff-kitchen-columns article>div>small{display:block}.staff-kitchen-columns article>div>strong{font-size:11px}.staff-kitchen-columns article>div>small{font-size:9px;color:var(--so-muted);margin-top:5px}.staff-kitchen-columns article>div>p{font-size:10px;margin:12px 0}.staff-kitchen-columns button{width:100%;border:0;border-radius:8px;background:#159deb;color:white;padding:8px;font:inherit;font-size:9px}.staff-kitchen-columns .preparing button{background:#fff6dd;color:#bd8714;margin-top:5px}.staff-kitchen-columns .ready button,.staff-kitchen-columns button.ready-action{background:#e5fbef;color:#35a877;margin-top:5px}
.staff-cashier-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}.staff-cashier-summary>div{padding:11px;border:1px solid var(--so-line);border-radius:10px;background:var(--so-surface)}.staff-cashier-summary small,.staff-cashier-summary strong{display:block}.staff-cashier-summary small{font-size:9px;color:var(--so-muted)}.staff-cashier-summary strong{font-size:19px;margin-top:4px}.staff-cashier-body{display:grid;grid-template-columns:1.3fr 1fr;gap:12px}.staff-table-map,.staff-open-order{padding:13px;border:1px solid var(--so-line);border-radius:12px;background:var(--so-surface)}.staff-table-map>strong{font-size:11px}.staff-table-map>div{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:11px}.staff-table-map>div span{display:flex;flex-direction:column;justify-content:center;min-height:47px;padding:7px;border:1px solid #55cf9860;border-radius:8px;background:#55cf9820;color:#64dc9c;font-size:9px}.staff-table-map>div .occupied{background:#f3b73820;border-color:#f3b73860;color:#e2b74e}.staff-table-map>div small{margin-top:4px;font-size:8px}.staff-open-order>small,.staff-open-order>strong{display:block}.staff-open-order>small{font-size:9px;color:var(--so-muted)}.staff-open-order>strong{margin:8px 0;font-size:20px}.staff-open-order>button{width:100%;border:0;border-radius:8px;padding:9px;background:#159deb;color:white;font:inherit;font-size:9px}.staff-open-order>div{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.staff-open-order>div span{padding:5px 6px;background:var(--so-inset);border-radius:6px;color:var(--so-muted);font-size:8px}
.staff-call-list{display:grid;gap:8px}.staff-call-list article{display:grid;grid-template-columns:37px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--so-line);border-radius:11px;background:var(--so-surface)}.staff-call-list article>span{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#f3b73822;color:#f3b738;font-size:16px}.staff-call-list article>span.clean{background:#b497ff22;color:var(--so-purple)}.staff-call-list article>span.water{background:#65c8ff22;color:#65c8ff}.staff-call-list article>span.bill{background:#55cf9822;color:#55cf98}.staff-call-list strong,.staff-call-list small{display:block}.staff-call-list strong{font-size:11px}.staff-call-list small{font-size:9px;color:var(--so-muted);margin-top:4px}.staff-call-list article>b{font-size:9px;font-weight:400;color:#e5b74a}.staff-demo-caption{text-align:right;font-size:9px;margin:0 20px 15px!important}
.staff-roles-section{background:var(--so-inset)}.staff-roles-grid{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.staff-roles-intro h2 em{color:var(--so-purple);font-style:normal}.staff-roles-intro>p{font-size:15px}.staff-manager-points article{display:flex;gap:17px;padding:19px 0;border-top:1px solid var(--so-line)}.staff-manager-points article>span{color:var(--so-lime);font-size:11px;padding-top:3px}.staff-manager-points strong{font-size:14px}.staff-manager-points p{font-size:12px;margin:7px 0 0}.staff-realtime{background:var(--so-bg)}.staff-realtime-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:65px;align-items:center}.staff-realtime-grid h2{margin:22px 0}.staff-live-track{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:23px;border:1px solid var(--so-line);border-radius:17px;background:var(--so-surface)}.staff-live-track span{display:flex;align-items:center;gap:7px;padding:9px 10px;border:1px solid var(--so-line);border-radius:10px;background:var(--so-inset);font-size:10px}.staff-live-track i{width:6px;height:6px;border-radius:50%;background:#55cf98}.staff-live-track>b{color:var(--so-purple);font-weight:400}.staff-close{background:var(--so-bg)}.staff-close-card{padding:58px 25px;border:1px solid var(--so-line);border-radius:24px;text-align:center;background:radial-gradient(ellipse at 50% 100%,rgba(134,79,254,.15),transparent 60%),var(--so-surface)}.staff-close-card h2{max-width:800px;margin:20px auto}.staff-close-card>p{max-width:680px;margin:0 auto 25px}.staff-close-card .hero-actions{justify-content:center;flex-wrap:wrap}
@media(max-width:1000px){.staff-hero-grid{grid-template-columns:1fr 0.85fr;gap:30px}.staff-node-manager{left:-2%}.staff-node-waiter{right:-3%}.staff-manager-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.staff-roles-grid,.staff-realtime-grid{gap:38px}}
@media(max-width:760px){.staff-hero{padding:132px 0 65px}.staff-hero-grid,.staff-roles-grid,.staff-realtime-grid{grid-template-columns:1fr;gap:30px}.staff-hero-art{max-width:490px;width:100%;height:340px;margin:auto}.staff-orbit-one{width:330px;height:190px}.staff-orbit-two{width:280px;height:270px}.staff-node-manager{left:4%}.staff-node-waiter{right:4%}.staff-node-kitchen{left:0}.staff-node-cashier{right:0}.staff-heading{margin-bottom:28px}.staff-kitchen-columns{gap:7px}.staff-kitchen-columns>article{padding:8px}.staff-kitchen-columns article>div{padding:8px}}
@media(max-width:520px){.staff-page .section{padding:66px 0}.staff-page .container{width:calc(100% - 40px)}.staff-hero-copy h1{font-size:43px}.staff-hero-copy>p{font-size:15px}.staff-hero-art{height:290px;transform:scale(.92)}.staff-node{padding:7px 8px;font-size:9px;gap:6px}.staff-node b{width:23px;height:23px;font-size:13px}.staff-node-calls{top:2%;left:39%}.staff-demo-tabs{padding:10px}.staff-demo-tabs button{padding:8px 10px;font-size:10px}.staff-demo-top{padding:0 11px;gap:7px}.staff-demo-top>em{font-size:8px}.staff-panels{padding:12px}.staff-panel-heading{align-items:flex-start}.staff-panel-heading h3{font-size:14px}.staff-branch-chip{font-size:8px;padding:6px}.staff-manager-grid{gap:7px}.staff-manager-grid article{min-height:125px;padding:10px}.staff-manager-grid strong{font-size:10px}.staff-manager-grid small{font-size:8px}.staff-permission-note{padding:10px}.staff-permission-note strong{font-size:9px}.staff-permission-note small{font-size:8px}.staff-menu-tools{align-items:flex-start;flex-direction:column}.staff-search{width:100%;box-sizing:border-box}.staff-product-grid{grid-template-columns:1fr 1fr}.staff-product-grid aside{grid-column:1/-1;flex-direction:row;align-items:center;gap:10px}.staff-product-grid aside strong{font-size:18px;margin:0}.staff-product-grid aside span{margin-left:auto}.staff-kitchen-columns{grid-template-columns:1fr}.staff-kitchen-columns>article{padding:10px}.staff-kitchen-columns article>div{padding:10px}.staff-kitchen-columns article>div>p{margin:8px 0}.staff-cashier-body{grid-template-columns:1fr}.staff-table-map>div{grid-template-columns:repeat(3,1fr)}.staff-call-list article{grid-template-columns:31px minmax(0,1fr) auto;padding:9px}.staff-call-list article>span{width:30px;height:30px}.staff-heading h2,.staff-roles-intro h2,.staff-realtime-grid h2,.staff-close-card h2{font-size:35px}.staff-live-track{gap:6px;padding:12px}.staff-live-track span{padding:7px;font-size:8px}.staff-live-track>b{font-size:11px}.staff-close-card{padding:40px 18px}}

/* Larger, more readable labels inside the interactive role preview. */
.staff-demo-tabs button{font-size:14px;padding:12px 16px}
.staff-demo-top{min-height:48px;height:auto;padding:10px 18px;font-size:12px;flex-wrap:wrap}
.staff-demo-top>b{font-size:13px}
.staff-demo-top>b small{font-size:12px}
.staff-auto-label{margin-left:auto;color:var(--so-muted);font-size:11px}
.staff-demo-top>em{font-size:11px}
.staff-live-label{font-size:11px}
.staff-panel-heading small{font-size:12px}
.staff-panel-heading h3{font-size:20px}
.staff-branch-chip{font-size:12px}
.staff-manager-grid{gap:12px}
.staff-manager-grid article{min-height:165px;padding:18px}
.staff-manager-grid article>span{font-size:23px}
.staff-manager-grid strong{font-size:15px}
.staff-manager-grid small{font-size:12px}
.staff-manager-grid b{font-size:11px}
.staff-permission-note{padding:16px}
.staff-permission-note strong{font-size:14px}
.staff-permission-note small{font-size:12px;line-height:1.55}
.staff-promo-strip strong{font-size:14px}
.staff-promo-strip small{font-size:12px}
.staff-category-row span,.staff-search{font-size:12px}
.staff-product-grid article>b{font-size:15px}
.staff-product-grid article>small{font-size:12px}
.staff-product-grid article>span{font-size:12px}
.staff-kitchen-columns>article{padding:15px}
.staff-kitchen-columns>article>header{font-size:14px}
.staff-kitchen-columns article>div{padding:14px}
.staff-kitchen-columns article>div>strong{font-size:14px}
.staff-kitchen-columns article>div>small,.staff-kitchen-columns article>div>p{font-size:12px}
.staff-kitchen-columns button{padding:10px;font-size:12px}
.staff-cashier-summary>div{padding:14px}
.staff-cashier-summary small{font-size:12px}
.staff-table-map,.staff-open-order{padding:16px}
.staff-table-map>strong{font-size:14px}
.staff-table-map>div span{font-size:12px}
.staff-table-map>div small,.staff-open-order>small{font-size:11px}
.staff-open-order>button{font-size:12px}
.staff-open-order>div span{font-size:11px}
.staff-call-list article{padding:13px 15px}
.staff-call-list strong{font-size:14px}
.staff-call-list small,.staff-call-list article>b{font-size:12px}
.staff-demo-progress{height:3px;background:var(--so-line);overflow:hidden}
.staff-demo-progress i{display:block;width:100%;height:100%;background:linear-gradient(90deg,var(--so-purple),var(--so-lime));transform:scaleX(0);transform-origin:left}
.staff-demo-progress.is-running i{animation:staff-demo-progress 7s linear forwards}
.staff-demo:hover .staff-demo-progress i,.staff-demo:focus-within .staff-demo-progress i{animation-play-state:paused}
@keyframes staff-demo-progress{to{transform:scaleX(1)}}
@media(max-width:760px){.staff-demo-top{padding:10px 14px}.staff-manager-grid article{min-height:150px}.staff-kitchen-columns{gap:9px}.staff-kitchen-columns>article{padding:11px}.staff-kitchen-columns article>div{padding:10px}}
@media(max-width:520px){
 .staff-demo-tabs button{font-size:12px;padding:9px 11px}
 .staff-demo-top{min-height:44px;padding:8px 11px;gap:7px}
 .staff-demo-top>b{font-size:12px}
 .staff-demo-top>b small{font-size:11px}
 .staff-auto-label{order:3;width:100%;margin:0;font-size:10px}
 .staff-demo-top>em{margin-left:auto;font-size:10px}
 .staff-live-label{font-size:10px}
 .staff-panels{padding:12px}
 .staff-panel-heading h3{font-size:16px}
 .staff-panel-heading small{font-size:11px}
 .staff-branch-chip{font-size:10px}
 .staff-manager-grid{gap:8px}
 .staff-manager-grid article{min-height:145px;padding:11px}
 .staff-manager-grid strong{font-size:12px}
 .staff-manager-grid small{font-size:10px}
 .staff-manager-grid b{font-size:10px}
 .staff-permission-note{padding:11px;gap:9px}
 .staff-permission-note strong{font-size:11px}
 .staff-permission-note small{font-size:10px}
 .staff-promo-strip strong{font-size:12px}
 .staff-promo-strip small{font-size:10px}
 .staff-product-grid article>b{font-size:12px}
 .staff-product-grid article>small,.staff-product-grid article>span{font-size:10px}
 .staff-kitchen-columns>article>header{font-size:13px}
 .staff-kitchen-columns article>div>strong{font-size:13px}
 .staff-kitchen-columns article>div>small,.staff-kitchen-columns article>div>p{font-size:11px}
 .staff-kitchen-columns button{font-size:11px}
 .staff-cashier-summary small{font-size:10px}
 .staff-table-map>strong{font-size:13px}
 .staff-table-map>div span{font-size:11px}
 .staff-table-map>div small,.staff-open-order>small,.staff-open-order>div span{font-size:10px}
 .staff-open-order>button{font-size:11px}
 .staff-call-list strong{font-size:12px}
 .staff-call-list small,.staff-call-list article>b{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.staff-demo-progress{display:none}}