:root {
    --ink: #241542;
    --ink-soft: #4d3c68;
    --muted: #796d88;
    --surface: #fff;
    --surface-soft: #fcf9ff;
    --bg: #f8f5fb;
    --line: #eadff2;
    --accent: #d72d87;
    --accent-hover: #bd2075;
    --accent2: #6b2db7;
    --accent3: #ed3b78;
    --danger: #bd365a;
    --success: #25846b;
    --gradient: linear-gradient(135deg, #6b2db7 0%, #bd2a97 48%, #ed3b78 100%);
    --gradient-soft: linear-gradient(135deg, rgba(107, 45, 183, .1), rgba(237, 59, 120, .08));
    --shadow: 0 18px 48px rgba(70, 30, 112, .09);
    --shadow-hover: 0 22px 55px rgba(105, 39, 143, .16)
}

/* Dedicated full-screen register workspace */
body.pos-page {
    height: 100dvh;
    overflow: hidden;
    background: #f6f1f8;
}

body.pos-page .app {
    display: block;
    height: 100dvh;
    min-height: 0;
}

body.pos-page .sidebar,
body.pos-page .topbar {
    display: none;
}

body.pos-page .main,
body.pos-page .content {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

body.pos-page .content > .alert {
    position: fixed;
    z-index: 1200;
    top: 82px;
    left: 50%;
    width: min(620px, calc(100vw - 32px));
    transform: translateX(-50%);
    box-shadow: 0 18px 50px rgba(38, 16, 62, .2);
}

.pos-workspace {
    display: grid;
    grid-template-rows: 70px minmax(0, 1fr);
    height: 100dvh;
    overflow: hidden;
    color: #211538;
}

.pos-commandbar {
    display: grid;
    grid-template-columns: minmax(235px, 1fr) auto minmax(470px, 1fr);
    align-items: center;
    gap: 22px;
    min-width: 0;
    padding: 0 20px;
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e7daee;
    box-shadow: 0 5px 22px rgba(55, 22, 85, .06);
    z-index: 5;
}

.pos-command-brand,
.pos-command-center,
.pos-command-actions,
.pos-operator {
    display: flex;
    align-items: center;
}

.pos-command-brand { gap: 11px }
.pos-command-brand img { width: 43px; height: 43px; object-fit: contain; border-radius: 12px; background: #fff }
.pos-command-brand strong { display: block; font-size: 17px; letter-spacing: -.2px }
.pos-command-brand span,
.pos-command-center span,
.pos-operator span { display: block; color: #81748d; font-size: 11px; margin-top: 2px }

.pos-command-center { gap: 10px; justify-content: center }
.pos-live-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #2aa478; box-shadow: 0 0 0 5px rgba(42,164,120,.12) }
.pos-command-center strong { font-size: 13px }
.pos-command-actions { min-width: 0; justify-content: flex-end; gap: 8px }

.pos-icon-action {
    height: 46px;
    min-width: 58px;
    display: grid;
    place-items: center;
    align-content: center;
    border-radius: 12px;
    color: #5f347e;
    transition: .16s ease;
}
.pos-icon-action:hover { background: #f3ebf8; transform: translateY(-1px) }
.pos-icon-action > span { font-size: 20px; line-height: 18px }
.pos-icon-action small { font-size: 9px; margin-top: 3px }

.pos-open-shift { display: flex; height: 40px; border: 1px solid #dfd0e8; border-radius: 11px; overflow: hidden; background: #fff }
.pos-open-shift input { width: 112px; border: 0; outline: 0; padding: 0 10px; font: inherit; font-size: 12px; color: #2a1b42 }
.pos-open-shift button { border: 0; padding: 0 12px; background: #2c8c6c; color: #fff; font-weight: 750; cursor: pointer }
.pos-shift-status { height: 40px; display: flex; align-items: center; gap: 8px; border: 1px solid #c9e8dc; border-radius: 11px; padding: 0 13px; color: #216c53; background: #eaf6f1; font-weight: 750; cursor: pointer }
.pos-shift-status span { width: 8px; height: 8px; border-radius: 50%; background: #2aa478 }
.pos-operator { gap: 9px; padding-left: 10px; border-left: 1px solid #eadff0 }
.pos-operator .avatar { width: 36px; height: 36px }
.pos-operator strong { display: block; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px }

.pos-register {
    min-width: 0;
    min-height: 0;
    display: grid;
    grid-template-columns: clamp(380px, 29vw, 455px) minmax(0, 1fr);
    overflow: hidden;
}

.pos-ticket {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 16px 17px 15px;
    background: #fff;
    border-right: 1px solid #e3d6eb;
    box-shadow: 12px 0 32px rgba(55, 22, 85, .055);
    z-index: 2;
}

.pos-ticket-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 12px }
.pos-section-label { display: block; color: #d72d87; font-size: 9px; font-weight: 850; letter-spacing: 1.25px; text-transform: uppercase }
.pos-ticket-heading h2,
.pos-modal-head h2 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.4px }
.pos-ticket-heading-actions { display: flex; gap: 5px }
.pos-ticket-heading-actions button { border: 0; border-radius: 9px; padding: 7px 10px; background: #f3ebf8; color: #65348c; font-size: 11px; font-weight: 750; cursor: pointer }

.pos-ticket-context { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px }
.pos-ticket-context label > span { display: block; color: #786b84; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; margin: 0 0 4px 2px }
.pos-ticket-context select { width: 100%; height: 38px; padding: 0 29px 0 9px; border: 1px solid #e2d6e9; border-radius: 10px; outline: 0; background: #fcfafe; color: #2b1c42; font: inherit; font-size: 11px; text-overflow: ellipsis }
.pos-ticket-context select:focus { border-color: #bd2a97; box-shadow: 0 0 0 3px rgba(189,42,151,.09) }

.pos-ticket-column-head { display: flex; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid #e9deef; color: #8a7e94; font-size: 9px; font-weight: 800; letter-spacing: .65px; text-transform: uppercase }
.pos-ticket-column-head b { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 4px; border-radius: 99px; background: #f1e6f7; color: #6b2db7; font-size: 9px }

.pos-ticket-lines {
    flex: 1 1 auto;
    min-height: 90px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
}
.pos-ticket-lines::-webkit-scrollbar,
.pos-catalog-panel::-webkit-scrollbar,
.catalog-grid::-webkit-scrollbar,
.pos-payment-rows::-webkit-scrollbar { width: 0; height: 0 }

.pos-ticket-empty { height: 100%; min-height: 150px; display: grid; place-items: center; align-content: center; text-align: center; color: #897c94 }
.pos-ticket-empty div { width: 44px; height: 44px; display: grid; place-items: center; border: 1px dashed #cfbddd; border-radius: 14px; color: #a0529a; font-size: 24px; background: #fcf8fd; margin-bottom: 9px }
.pos-ticket-empty strong { color: #49375b; font-size: 13px }
.pos-ticket-empty span { max-width: 240px; margin-top: 4px; font-size: 10px; line-height: 1.45 }

.pos-ticket .cart-line { padding: 10px 1px; border-bottom: 1px solid #eee5f2 }
.pos-ticket .cart-line-head { display: grid; grid-template-columns: minmax(0,1fr) auto 24px; align-items: start; gap: 7px }
.pos-ticket .cart-line-head > div { min-width: 0 }
.pos-ticket .cart-line-head > div strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px }
.pos-ticket .cart-line-head > div span { display: block; color: #8b7f94; margin-top: 2px; font-size: 9px; text-transform: capitalize }
.pos-ticket .cart-line-head > strong { font-size: 11px; white-space: nowrap }
.pos-ticket .cart-line-head > button { width: 22px; height: 22px; border: 0; border-radius: 7px; background: #fae9ef; color: #b82f57; cursor: pointer }
.cart-line-controls { display: grid; grid-template-columns: 102px 1fr 1fr; gap: 6px; margin-top: 7px }
.cart-line-controls input { width: 100%; height: 30px; border: 1px solid #e1d5e8; border-radius: 8px; padding: 0 7px; outline: 0; color: #302044; font: inherit; font-size: 10px }
.cart-line-controls label { position: relative }
.cart-line-controls label span { position: absolute; z-index: 1; top: -5px; left: 7px; padding: 0 3px; background: #fff; color: #90849a; font-size: 7px; text-transform: uppercase }
.pos-quantity { display: grid; grid-template-columns: 27px 1fr 27px; border: 1px solid #e1d5e8; border-radius: 8px; overflow: hidden }
.pos-quantity button { border: 0; background: #f4edf8; color: #63318b; font-weight: 800; cursor: pointer }
.pos-quantity input { height: 28px; padding: 0; border: 0; border-radius: 0; text-align: center }
.cart-staff { width: 100%; height: 29px; margin-top: 6px; padding: 0 8px; border: 1px solid #e1d5e8; border-radius: 8px; color: #685977; background: #fff; outline: 0; font: inherit; font-size: 9px }

.pos-ticket-summary { flex: 0 0 auto; padding: 9px 2px 7px; border-top: 1px solid #e9deef }
.pos-ticket-summary > div { display: flex; justify-content: space-between; padding: 2px 0; color: #75677f; font-size: 10px }
.pos-ticket-summary strong { color: #39294c }
.pos-ticket-total { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-top: 1px solid #e9deef }
.pos-ticket-total > div > span { display: block; font-size: 14px; font-weight: 850 }
.pos-ticket-total > div > small { color: #8b7d95; font-size: 8px }
.pos-ticket-total > strong { color: #25163c; font-size: 23px; letter-spacing: -.7px }
.pos-ticket-total > strong small { color: #8c7e96; font-size: 9px; letter-spacing: .5px }
.pos-pay-button { flex: 0 0 auto; width: 100%; min-height: 47px; display: flex; justify-content: space-between; align-items: center; border: 0; border-radius: 12px; padding: 0 15px; background: linear-gradient(115deg,#6b2db7,#d72d87 65%,#ed3b78); color: #fff; box-shadow: 0 12px 28px rgba(189,42,151,.23); font-weight: 850; cursor: pointer; transition: .17s ease }
.pos-pay-button:hover { transform: translateY(-1px); box-shadow: 0 15px 34px rgba(189,42,151,.29) }
.pos-pay-button kbd,
.pos-search kbd { border: 1px solid rgba(255,255,255,.25); border-radius: 6px; padding: 3px 6px; background: rgba(255,255,255,.14); color: inherit; font: inherit; font-size: 9px }

.pos-catalog-panel { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 17px 20px 0; overflow: hidden; background: radial-gradient(circle at 95% 0,rgba(232,52,128,.08),transparent 23rem),#f8f4fa }
.pos-catalog-toolbar { flex: 0 0 auto; display: grid; grid-template-columns: minmax(280px,1fr) auto; gap: 10px }
.pos-search { height: 47px; display: grid; grid-template-columns: 34px minmax(0,1fr) auto; align-items: center; padding: 0 10px; border: 1px solid #dfd1e8; border-radius: 13px; background: #fff; box-shadow: 0 8px 24px rgba(65,27,94,.055) }
.pos-search > span { color: #a24f9e; font-size: 24px }
.pos-search input { width: 100%; height: 100%; border: 0; outline: 0; color: #2f2043; background: transparent; font: inherit; font-size: 13px }
.pos-search kbd { border-color: #e1d5e8; background: #f5eef8; color: #796486 }
.pos-held-button { height: 47px; display: flex; align-items: center; gap: 10px; border: 1px solid #dfd1e8; border-radius: 13px; padding: 0 14px; color: #5f347e; background: #fff; font-weight: 750; cursor: pointer }
.pos-held-button b { min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 99px; background: #eee1f5; font-size: 10px }

.pos-page .catalog-tabs { flex: 0 0 auto; margin: 12px 0 7px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none }
.pos-page .catalog-tabs::-webkit-scrollbar { display: none }
.pos-page .catalog-tabs button { display: flex; align-items: center; gap: 7px; padding: 7px 12px; white-space: nowrap; font-size: 11px }
.pos-page .catalog-tabs button b { min-width: 18px; height: 18px; display: grid; place-items: center; border-radius: 99px; background: #f0e6f5; color: #755788; font-size: 8px }
.pos-page .catalog-tabs button.active b { background: rgba(255,255,255,.2); color: #fff }
.pos-catalog-meta { flex: 0 0 auto; display: flex; justify-content: space-between; padding: 0 2px 9px; color: #8a7e94; font-size: 9px }
.pos-catalog-meta span:first-child { color: #594267; font-weight: 750 }

.pos-page .catalog-grid { min-height: 0; flex: 1 1 auto; align-content: start; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 10px; padding: 0 1px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none }
.pos-page .item-card { position: relative; min-width: 0; min-height: 148px; display: flex; flex-direction: column; align-items: flex-start; border-radius: 15px; padding: 13px; color: #281a3c; text-align: left; font: inherit; overflow: hidden }
.pos-page .item-card[hidden] { display: none }
.pos-page .item-card::after { content: '+'; position: absolute; right: 12px; top: 12px; width: 25px; height: 25px; display: grid; place-items: center; border-radius: 9px; background: #f1e7f6; color: #74349c; font-size: 17px; font-weight: 700 }
.pos-page .item-card:hover { transform: translateY(-2px); border-color: #d4b7e4 }
.pos-page .item-card.added { animation: pos-card-added .32s ease }
@keyframes pos-card-added { 50% { transform: scale(.97); border-color:#d72d87; background:#fff8fc } }
.item-card-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 7px 15px rgba(81,34,115,.14) }
.item-card-icon.service { background: linear-gradient(135deg,#6b2db7,#9b36a8) }
.item-card-icon.product { background: linear-gradient(135deg,#236b87,#2ca9a0) }
.item-card-icon.package { background: linear-gradient(135deg,#d37623,#ed3b78) }
.item-card-icon.membership { background: linear-gradient(135deg,#a52b84,#ec3e77) }
.item-card-type { margin-top: 9px; color: #d72d87; font-size: 8px; font-weight: 850; letter-spacing: .7px; text-transform: uppercase }
.pos-page .item-card > strong { width: calc(100% - 6px); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px }
.item-card-code { width: 100%; margin-top: 2px; color: #978a9f; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 8px }
.pos-page .item-card .price { margin-top: auto; color: #24153a; font-size: 15px; letter-spacing: -.2px }
.pos-page .item-card .price small { color: #8b7e94; font-size: 8px; letter-spacing: .4px }
.pos-catalog-empty { grid-column: 1/-1; min-height: 250px; place-items: center; align-content: center; text-align: center; color: #85788e }
.pos-catalog-empty:not([hidden]) { display: grid }
.pos-catalog-empty strong { color: #4d3a5b; font-size: 15px }
.pos-catalog-empty span { margin-top: 5px; font-size: 11px }

.pos-modal { position: fixed; z-index: 2000; inset: 0; display: grid; place-items: center; visibility: hidden; opacity: 0; transition: opacity .18s ease,visibility .18s ease }
.pos-modal.open { visibility: visible; opacity: 1 }
.pos-modal-scrim { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(25,12,39,.62); backdrop-filter: blur(7px); cursor: default }
.pos-payment-dialog,
.pos-shift-dialog { position: relative; z-index: 1; width: min(860px,calc(100vw - 40px)); max-height: calc(100dvh - 40px); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.8); border-radius: 21px; background: #fff; box-shadow: 0 35px 100px rgba(24,8,39,.38); overflow: hidden; transform: translateY(12px) scale(.985); transition: transform .2s ease }
.pos-modal.open .pos-payment-dialog,
.pos-modal.open .pos-shift-dialog { transform: none }
.pos-modal-head { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; border-bottom: 1px solid #eadff0 }
.pos-modal-head > button { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #6c5779; background: #f3ecf7; font-size: 21px; cursor: pointer }
.pos-payment-body { min-height: 0; display: grid; grid-template-columns: .9fr 1.1fr }
.pos-payment-receipt { padding: 21px; background: linear-gradient(145deg,#2b154d,#4d1b6c 58%,#7f277d); color: #fff }
.pos-payment-amount > span { color: rgba(255,255,255,.65); font-size: 10px; text-transform: uppercase; letter-spacing: .8px }
.pos-payment-amount > strong { display: block; margin-top: 4px; font-size: 32px; letter-spacing: -1px }
.pos-payment-amount > strong small { color: rgba(255,255,255,.65); font-size: 10px; letter-spacing: .5px }
.pos-payment-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 18px 0 }
.pos-payment-facts div { padding: 10px; border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(255,255,255,.07) }
.pos-payment-facts span { display: block; color: rgba(255,255,255,.55); font-size: 8px; text-transform: uppercase }
.pos-payment-facts strong { display: block; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px }
.pos-payment-tip,
.pos-payment-notes { display: block; margin-top: 13px }
.pos-payment-tip > span,
.pos-payment-notes > span { display: block; margin-bottom: 6px; color: rgba(255,255,255,.68); font-size: 9px; font-weight: 750 }
.pos-payment-tip > div { display: flex; align-items: center; height: 42px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 0 11px; background: rgba(255,255,255,.1) }
.pos-payment-tip small { color: rgba(255,255,255,.6); font-size: 9px }
.pos-payment-tip input { min-width: 0; flex: 1; height: 100%; border: 0; outline: 0; color: #fff; background: transparent; text-align: right; font: inherit; font-weight: 800 }
.pos-payment-notes textarea { width: 100%; min-height: 64px; resize: none; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: 10px; outline: 0; color: #fff; background: rgba(255,255,255,.1); font: inherit; font-size: 11px }
.pos-payment-notes textarea::placeholder { color: rgba(255,255,255,.42) }
.pos-payment-methods { min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 21px }
.pos-payment-method-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px }
.pos-payment-method-head h3 { margin: 2px 0 0; font-size: 16px }
.pos-payment-method-head button { border: 0; border-radius: 9px; padding: 8px 10px; color: #66338c; background: #f1e7f6; font-weight: 750; cursor: pointer }
.pos-payment-rows { min-height: 94px; max-height: 240px; overflow-y: auto; scrollbar-width: none }
.pos-payment-row { display: grid; grid-template-columns: 1fr 135px 34px; gap: 7px; margin-bottom: 8px }
.pos-payment-row select,
.pos-payment-row input { height: 40px; min-width: 0; border: 1px solid #dfd2e7; border-radius: 10px; padding: 0 10px; outline: 0; background: #fff; color: #2c1d41; font: inherit; font-size: 11px }
.pos-payment-row > button { border: 0; border-radius: 10px; color: #b62d56; background: #fae9ef; cursor: pointer }
.pos-payment-value { position: relative }
.pos-payment-value small { position: absolute; z-index: 1; left: 9px; top: 15px; color: #8d8096; font-size: 8px }
.pos-payment-value input { width: 100%; padding-left: 33px; text-align: right; font-weight: 800 }
.pos-payment-reference { grid-column: 1/-1 }
.pos-page .payment-balance { margin-top: auto; min-height: 45px; align-items: center; font-size: 11px }
.pos-page .payment-balance strong { font-size: 13px }
.pos-page .payment-balance.change { background: #fff1dc; color: #8b5d19 }
.pos-modal-foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 9px; padding: 13px 20px; border-top: 1px solid #eadff0; background: #fcf9fd }
.pos-secondary-button,
.pos-complete-button { min-height: 43px; border: 0; border-radius: 11px; padding: 0 17px; font: inherit; font-weight: 800; cursor: pointer }
.pos-secondary-button { color: #66388a; background: #f0e6f5 }
.pos-complete-button { min-width: 240px; display: flex; justify-content: space-between; align-items: center; gap: 25px; color: #fff; background: linear-gradient(115deg,#6b2db7,#d72d87 65%,#ed3b78); box-shadow: 0 10px 24px rgba(189,42,151,.2) }
.pos-complete-button:disabled { opacity: .55; cursor: wait }
.pos-complete-button strong { font-size: 11px }
.pos-shift-dialog { width: min(470px,calc(100vw - 32px)); padding-bottom: 0 }
.pos-shift-dialog > p { margin: 18px 20px 2px; color: #776a81; font-size: 11px; line-height: 1.5 }
.pos-shift-dialog > label { display: block; margin: 14px 20px 0 }
.pos-shift-dialog > label > span { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 800 }
.pos-shift-dialog input,
.pos-shift-dialog textarea { width: 100%; border: 1px solid #dfd2e7; border-radius: 10px; padding: 10px; outline: 0; font: inherit }
.pos-shift-dialog textarea { min-height: 65px; resize: vertical }
.pos-shift-dialog .pos-modal-foot { margin-top: 18px }
.pos-shift-dialog .pos-complete-button { min-width: 160px; justify-content: center }
.pos-toast { position: fixed; z-index: 3000; left: 50%; bottom: 24px; max-width: min(520px,calc(100vw - 30px)); padding: 11px 16px; border-radius: 11px; color: #fff; background: #2d1a43; box-shadow: 0 18px 45px rgba(20,7,34,.3); font-size: 12px; font-weight: 700; opacity: 0; visibility: hidden; transform: translate(-50%,12px); transition: .2s ease }
.pos-toast.show { opacity: 1; visibility: visible; transform: translate(-50%,0) }
.pos-toast.success { background: #25765c }
.pos-toast.warn { background: #8b611e }
.pos-toast.error { background: #a72f53 }

@media(max-width:1200px) {
    .pos-commandbar { grid-template-columns: 220px 1fr auto }
    .pos-command-center { display: none }
    .pos-register { grid-template-columns: 365px minmax(0,1fr) }
    .pos-operator > div:last-child { display: none }
    .pos-page .catalog-grid { grid-template-columns: repeat(auto-fill,minmax(165px,1fr)) }
}

@media(max-height:760px) and (min-width:821px) {
    .pos-workspace { grid-template-rows: 60px minmax(0,1fr) }
    .pos-command-brand img { width: 37px; height: 37px }
    .pos-ticket { padding-top: 11px; padding-bottom: 10px }
    .pos-ticket-heading { margin-bottom: 8px }
    .pos-ticket-context { margin-bottom: 7px }
    .pos-ticket-summary { padding-top: 5px; padding-bottom: 4px }
    .pos-ticket-summary > div { padding: 1px 0 }
    .pos-ticket-total { padding: 7px 0 }
    .pos-pay-button { min-height: 42px }
    .pos-page .item-card { min-height: 135px }
}

@media(max-width:820px) {
    body.pos-page { height: auto; min-height: 100dvh; overflow: auto }
    body.pos-page .app,
    body.pos-page .main,
    body.pos-page .content { height: auto; min-height: 100dvh }
    .pos-workspace { display: block; height: auto; min-height: 100dvh; overflow: visible }
    .pos-commandbar { position: sticky; top: 0; grid-template-columns: 1fr auto; height: 62px; padding: 0 12px }
    .pos-command-actions .pos-icon-action,
    .pos-open-shift,
    .pos-operator { display: none }
    .pos-register { display: flex; flex-direction: column; overflow: visible }
    .pos-ticket { min-height: 72dvh; border-right: 0; border-bottom: 1px solid #e3d6eb }
    .pos-catalog-panel { min-height: 70dvh; overflow: visible }
    .pos-page .catalog-grid { overflow: visible }
    .pos-payment-body { grid-template-columns: 1fr; overflow-y: auto }
    .pos-payment-receipt { padding: 16px 20px }
    .pos-payment-facts,
    .pos-payment-notes { display: none }
    .pos-payment-methods { min-height: 300px }
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: Inter, Segoe UI, Arial, sans-serif;
    background:
        radial-gradient(circle at 88% 5%, rgba(226, 45, 129, .07), transparent 24rem),
        radial-gradient(circle at 20% 95%, rgba(107, 45, 183, .05), transparent 28rem),
        var(--bg);
    color: var(--ink)
}

a {
    color: inherit;
    text-decoration: none
}

.app {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 248px 1fr
}

.sidebar {
    background:
        radial-gradient(circle at 0 0, rgba(225, 51, 139, .25), transparent 17rem),
        linear-gradient(180deg, #29154d 0%, #1e1238 52%, #171028 100%);
    color: #fbf8ff;
    padding: 26px 18px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
    box-shadow: 14px 0 45px rgba(31, 12, 57, .12)
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 7px 25px;
    border-bottom: 1px solid rgba(255,255,255,.09);
    margin-bottom: 8px
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 15px;
    background: #fff;
    display: grid;
    place-items: center;
    padding: 3px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(3,0,10,.22)
}

.brand-mark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 12px
}

.brand h1 {
    font-size: 20px;
    margin: 0;
    letter-spacing: .2px
}

.brand small {
    color: #c8b9d8
}

.nav-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #a998bc;
    margin: 18px 10px 8px
}

.nav a {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border-radius: 12px;
    color: #ddd3e8;
    margin: 3px 0;
    font-size: 14px;
    border: 1px solid transparent;
    transition: .18s ease
}

.nav a:hover,
.nav a.active {
    background: linear-gradient(135deg, rgba(217,45,135,.23), rgba(107,45,183,.22));
    border-color: rgba(255,255,255,.1);
    color: #fff;
    transform: translateX(2px)
}

.nav a.active {
    box-shadow: inset 3px 0 0 #ed3b78, 0 9px 20px rgba(0,0,0,.08)
}

.main {
    min-width: 0
}

.topbar {
    height: 70px;
    background: rgba(255, 255, 255, .88);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 28px;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(18px)
}

.content {
    padding: 26px 28px 40px;
    max-width: 1500px;
    margin: auto
}

.eyebrow {
    font-size: 11px;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--accent);
    font-weight: 700
}

.page-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px
}

.page-head h2 {
    margin: 4px 0 0;
    font-size: 29px;
    letter-spacing: -.45px
}

.muted {
    color: var(--muted)
}

.grid {
    display: grid;
    gap: 18px
}

.grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr))
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr))
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
    padding: 20px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease
}

.card:hover {
    border-color: #dfccec
}

.metric .value {
    font-size: 28px;
    font-weight: 750;
    margin-top: 8px;
    color: var(--ink)
}

.metric .label {
    font-size: 13px;
    color: var(--muted)
}

.btn {
    border: 0;
    border-radius: 11px;
    padding: 10px 15px;
    font-weight: 650;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease
}

.btn:hover {
    transform: translateY(-1px)
}

.btn-primary {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 10px 24px rgba(190, 40, 143, .22)
}

.btn-accent {
    background: var(--gradient);
    color: #fff;
    box-shadow: 0 10px 24px rgba(190, 40, 143, .18)
}

.btn-soft {
    background: #f2eafa;
    color: #63308f
}

.btn-danger {
    background: #fbeaf0;
    color: var(--danger)
}

.btn-sm {
    padding: 7px 10px;
    font-size: 12px
}

.table-wrap {
    overflow: auto
}

.table {
    width: 100%;
    border-collapse: collapse
}

.table th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .7px;
    text-align: left;
    color: var(--muted);
    padding: 11px 12px;
    border-bottom: 1px solid var(--line);
    background: #fcf9fe
}

.table td {
    padding: 13px 12px;
    border-bottom: 1px solid #f2ebf6;
    font-size: 14px
}

.badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #f1eafa;
    color: #63308f;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize
}

.badge.success {
    background: #e7f3ed;
    color: #2e684e
}

.badge.warn {
    background: #f7eedc;
    color: #8a6425
}

.badge.danger {
    background: #f7e7e7;
    color: #933f3f
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px
}

.field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 7px
}

.input,
.select,
.textarea {
    width: 100%;
    border: 1px solid #ddd1e7;
    border-radius: 11px;
    background: #fff;
    padding: 11px 12px;
    font: inherit;
    outline: none;
    color: var(--ink);
    transition: border-color .16s ease, box-shadow .16s ease
}

.input:focus,
.select:focus,
.textarea:focus {
    border-color: #bd2a97;
    box-shadow: 0 0 0 4px rgba(189, 42, 151, .1)
}

.textarea {
    min-height: 96px;
    resize: vertical
}

.span-2 {
    grid-column: span 2
}

.actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.alert {
    padding: 12px 15px;
    border-radius: 10px;
    margin-bottom: 16px;
    border: 1px solid
}

.alert-success {
    background: #edf7f1;
    border-color: #c7e5d4;
    color: #2f654e
}

.alert-danger {
    background: #fbefef;
    border-color: #efcfcf;
    color: #8f3939
}

.searchbar {
    display: flex;
    gap: 10px
}

.empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--muted)
}

.split {
    display: grid;
    grid-template-columns: 1.4fr .9fr;
    gap: 20px
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    background: #999;
    margin-right: 6px
}

.status-dot.active {
    background: #4d946f
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--gradient-soft);
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #6b2db7;
    border: 1px solid #e4d3ef
}

.top-user {
    display: flex;
    gap: 10px;
    align-items: center
}

.subtle {
    font-size: 12px
}

.pos-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) 420px;
    gap: 18px
}

.catalog-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 14px
}

.catalog-tabs button {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
    color: var(--ink-soft)
}

.catalog-tabs button.active {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(190,40,143,.17)
}

.catalog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px
}

.item-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 15px;
    padding: 15px;
    cursor: pointer;
    min-height: 108px;
    transition: .18s ease
}

.item-card:hover {
    border-color: #d7b9e7;
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover)
}

.item-card .price {
    font-weight: 800;
    margin-top: 12px
}

.cart {
    position: sticky;
    top: 90px
}

.cart-line {
    padding: 12px 0;
    border-bottom: 1px solid var(--line)
}

.cart-line-head {
    display: flex;
    justify-content: space-between;
    gap: 10px
}

.cart-total {
    font-size: 24px;
    font-weight: 800
}

.queue-row { display:grid; grid-template-columns:42px 1fr auto 150px; gap:12px; align-items:center; padding:14px 0; border-bottom:1px solid var(--line) }
.queue-position { width:34px; height:34px; border-radius:11px; display:grid; place-items:center; background:var(--gradient-soft); color:var(--accent2); font-weight:800 }
.consultation-card { padding:16px 0; border-bottom:1px solid var(--line); line-height:1.5 }
.po-line { display:grid; grid-template-columns:2fr .65fr .8fr .65fr 40px; gap:9px; align-items:center; padding:8px 0 }
.po-total { display:flex; justify-content:flex-end; gap:15px; border-top:1px solid var(--line); margin-top:14px; padding-top:14px; font-size:18px }
.catalog-toolbar { display:flex; gap:10px; margin-bottom:14px }
.catalog-search { flex:1; position:relative }
.payment-balance { margin-top:10px; padding:10px 12px; border-radius:11px; background:#f7f2fb; display:flex; justify-content:space-between; font-size:13px }
.payment-balance.ok { background:#e7f3ed; color:#2e684e }

.receipt {
    max-width: 760px;
    margin: auto;
    background: #fff;
    padding: 32px;
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow)
}

.receipt-logo {
    display: block;
    width: 76px;
    height: 76px;
    margin: 0 auto 10px;
    object-fit: contain;
}

.login-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 8% 8%, rgba(237,59,120,.17), transparent 30rem),
        radial-gradient(circle at 92% 90%, rgba(107,45,183,.16), transparent 32rem),
        #f8f4fb;
    padding: 28px
}

.login-card {
    width: min(430px, 92vw);
    background: #fff;
    padding: 34px;
    border-radius: 24px;
    box-shadow: var(--shadow);
    border: 1px solid var(--line)
}

.login-logo {
    width: 78px;
    height: 78px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 23px;
    font-weight: 900;
    margin-bottom: 20px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(91,34,128,.14)
}

.login-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.context-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px
}

.context-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 17px;
    padding: 20px;
    transition: .18s ease
}

.context-card:hover {
    border-color: #d7b9e7;
    transform: translateY(-2px);
    box-shadow: var(--shadow)
}

.auth-shell {
    width: min(1120px, 96vw);
    min-height: min(720px, calc(100vh - 56px));
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 30px;
    overflow: hidden;
    box-shadow: 0 35px 90px rgba(61,22,96,.18)
}

.auth-visual {
    position: relative;
    overflow: hidden;
    padding: 48px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 16%, rgba(255,255,255,.19), transparent 13rem),
        radial-gradient(circle at 5% 92%, rgba(236,57,123,.38), transparent 18rem),
        linear-gradient(145deg, #291252 0%, #6d258e 48%, #d52f89 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.auth-visual::before,
.auth-visual::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 42px;
    transform: rotate(28deg)
}

.auth-visual::before { width: 300px; height: 300px; right: -120px; top: 110px }
.auth-visual::after { width: 220px; height: 220px; left: -100px; bottom: 80px }

.auth-brand,
.auth-story,
.auth-footnote { position: relative; z-index: 1 }

.auth-brand { display: flex; align-items: center; gap: 14px }
.auth-brand-logo { width: 68px; height: 68px; padding: 3px; object-fit: contain; border-radius: 20px; background: #fff; box-shadow: 0 14px 34px rgba(17,4,34,.25) }
.auth-brand h1 { margin: 0; font-size: 25px; letter-spacing: -.4px }
.auth-brand p { margin: 3px 0 0; color: rgba(255,255,255,.72); font-size: 13px }
.auth-story { max-width: 470px; margin: 70px 0 }
.auth-kicker { text-transform: uppercase; letter-spacing: 1.7px; font-size: 11px; font-weight: 800; color: #f8c4df }
.auth-story h2 { font-size: clamp(35px, 4.3vw, 54px); line-height: 1.04; letter-spacing: -2px; margin: 13px 0 18px }
.auth-story > p { color: rgba(255,255,255,.78); line-height: 1.7; max-width: 420px }
.auth-pills { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 28px }
.auth-pills span { border: 1px solid rgba(255,255,255,.19); background: rgba(255,255,255,.1); border-radius: 999px; padding: 9px 12px; font-size: 12px; backdrop-filter: blur(8px) }
.auth-footnote { font-size: 12px; color: rgba(255,255,255,.65) }

.auth-panel { padding: 54px clamp(34px,5vw,70px); display: flex; align-items: center; background: #fff }
.auth-form { width: 100%; max-width: 410px; margin: auto }
.auth-mobile-logo { display: none }
.auth-form h2 { margin: 7px 0 9px; font-size: 34px; letter-spacing: -1px }
.auth-form > .muted { line-height: 1.6 }
.auth-field { margin-top: 19px }
.auth-field .input { padding: 13px 14px }
.auth-submit { width: 100%; padding: 13px 18px; margin-top: 4px }
.auth-security { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; color: var(--muted); font-size: 12px; line-height: 1.5 }
.security-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: var(--gradient); margin-top: 4px; box-shadow: 0 0 0 4px rgba(215,45,135,.1) }

.context-shell { width: min(1080px,94vw); background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); border-radius: 26px; padding: 30px; box-shadow: var(--shadow); backdrop-filter: blur(16px) }
.context-brand { display: flex; gap: 13px; align-items: center }
.context-brand img { width: 58px; height: 58px; object-fit: contain; background: #fff; border-radius: 16px; box-shadow: 0 10px 25px rgba(91,34,128,.12) }

.calendar-row {
    display: grid;
    grid-template-columns: 92px 1fr 140px 120px;
    gap: 12px;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line)
}

.time-pill {
    font-weight: 800
}

.print-only {
    display: none
}

@media(max-width:1100px) {
    .app {
        grid-template-columns: 86px 1fr
    }

    .sidebar .brand-copy,
    .sidebar .nav span,
    .nav-title {
        display: none
    }

    .brand {
        justify-content: center
    }

    .nav a {
        justify-content: center
    }

    .grid-4 {
        grid-template-columns: repeat(2, 1fr)
    }

    .pos-shell {
        grid-template-columns: 1fr
    }

    .cart {
        position: static
    }

    .catalog-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .auth-visual { padding: 38px }
    .auth-story h2 { font-size: 40px }
}

@media(max-width:720px) {
    .app {
        display: block
    }

    .sidebar {
        height: auto;
        position: relative;
        padding: 10px;
        display: flex;
        overflow: auto
    }

    .brand {
        padding: 0 8px
    }

    .brand-mark {
        width: 38px;
        height: 38px
    }

    .nav {
        display: flex
    }

    .nav a {
        min-width: 42px
    }

    .topbar {
        padding: 0 16px
    }

    .content {
        padding: 18px 14px
    }

    .grid-4,
    .grid-3,
    .grid-2,
    .form-grid,
    .split,
    .context-grid {
        grid-template-columns: 1fr
    }

    .span-2 {
        grid-column: auto
    }

    .page-head {
        align-items: flex-start;
        flex-direction: column
    }

    .calendar-row {
        grid-template-columns: 70px 1fr
    }

    .calendar-row>*:nth-child(n+3) {
        grid-column: 2
    }

    .login-page { padding: 14px }
    .auth-shell { display: block; width: 100%; min-height: auto; border-radius: 24px }
    .auth-visual { display: none }
    .auth-panel { padding: 36px 24px }
    .auth-mobile-logo { display: block; width: 72px; height: 72px; object-fit: contain; border-radius: 19px; box-shadow: 0 12px 28px rgba(91,34,128,.14); margin-bottom: 25px }
    .auth-form h2 { font-size: 29px }
    .context-shell { width: 100%; padding: 20px; border-radius: 22px }
    .context-brand { align-items: flex-start }
    .context-brand img { width: 50px; height: 50px }
    .queue-row { grid-template-columns:36px 1fr }
    .queue-row > *:nth-child(n+3) { grid-column:2 }
    .po-line { grid-template-columns:1fr 1fr }
    .po-line > *:first-child { grid-column:1/3 }
}

@media print {

    .sidebar,
    .topbar,
    .no-print {
        display: none !important
    }

    .app {
        display: block
    }

    .content {
        padding: 0
    }

    .receipt {
        border: 0;
        box-shadow: none
    }

    .print-only {
        display: block
    }
}