:root{--bg:#050505;--panel:#101113;--panel2:#17181b;--line:rgba(255,255,255,.12);--text:#f7f7f8;--muted:#96999f;--gold:#d9ad57;--gold2:#f0cf84;--red:#e95b58;--green:#63d367}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark}
body{margin:0;background:radial-gradient(circle at 50% -10%,rgba(217,173,87,.13),transparent 32%),var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",sans-serif}
button,input{font:inherit}
button{cursor:pointer}
.native-root{min-height:100vh}
.native-frame{max-width:520px;margin:0 auto;min-height:100vh;padding:18px 14px 30px}
header{display:flex;align-items:center;justify-content:space-between;min-height:48px;margin-bottom:18px}
.brand{border:0;background:transparent;color:var(--gold2);display:flex;align-items:center;gap:10px;letter-spacing:.12em}
.brand span,.brand-mark{width:42px;height:42px;border:1px solid rgba(217,173,87,.4);border-radius:50%;display:grid;place-items:center;color:var(--gold2);font-size:26px;font-weight:200;background:rgba(217,173,87,.06)}
.brand b{font-size:12px}
.header-actions{display:flex;gap:8px}
.icon-btn,.small,.ghost,.primary{border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.035);color:var(--text);padding:11px 13px}
.icon-btn{position:relative;min-width:42px;height:42px;padding:0;font-size:10px}
.icon-btn i{position:absolute;right:-5px;top:-6px;min-width:19px;height:19px;border-radius:999px;background:var(--red);display:grid;place-items:center;font-size:10px;font-style:normal;border:2px solid var(--bg)}
.primary{border-color:rgba(217,173,87,.55);background:linear-gradient(180deg,rgba(217,173,87,.24),rgba(217,173,87,.08));color:var(--gold2);font-weight:700}
.full{width:100%}
.disabled{opacity:.5;pointer-events:none}
.auth-card,.boot-card,.pin-card,.tool-panel,.admin-panel{border:1px solid var(--line);border-radius:24px;background:rgba(16,17,19,.86);box-shadow:0 24px 70px rgba(0,0,0,.45);padding:22px;backdrop-filter:blur(18px)}
.boot-card,.auth-card{text-align:center;margin-top:12vh}
h1,h2,p{margin-top:0}
h1{font-size:28px;letter-spacing:-.03em}
h2{font-size:15px;color:var(--gold2);margin:18px 0 8px}
p,.muted{color:var(--muted);line-height:1.45}
label{display:block;text-align:left;color:var(--muted);font-size:11px;margin:12px 0 6px}
input{width:100%;border:1px solid var(--line);background:#08090a;color:#fff;border-radius:15px;padding:14px;outline:none}
.error{color:#ff8f8b;font-size:12px;margin:12px 0 0}
.status-box{border:1px solid rgba(217,173,87,.32);border-radius:18px;padding:14px;margin:18px 0;background:rgba(217,173,87,.06);color:var(--gold2)}
.spinner{width:42px;height:42px;border-radius:50%;border:2px solid rgba(255,255,255,.12);border-top-color:var(--gold2);margin:0 auto 18px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.page-title{margin:16px 0}
.page-title p{font-size:12px;letter-spacing:.16em;color:var(--gold2)}
.split{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.worker-grid{display:grid;gap:10px}
.worker-card,.admin-row{width:100%;text-align:left;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.025);color:#fff;padding:16px}
.worker-card b,.worker-card span,.admin-row b,.admin-row span{display:block}
.worker-card b{font-size:18px}
.worker-card span,.admin-row span{color:var(--muted);font-size:11px;margin-top:5px}
.pin-card{text-align:center}
.pin-dots{display:flex;justify-content:center;gap:9px;margin:18px 0}
.pin-dots span{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}
.pin-dots .on{background:var(--gold2);border-color:var(--gold2)}
.pin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pin-key{min-height:62px;border:1px solid var(--line);border-radius:17px;background:#111214;color:#fff;font-weight:700}
.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.metric-grid div{border:1px solid var(--line);border-radius:17px;padding:14px;background:rgba(255,255,255,.025)}
.metric-grid span,.metric-grid b{display:block}
.metric-grid span{font-size:10px;color:var(--muted)}
.metric-grid b{font-size:20px;margin-top:5px;color:var(--gold2)}
.tool-panel{display:grid;gap:9px}
.admin-panel{position:fixed;inset:12px;z-index:20;max-width:520px;margin:auto;overflow:auto}
.admin-row{margin-bottom:8px}
.admin-row div{display:flex;gap:8px;margin-top:10px}
.danger{border-color:rgba(233,91,88,.32)}
@media(max-width:390px){.native-frame{padding-left:12px;padding-right:12px}.split{display:block}.metric-grid{grid-template-columns:1fr}.auth-card,.boot-card{margin-top:7vh}.pin-key{min-height:56px}}

.native-frame:has(.native-worker-login){max-width:none;padding:0}
.native-worker-login{min-height:100vh;max-width:520px;margin:0 auto;padding:20px 18px max(20px,env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:flex-start;background:radial-gradient(circle at 50% 28%,rgba(217,173,87,.13),transparent 26%),#050505}
.native-worker-login .login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin:0 0 14px}
.native-worker-login .login-logo{width:132px;height:132px;object-fit:contain;display:block;margin:0 auto 4px;filter:drop-shadow(0 10px 26px rgba(217,173,87,.13));-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.native-worker-login .login-brand h1{color:var(--gold2);letter-spacing:.24em;margin:4px 0 4px .24em;font-size:20px;font-weight:400;text-align:center}
.native-worker-login .login-brand p,.native-worker-login .login-note{color:var(--muted);font-size:11px;text-align:center;line-height:1.35;margin:0}
.native-worker-login .login-access{width:100%;border:1px solid var(--line);border-radius:22px;padding:14px;background:rgba(255,255,255,.024)}
.native-worker-login .touch-user-select{display:block;margin:0 0 12px}
.native-worker-login .touch-user-select span{display:block;color:var(--muted);font-size:10px;margin-bottom:6px}
.native-worker-login select{width:100%;height:56px;border:1px solid var(--line);border-radius:16px;background:#0b0c0d;color:#fff;padding:0 14px;font-size:16px;font-weight:600;outline:none}
.native-worker-login .pin-caption{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 8px;color:var(--muted);font-size:10px}
.native-worker-login .pin-caption b{color:var(--gold2);font-size:9px;font-weight:500}
.native-worker-login .pin-display{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:12px}
.native-worker-login .pin-dot{height:52px;border:1px solid var(--line);border-radius:15px;background:#090a0b;display:grid;place-items:center;color:transparent;font-size:28px;line-height:1}
.native-worker-login .pin-dot.filled{color:var(--gold2);border-color:rgba(217,173,87,.42);background:rgba(217,173,87,.055)}
.native-worker-login .pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.native-worker-login .pin-key{min-height:62px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.035);color:#fff;font-size:24px;font-weight:500;user-select:none;-webkit-user-select:none}
.native-worker-login .pin-key:active{transform:scale(.97);background:rgba(255,255,255,.08)}
.native-worker-login .pin-key.utility{font-size:13px;color:#c7c9cc}
.native-worker-login .pin-key.enter{color:#17110a;background:var(--gold2);border-color:var(--gold2);font-size:20px}
.native-worker-login .error{min-height:20px;margin:9px 0 0;color:#ff817d;font-size:11px;text-align:center}
.native-worker-login .login-note{margin:9px 0 0}
@media(max-width:390px){.native-worker-login{padding-left:14px;padding-right:14px}.native-worker-login .login-logo{width:112px;height:112px}.native-worker-login .login-access{padding:12px}.native-worker-login .pin-keypad{gap:7px}.native-worker-login .pin-key{min-height:56px}}
@media(max-height:720px){.native-worker-login .login-logo{width:82px;height:82px}.native-worker-login .login-brand{margin-bottom:5px}.native-worker-login .login-brand h1{font-size:16px;margin:2px 0 2px .24em}.native-worker-login .login-brand p{font-size:9px}.native-worker-login .pin-key{min-height:47px}.native-worker-login .pin-dot{height:38px}.native-worker-login select{height:50px}}
@media(min-width:700px){.native-worker-login{max-width:700px}.native-worker-login .login-logo{width:170px;height:170px}.native-worker-login .login-access,.native-worker-login .login-note{max-width:460px;width:100%;margin-left:auto;margin-right:auto}}

.operational-frame{padding-top:10px;padding-bottom:94px}
.operational-app{min-height:100vh}
.op-header{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:14px}
.op-brand{border:0;background:transparent;color:var(--gold2);display:flex;align-items:center;gap:9px;letter-spacing:.14em;padding:0;text-align:left}
.op-brand span{width:40px;height:40px;border:1px solid rgba(217,173,87,.4);border-radius:50%;display:grid;place-items:center;font-size:25px;font-weight:200;background:rgba(217,173,87,.06)}
.op-brand b{font-size:11px}
.op-user{text-align:right;min-width:0}
.op-user strong,.op-user small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.op-user strong{font-size:13px}
.op-user small{font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold2)}
.op-user .role-cashier{color:var(--gold2)}
.op-actions{display:flex;gap:6px}
.op-icon{position:relative;min-width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:rgba(255,255,255,.03);color:#fff;font-size:9px;padding:0}
.op-icon i{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;border-radius:999px;background:var(--red);border:2px solid var(--bg);display:grid;place-items:center;font-style:normal}
.op-section{display:block}
.op-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:16px 0 12px}
.op-title h1{margin:0;font-size:31px;letter-spacing:-.03em}
.op-title p{margin:4px 0 0;color:var(--muted);font-size:11px}
.op-nav{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:min(calc(100% - 24px),496px);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;overflow-x:auto;padding:8px 7px;border:1px solid var(--line);border-radius:22px;background:rgba(12,13,14,.93);backdrop-filter:blur(22px);z-index:18}
.op-nav button{border:0;background:transparent;color:#8f9297;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:9px;min-width:64px;padding:5px 2px}
.op-nav button b{font-size:14px;font-weight:600}
.op-nav button.active{color:var(--gold2)}
.zone-tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.zone-tabs::-webkit-scrollbar{display:none}
.zone-tab{white-space:nowrap;border:1px solid var(--line);background:rgba(255,255,255,.025);color:#b5b7bb;border-radius:999px;padding:10px 16px}
.zone-tab.active{color:var(--gold2);border-color:rgba(217,173,87,.5);background:rgba(217,173,87,.09)}
.salon-map{height:min(560px,62vh);min-height:440px;position:relative;overflow:hidden;border:1px solid var(--line);border-radius:26px;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.035),transparent 28%),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),#090a0b;background-size:auto,54px 54px,54px 54px;box-shadow:inset 0 0 80px rgba(0,0,0,.6)}
.salon-map:before,.salon-map:after{content:"";position:absolute;border:1px solid rgba(255,255,255,.05);border-radius:120px;left:27%;right:27%;top:26%;bottom:26%;pointer-events:none}
.salon-map:after{left:34%;right:34%;top:34%;bottom:34%}
.map-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.24em;color:rgba(255,255,255,.13)}
.table-node{position:absolute;width:116px;min-height:86px;transform:translateZ(0);border-radius:20px;border:1px solid var(--line);background:#0d0f10;color:#fff;padding:13px 8px;text-align:center;box-shadow:0 12px 28px rgba(0,0,0,.4);z-index:2}
.table-node strong{display:block;font-size:22px}
.table-node span{display:block;margin-top:4px;font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.table-node small{display:block;margin-top:6px;color:#b1b3b7;font-size:9px}
.table-node em{display:block;margin-top:6px;font-style:normal;font-size:9px;color:var(--gold2);font-weight:700}
.status-available{border-color:rgba(99,211,103,.45)!important;color:var(--green)!important;background:linear-gradient(180deg,rgba(99,211,103,.12),rgba(99,211,103,.03)),#0b0d0c!important}
.status-occupied{border-color:rgba(86,174,250,.45)!important;color:#56aefa!important;background:linear-gradient(180deg,rgba(86,174,250,.11),rgba(86,174,250,.03)),#0b0c0e!important}
.status-reserved,.status-vip{border-color:rgba(217,173,87,.5)!important;color:var(--gold2)!important;background:linear-gradient(180deg,rgba(217,173,87,.12),rgba(217,173,87,.03)),#0d0c0a!important}
.status-payment{border-color:rgba(233,91,88,.5)!important;color:#ff817d!important;background:linear-gradient(180deg,rgba(233,91,88,.13),rgba(233,91,88,.03)),#0e0b0b!important}
.legend{display:flex;gap:12px;overflow:auto;padding:12px 4px 4px;color:#999;font-size:9px}
.legend span{white-space:nowrap}.dot{width:7px;height:7px;border-radius:50%;display:inline-block;margin-right:4px}.dot.available{background:var(--green)}.dot.occupied{background:#56aefa}.dot.reserved{background:var(--gold)}.dot.payment{background:var(--red)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(10px);z-index:80;display:flex;align-items:flex-end;justify-content:center;padding:10px}
.sheet{width:min(500px,100%);max-height:91vh;overflow:auto;border:1px solid rgba(255,255,255,.13);border-radius:28px;background:rgba(16,17,19,.98);padding:18px;box-shadow:0 -30px 80px rgba(0,0,0,.65)}
.sheet-title{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px}
.sheet-title h2{margin:0;font-size:23px}.sheet-title p{margin:5px 0 0;color:var(--muted);font-size:11px}
.money-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:13px 0}
.money-row>div{border:1px solid var(--line);border-radius:16px;padding:13px;background:rgba(255,255,255,.02)}
.money-row span{display:block;color:var(--muted);font-size:10px}.money-row strong{display:block;margin-top:5px;font-size:21px;color:#fff}
.consumption-list{border:1px solid var(--line);border-radius:17px;overflow:hidden}
.consume-row{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 11px;border-bottom:1px solid var(--line)}
.consume-row:last-child{border-bottom:0}.consume-row b{font-size:11px}.consume-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px}
.table-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.btn.account{grid-column:1/-1;border-color:rgba(217,173,87,.5);color:var(--gold2);background:rgba(217,173,87,.07)}
.op-card-list{display:grid;gap:9px}.product-card{display:grid;grid-template-columns:48px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);border-radius:18px;padding:11px;background:rgba(255,255,255,.02)}
.prod-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;border:1px solid rgba(217,173,87,.24);color:var(--gold2);background:#111}
.prod-info b,.prod-info small{display:block}.prod-info small{color:var(--muted);font-size:9px;margin-top:3px}
.empty{padding:18px;text-align:center;color:var(--muted);font-size:11px}
@media(pointer:coarse){.op-icon{width:46px;height:46px}.zone-tab{min-height:46px;padding:12px 17px}.op-nav button{min-height:50px}.table-node{min-height:92px}}
@media(max-width:390px){.op-title{display:block}.salon-map{min-height:420px}.table-node{width:102px;min-height:82px}.money-row,.table-actions{grid-template-columns:1fr}.btn.account{grid-column:auto}.product-card{grid-template-columns:42px 1fr}.product-card strong{grid-column:2}.prod-icon{width:42px;height:42px}}