:root {
    --bg: #f5f5f5;
    --bg-elevated: #ffffff;
    --zblack: #000000;
    --ink: var(--zblack);
    --ink-soft: #1a1a1a;
    --muted: #595959;
    --line: #e6e6e6;
    --line-strong: var(--zblack);
    --accent: var(--zblack);
    --accent-invert: #ffffff;
    --danger: #b42318;
    --success: #067647;
    --shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
    --radius: 14px;
    --font: "Manrope", system-ui, -apple-system, sans-serif;
    --font-sans: "Manrope", system-ui, -apple-system, sans-serif;
    --display: "Manrope", system-ui, -apple-system, sans-serif;
    --lux: "Manrope", system-ui, -apple-system, sans-serif;
    --metal: var(--zblack);
    --metal-soft: rgba(0, 0, 0, 0.12);
    --pearl: #ffffff;
    --graphite: var(--zblack);
    --lux-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 6px 18px rgba(0, 0, 0, 0.06);
    --track-label: 0.02em;
    --track-title: -0.02em;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 15.5px;
    line-height: 1.55;
    font-weight: 500;
    color: var(--ink);
    background: var(--bg);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-align: left;
}

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

h1, h2, h3, h4 {
    margin: 0;
    line-height: 1.12;
    text-wrap: balance;
}

h1 {
    font-family: var(--font);
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    font-weight: 700;
    letter-spacing: var(--track-title);
}

h2 {
    font-family: var(--font);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

h3 {
    font-family: var(--font);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

h4 {
    font-family: var(--font);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.muted {
    color: var(--muted);
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.55;
}

.eyebrow {
    margin: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.btn:active {
    transform: scale(0.98);
}

.btn-sm {
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
}

.btn-lg {
    padding: 0.95rem 1.4rem;
    font-size: 1rem;
}

.btn-block {
    width: 100%;
}

.btn-primary {
    background: var(--ink);
    color: var(--accent-invert);
}

.btn-primary:hover {
    background: var(--zblack);
    opacity: 0.88;
}

.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
}

.btn-ghost:hover {
    border-color: var(--ink);
}

.btn-outline {
    background: transparent;
    border-color: var(--line-strong);
    color: var(--ink);
}

.btn-outline:hover {
    background: var(--ink);
    color: #fff;
}

/* Alerts */
.alert {
    padding: 0.9rem 1rem;
    border-radius: 10px;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}

.alert-error {
    background: #fef3f2;
    color: var(--danger);
    border: 1px solid #fecdca;
}

.alert-success {
    background: #ecfdf3;
    color: var(--success);
    border: 1px solid #abeec2;
}

/* Fields */
.field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.field span {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.field input:disabled {
    background: #f0f0ee;
    color: var(--muted);
}

.url-wrap {
    display: flex;
    align-items: stretch;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.url-wrap:focus-within {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.url-prefix {
    display: flex;
    align-items: center;
    padding: 0 0.85rem;
    background: #f4f4f2;
    border-right: 1px solid var(--line);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.url-wrap input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

.password-wrap {
    position: relative;
}

.password-wrap input {
    padding-right: 2.75rem !important;
    width: 100%;
    box-sizing: border-box;
}

.toggle-pass {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #777;
    display: inline-grid;
    place-items: center;
    padding: 0;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.toggle-pass:hover {
    color: #111;
    background: #f3f3f3;
}

.toggle-pass .eye-icon {
    display: block;
}

.toggle-pass .eye-icon[hidden] {
    display: none !important;
}

.toggle-pass.is-on {
    color: #111;
}

/* ========== LOGIN ========== */
.login-body {
    margin: 0;
    min-height: 100vh;
    background: var(--zblack);
    color: var(--ink);
}

.login-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.login-brand {
    position: relative;
    overflow: hidden;
    background: var(--zblack);
    color: #fff;
    padding: clamp(2rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 100vh;
    text-align: left;
}

.login-brand-glow {
    position: absolute;
    inset: -20% auto auto -10%;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.08), transparent 68%);
    pointer-events: none;
    animation: loginGlow 8s ease-in-out infinite alternate;
}

.login-brand-lines {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: linear-gradient(160deg, transparent 8%, var(--zblack) 42%, var(--zblack) 72%, transparent 100%);
    pointer-events: none;
    opacity: 0.9;
}

.login-brand-inner {
    position: relative;
    z-index: 2;
    max-width: 30rem;
    animation: loginRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.brand-mark {
    margin: 0 0 1.75rem;
    font-family: var(--lux);
    font-size: clamp(2.6rem, 5vw, 3.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 0.95;
    color: #fff;
}

.brand-headline {
    margin: 0 0 1.15rem;
    font-family: var(--font);
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: #fff;
}

.brand-sub {
    margin: 0;
    max-width: 24rem;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.65;
}

.login-brand-foot {
    position: relative;
    z-index: 2;
    margin: 3.5rem 0 0;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.38);
    animation: loginRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.login-panel {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
}

.login-form {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 1.05rem;
    padding: 2.2rem 2.15rem 2.25rem;
    background: #fff;
    border: 1px solid var(--zblack);
    border-radius: 16px;
    box-shadow: none;
    animation: loginRise 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    text-align: left;
}

.login-form-header {
    margin-bottom: 0.65rem;
}

.login-kicker {
    margin: 0 0 0.5rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--muted);
}

.login-form-header h2 {
    margin: 0;
    font-family: var(--lux);
    font-size: clamp(2.1rem, 3.2vw, 2.55rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--zblack);
    line-height: 1.05;
}

.login-lead {
    margin: 0.5rem 0 0;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.55;
}

.login-field span {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--zblack);
}

.login-field input {
    min-height: 50px;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--zblack);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-field input:focus {
    border-color: var(--zblack);
    box-shadow: none;
    outline: none;
}

.login-form .password-wrap input {
    padding-right: 2.85rem !important;
}

.login-form .toggle-pass {
    color: #888;
}

.login-form .toggle-pass:hover,
.login-form .toggle-pass.is-on {
    color: #111;
    background: #f0f0f0;
}

.login-submit {
    margin-top: 0.4rem;
    min-height: 52px;
    border-radius: 10px;
    background: var(--zblack) !important;
    border-color: var(--zblack) !important;
    color: #fff !important;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.login-submit:hover {
    background: #fff !important;
    border-color: var(--zblack) !important;
    color: var(--zblack) !important;
}

.login-form-note {
    margin: 0.4rem 0 0;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

@keyframes loginRise {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loginGlow {
    from {
        transform: translate(0, 0) scale(1);
        opacity: 0.85;
    }
    to {
        transform: translate(8%, 6%) scale(1.08);
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-brand {
        min-height: auto;
        padding: 2.25rem 1.5rem 2rem;
        justify-content: flex-end;
    }

    .brand-mark {
        margin-bottom: 1rem;
        font-size: 2.2rem;
    }

    .brand-headline {
        font-size: 1.45rem;
    }

    .login-brand-foot {
        margin-top: 1.75rem;
    }

    .login-panel {
        padding: 1.25rem 1rem 2rem;
        align-items: flex-start;
    }

    .login-form {
        padding: 1.5rem 1.25rem 1.6rem;
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== APP ========== */
.app-body {
    background:
        linear-gradient(180deg, #fafaf8 0%, #f3f3f0 100%);
}

.app-wrap {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 1.5rem 1.5rem 3.5rem;
}

.app-wrap-top {
    padding-top: 1.25rem;
}

body.app-body:has(.settings-panel-fit):not(:has(.time-update-card)) {
    overflow: hidden;
    height: 100vh;
}

.app-wrap:has(.settings-panel-fit):not(:has(.time-update-card)) {
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.app-wrap:has(.time-update-card) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
    padding: 0.75rem 1rem 1.25rem;
}

body.app-body:has(.time-update-card) {
    overflow: auto;
    height: auto;
}

.settings-panel-fit:has(.time-update-card) {
    height: auto;
    min-height: auto;
    max-height: none;
    overflow: visible;
}

.nav-row {
    position: sticky;
    top: 0.75rem;
    z-index: 40;
    margin-bottom: 1.75rem;
}

/* Large nav buttons ? full width, logout at far right */
.main-nav {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 0.85rem;
    margin: 0;
    width: 100%;
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 72px;
    padding: 1.1rem 1rem;
    font-family: var(--font);
    font-size: clamp(0.88rem, 1.8vw, 1rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25;
    background: var(--zblack);
    color: #fff;
    border: 1.5px solid var(--zblack);
    border-radius: 14px;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.nav-btn:hover {
    background: #fff;
    border-color: var(--zblack);
    color: var(--zblack);
    transform: translateY(-1px);
}

.nav-btn.active {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
}

.nav-btn-logout {
    width: 72px;
    min-width: 72px;
    padding: 0;
    justify-self: end;
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
}

.nav-btn-logout:hover {
    background: #fff;
    color: var(--zblack);
    border-color: var(--zblack);
}

.panel {
    background: var(--bg-elevated);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    padding: clamp(1.25rem, 3vw, 2rem);
    box-shadow: var(--shadow);
    animation: rise 0.45s ease both;
}

.panel-narrow {
    max-width: none;
}

.panel-form {
    overflow: visible;
}

.panel-head {
    margin-bottom: 1.5rem;
}

.panel-head-compact {
    margin-bottom: 1.1rem;
}

.panel-head-compact h1 {
    font-size: clamp(1.85rem, 3vw, 2.35rem);
}

.stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.stat {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: linear-gradient(160deg, #fff 0%, #f8f8f6 100%);
}

.stat span {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 0.55rem;
}

.stat strong {
    font-family: var(--display);
    font-size: clamp(2rem, 3vw, 2.45rem);
    font-weight: 500;
    letter-spacing: -0.04em;
    line-height: 1;
}

/* Search */
.search-block {
    margin-bottom: 1.5rem;
}

.search-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.55rem;
    color: var(--ink-soft);
}

.search-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.9rem;
    min-height: 42px;
    background: #fff;
    border: 1.5px solid var(--line-strong);
    border-radius: 10px;
    transition: box-shadow 0.2s ease;
}

.search-bar:focus-within {
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.search-bar svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    color: var(--muted);
}

.search-bar input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.search-bar input::placeholder {
    color: #9a9a96;
    font-weight: 500;
}

.list-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--line);
}

.list-head h2 {
    font-family: var(--display);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -0.03em;
}

.list-head span {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--muted);
}

/* Home: edge-to-edge layout ? nav + search fixed; only list scrolls */
body.app-body:has(.home-toolbar) {
    overflow: hidden;
    height: 100vh;
    margin: 0;
}

.app-wrap:has(.home-toolbar),
.app-wrap.app-wrap-top:has(.home-toolbar) {
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    width: 100%;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.55rem 0.55rem 0.55rem !important;
}

.app-wrap:has(.home-toolbar) .nav-row {
    position: relative;
    top: 0;
    flex-shrink: 0;
    margin: 0 0 0.5rem;
    z-index: 40;
}

.app-wrap:has(.home-toolbar) .main-nav {
    gap: 0.5rem;
}

.app-wrap:has(.home-toolbar) .nav-btn {
    min-height: 52px;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    font-size: clamp(0.8rem, 1.5vw, 0.92rem);
}

.home-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.55rem;
    flex-shrink: 0;
}

.home-search {
    flex: 1 1 420px;
    margin-bottom: 0;
    max-width: none;
    min-width: min(100%, 420px);
}

.home-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-items: flex-end;
}

.home-filter {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 168px;
}

.home-filter > span {
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--zblack);
    text-transform: uppercase;
    letter-spacing: var(--track-label);
    line-height: 1;
}

.home-custom-select {
    width: 100%;
}

.home-custom-select .custom-select-trigger {
    min-height: 42px;
    height: 42px;
    padding: 0 0.9rem;
    border: 1.5px solid var(--zblack);
    border-radius: 8px;
    background: #fff;
    font-family: var(--font);
    font-size: 0.86rem;
    font-weight: 650;
    color: var(--zblack);
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.home-custom-select .custom-select-trigger:hover {
    background: #f7f7f7;
    border-color: var(--zblack);
}

.home-custom-select .custom-select-trigger:focus,
.home-custom-select.is-open .custom-select-trigger {
    border-color: var(--zblack);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.home-custom-select .custom-select-menu {
    top: calc(100% + 6px);
    padding: 0.35rem;
    border: 1.5px solid var(--zblack);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.14);
    max-height: 220px;
}

.home-custom-select .custom-select-menu li {
    padding: 0.65rem 0.8rem;
    border-radius: 7px;
    font-size: 0.86rem;
    font-weight: 600;
}

.home-custom-select .custom-select-menu li:hover {
    background: #f2f2f2;
    color: var(--zblack);
}

.home-custom-select .custom-select-menu li.is-selected {
    background: var(--zblack);
    color: #fff;
}

.home-custom-select .custom-select-menu li.is-selected:hover {
    background: #1a1a1a;
    color: #fff;
}

.panel:has(.home-toolbar) {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0.75rem 0.85rem 0.85rem;
    margin: 0;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
}

.home-search .search-bar {
    min-height: 36px;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
}

.home-search .search-bar input {
    font-size: 0.88rem;
}

.home-table-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    border: 1px solid var(--zblack);
    border-radius: 10px;
}

.home-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
    font-family: var(--font);
}

.home-table th,
.home-table td {
    padding: 0.48rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    line-height: 1.2;
}

.home-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--zblack);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    border-bottom: none;
}

.home-table tbody tr:hover {
    background: #f7f7f7;
}

.home-table tbody tr:last-child td {
    border-bottom: none;
}

.home-table .resto-item {
    display: table-row;
    padding: 0;
    border-bottom: none;
}

.home-table .resto-item[hidden] {
    display: none !important;
}

.home-resto-name {
    display: block;
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 0;
    color: var(--zblack);
}

.home-resto-sub {
    display: block;
    margin-top: 0.05rem;
    font-size: 0.76rem;
    font-weight: 500;
    line-height: 1.15;
    color: #777;
    word-break: break-all;
}

.home-address-line {
    display: block;
    font-weight: 600;
    color: var(--zblack);
    line-height: 1.15;
    margin: 0;
}

.home-url-link {
    display: block;
    max-width: 260px;
    margin-top: 0.05rem;
    font-size: 0.76rem;
    font-weight: 500;
    color: #777;
    text-decoration: none;
    word-break: break-all;
    line-height: 1.15;
}

.home-url-link:hover {
    color: var(--zblack);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.home-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: center;
}

.home-table th:last-child,
.home-table td:last-child {
    text-align: center;
}

.pay-badge,
.home-table .pay-badge.pay-paid,
.home-table .pay-badge.pay-pending {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.45rem 0.9rem !important;
    border-radius: 999px !important;
    font-family: "Manrope", system-ui, sans-serif !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.2 !important;
    border: 1.5px solid var(--zblack) !important;
    background: #fff !important;
    color: var(--zblack) !important;
    box-shadow: none !important;
    cursor: default;
}

.pay-badge.pay-paid,
.home-table .pay-badge.pay-paid {
    background: #fff !important;
    color: var(--zblack) !important;
    border-color: var(--zblack) !important;
}

.pay-badge.pay-pending,
.home-table .pay-badge.pay-pending {
    background: #fff !important;
    color: var(--zblack) !important;
    border-color: var(--zblack) !important;
}

.restaurant-list {
    display: flex;
    flex-direction: column;
}

.restaurant-list .resto-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 0.25rem;
    border-bottom: 1px solid var(--line);
    transition: background 0.15s ease, opacity 0.2s ease;
}

.restaurant-list .resto-item:last-child {
    border-bottom: none;
}

.restaurant-list .resto-item:hover {
    background: #fafaf8;
}

.resto-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.resto-actions form {
    margin: 0;
}

.btn-close-item {
    background: var(--zblack);
    color: #fff;
    border: 1.5px solid var(--zblack);
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close-item:hover {
    background: #333;
    color: #fff;
}

/* Edit ? settings grid (premium suite) */
.settings-panel {
    position: relative;
    background:
        radial-gradient(ellipse at top center, rgba(154, 134, 96, 0.07), transparent 55%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 248, 246, 0.98) 100%);
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 18px;
    padding: 28px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 24px 60px rgba(10, 10, 10, 0.07);
    animation: rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
    min-height: calc(100vh - 100px);
    overflow: hidden;
}

.settings-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--metal), transparent);
    opacity: 0.7;
    pointer-events: none;
}

.settings-panel-fit {
    min-height: 0;
    height: 100%;
    flex: 1;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-sizing: border-box;
}

.settings-top-compact {
    margin-bottom: 0.85rem;
    padding-bottom: 0.7rem;
    flex-shrink: 0;
}

.settings-top-compact .btn-back {
    min-height: 38px;
    padding: 0.45rem 1rem;
    font-size: 0.88rem;
}

.settings-top-compact .settings-site-link {
    font-size: 0.92rem;
}

.settings-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.55rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}

/* Edit suite top bar ? Back | URL | Dashboard + Add */
.edit-topbar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem 1rem;
    margin: 0 0 0.85rem;
    padding: 0.45rem 0.55rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    overflow: visible;
}

.edit-topbar::before {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08), transparent);
    pointer-events: none;
}

.edit-topbar-left,
.edit-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.edit-topbar-btn svg {
    width: 14px;
    height: 14px;
}

.edit-topbar-link svg:not(.edit-topbar-ext) {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    opacity: 0.55;
}

.edit-topbar-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
}

.edit-topbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.15s ease;
}

.edit-topbar-btn:active {
    transform: scale(0.98);
}

.edit-topbar-btn-back,
.edit-topbar-btn-ghost {
    background: var(--zblack);
    color: #fff;
    border: 1px solid var(--zblack);
    box-shadow: none;
}

.edit-topbar-btn-back:hover,
.edit-topbar-btn-ghost:hover {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
    opacity: 1;
}

.edit-topbar-btn-solid {
    background: var(--zblack);
    color: #fff;
    border: 1px solid var(--zblack);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.edit-topbar-btn-solid:hover {
    background: #fff;
    color: var(--zblack);
    box-shadow: none;
}

.edit-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    max-width: min(100%, 520px);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: #f6f6f6;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--zblack);
    text-decoration: none;
    line-height: 1.25;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.edit-topbar-link:hover {
    background: #fff;
    border-color: var(--zblack);
    color: var(--zblack);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.edit-topbar-link:hover svg:not(.edit-topbar-ext) {
    opacity: 1;
}

.edit-topbar-url {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.edit-topbar-ext {
    flex-shrink: 0;
    opacity: 0.4;
    width: 11px;
    height: 11px;
}

.edit-topbar-link:hover .edit-topbar-ext {
    opacity: 0.85;
}

.edit-topbar-link.is-muted {
    color: #8a8a8a;
    font-weight: 500;
    border-style: dashed;
    background: #fafafa;
}

.edit-client-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
}

.edit-client-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    min-width: 0;
    max-width: 100%;
}

.edit-client-name {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #000;
    line-height: 1.2;
    text-align: center;
}

.edit-client-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem 0.55rem;
    max-width: 100%;
}

.edit-client-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    max-width: 100%;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #333;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.edit-client-pill svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    opacity: 0.7;
}

a.edit-client-pill:hover {
    border-color: rgba(0, 0, 0, 0.22);
    color: #000;
    background: #fff;
}

.edit-client-pill.is-muted {
    opacity: 0.65;
    border-style: dashed;
}

a.edit-client-domain-pill:hover {
    border-color: #000;
    background: #000;
    color: #fff;
}

a.edit-client-domain-pill:hover svg {
    opacity: 1;
}

.edit-client-address {
    max-width: min(420px, 100%);
}

.edit-topbar-client {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

.edit-topbar-client .edit-topbar-center {
    padding: 0 0.35rem;
}

.edit-topbar-global {
    margin-bottom: 0.85rem;
}

.app-wrap > .edit-topbar {
    margin: 0 0 0.85rem;
}

.hub-panel > .edit-topbar {
    margin: 0.7rem 0.85rem 0;
}

@media (max-width: 900px) {
    .edit-topbar {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.4rem;
        margin-bottom: 0.4rem;
    }

    .edit-topbar-left,
    .edit-topbar-right,
    .edit-topbar-center {
        width: 100%;
    }

    .edit-topbar-left,
    .edit-topbar-right {
        justify-content: stretch;
    }

    .edit-topbar-left .edit-topbar-btn,
    .edit-topbar-right .edit-topbar-btn {
        flex: 1;
    }

    .edit-topbar-center {
        order: -1;
        justify-content: center;
        padding-bottom: 0.35rem;
        border-bottom: 1px solid rgba(20, 20, 20, 0.07);
    }

    .edit-topbar-link {
        max-width: 100%;
    }

    .edit-client-name {
        font-size: 0.88rem;
    }

    .edit-client-meta {
        gap: 0.3rem;
    }

    .edit-client-pill {
        font-size: 0.64rem;
        max-width: 100%;
    }

    .edit-client-address {
        max-width: 100%;
    }
}

.btn-back {
    min-height: 44px;
    padding: 0.65rem 1.2rem;
    font-size: 0.92rem;
    letter-spacing: 0.02em;
    border-radius: 999px;
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
    box-shadow: none;
}

.btn-back:hover {
    border-color: var(--zblack);
    background: #fff;
    color: var(--zblack);
}

.settings-site-link {
    font-family: var(--font);
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: -0.01em;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    background: rgba(10, 10, 10, 0.04);
    border: 1px solid rgba(20, 20, 20, 0.06);
    word-break: break-all;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.settings-site-link:hover {
    color: var(--ink);
    background: rgba(10, 10, 10, 0.07);
    border-color: rgba(20, 20, 20, 0.14);
}

.muted-link {
    text-decoration: none;
    color: #8a8a86;
    font-weight: 600;
}

/* ???????????????????????????????????????????
   DASH HUB ? B&W reference dashboard
   ??????????????????????????????????????????? */
body.app-body.edit-suite:has(.hub-panel) {
    overflow: hidden;
    height: 100vh;
    margin: 0;
}

.app-wrap:has(.hub-panel) {
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    width: 100%;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
}

.hub-panel.settings-panel,
.settings-panel.hub-panel {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box;
    background: var(--bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
}

.hub-panel.settings-panel::before,
.settings-panel.hub-panel::before {
    display: none !important;
}

.hub-panel > .edit-topbar {
    flex-shrink: 0;
    margin: 0.55rem 0.7rem 0;
}

.dash-panel {
    background: var(--bg) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.dash-shell {
    flex: 1 1 auto;
    min-height: 0;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.dash-shell-full .dash-main {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    padding: 1rem 1.15rem 1.15rem;
    box-sizing: border-box;
}

.dash-sidebar {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: #fff;
    border-right: 1px solid #e4e4e4;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1rem;
    background: var(--zblack);
    color: #fff;
}

.dash-brand-mark {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff;
    color: var(--zblack);
    flex-shrink: 0;
}

.dash-brand-eyebrow {
    margin: 0;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.dash-brand-name {
    margin: 0.15rem 0 0;
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
}

.dash-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.75rem 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dash-nav-item {
    appearance: none;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.65rem 0.75rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #333;
    font-size: 0.84rem;
    font-weight: 650;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.dash-nav-ico {
    display: grid;
    place-items: center;
    color: #666;
}

.dash-nav-item:hover {
    background: #f3f3f3;
    color: var(--zblack);
}

.dash-nav-item.is-active {
    background: #ececec;
    color: var(--zblack);
}

.dash-nav-item.is-active .dash-nav-ico {
    color: var(--zblack);
}

.dash-help {
    margin: 0.5rem 0.75rem 0.9rem;
    padding: 0.95rem;
    border-radius: 14px;
    background: #f6f6f6;
    border: 1px solid #e6e6e6;
}

.dash-help-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--zblack);
}

.dash-help-text {
    margin: 0.35rem 0 0.75rem;
    font-size: 0.76rem;
    color: #777;
    line-height: 1.4;
}

.dash-help-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--zblack);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.dash-main {
    min-width: 0;
    min-height: 0;
    overflow: auto;
    padding: 1rem 1.1rem 1.35rem;
}

.dash-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem 1.25rem;
    align-items: center;
    margin-bottom: 0.95rem;
}

.dash-header-left {
    display: flex;
    align-items: center;
    min-width: 0;
    padding-top: 0.55rem;
    padding-left: 0.85rem;
}

.dash-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 48px;
    margin-top: 0.35rem;
    margin-left: 0.5rem;
    padding: 0.65rem 1.35rem;
    border-radius: 12px;
    border: 1.5px solid var(--zblack);
    background: var(--zblack);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 750;
    text-decoration: none;
}

.dash-back:hover {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
}

.dash-header-mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    text-align: center;
}

.dash-site {
    max-width: min(100%, 720px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: clamp(1.15rem, 2.2vw, 1.65rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--zblack);
    text-decoration: none;
    line-height: 1.2;
}

.dash-site:hover {
    text-decoration: underline;
}

.dash-site.is-muted {
    color: #999;
    font-weight: 650;
    font-size: 1rem;
    text-decoration: none;
}

.dash-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
}

.dash-ghost-btn,
.dash-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.65rem 1.35rem;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 750;
    text-decoration: none;
    white-space: nowrap;
}

.dash-ghost-btn {
    background: var(--zblack);
    color: #fff;
    border: 1.5px solid var(--zblack);
}

.dash-ghost-btn:hover {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
}

.dash-primary-btn {
    background: var(--zblack);
    color: #fff;
    border: 1.5px solid var(--zblack);
}

.dash-primary-btn:hover {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
}

.dash-search {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    max-width: 360px;
    min-height: 40px;
    margin: 0 0 0.95rem;
    padding: 0 0.9rem;
    border-radius: 10px;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
}

.dash-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--zblack);
    outline: none;
}

.dash-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
    margin-bottom: 0.85rem;
}

.dash-stat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e8e8e8;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.dash-stat-ico {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f1f1f1;
    color: var(--zblack);
    flex-shrink: 0;
}

.dash-stat-ico svg,
.dash-stat-ico .dash-ico {
    width: 16px;
    height: 16px;
    display: block;
    stroke-width: 1.5;
}

.dash-stat-label {
    margin: 0;
    font-size: 0.64rem;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.2;
}

.dash-stat-value {
    margin: 0.08rem 0 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--zblack);
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.dash-section {
    margin-bottom: 1.15rem;
}

.dash-section:has(.dash-mgmt-grid) {
    margin-top: 1.25rem;
}

.dash-section:has(.dash-tools) {
    margin-top: 1.75rem;
}

.dash-section-title {
    margin: 0 0 0.85rem;
    font-family: var(--lux);
    font-size: clamp(1.35rem, 2vw, 1.65rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zblack);
    text-align: left;
    line-height: 1.1;
}

.dash-mgmt-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

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

.dash-card,
a.dash-card,
button.dash-card,
.dash-card.hub-tile,
button.dash-card.hub-tile {
    appearance: none !important;
    -webkit-appearance: none !important;
    font: inherit;
    position: relative;
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: 132px;
    padding: 1.2rem 1.25rem 1.25rem !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    background-color: #fff !important;
    color: var(--zblack) !important;
    text-align: left;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition:
        border-color 0.22s ease,
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 18%;
    right: 18%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
    pointer-events: none;
    z-index: 1;
}

.dash-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #111;
    opacity: 0;
    transform: scaleY(0.55);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.dash-card-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background:
        linear-gradient(160deg, #f7f7f7 0%, #ececec 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #111 !important;
    margin-bottom: 0.95rem;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 14px rgba(0, 0, 0, 0.05);
    padding: 0;
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.dash-card-icon svg,
.dash-card-icon .dash-ico {
    width: 20px;
    height: 20px;
    display: block;
    stroke-width: 1.55;
    shape-rendering: geometricPrecision;
    color: #111 !important;
    stroke: #111 !important;
    transition: stroke 0.2s ease, color 0.2s ease;
}

.dash-card-icon svg [fill="currentColor"],
.dash-card-icon .dash-ico [fill="currentColor"] {
    fill: #111 !important;
}

.dash-card-title {
    margin: 0;
    font-family: var(--lux);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.025em;
    color: #0d0d0d !important;
    line-height: 1.15;
    text-align: left;
}

.dash-card-desc {
    margin: 0.4rem 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #6b6b6b !important;
    line-height: 1.5;
    max-width: 23ch;
    opacity: 1;
    text-align: left;
    padding-right: 1.8rem;
}

.dash-card-go {
    position: absolute;
    right: 1.05rem;
    bottom: 1.05rem;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #f2f2f2 !important;
    color: #111 !important;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.dash-card:hover,
a.dash-card:hover,
button.dash-card:hover {
    background:
        linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    color: var(--zblack) !important;
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 48px rgba(0, 0, 0, 0.1),
        0 6px 14px rgba(0, 0, 0, 0.04);
    opacity: 1;
}

.dash-card:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

.dash-card:hover .dash-card-icon {
    background: #111 !important;
    border-color: #111;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    transform: scale(1.04);
}

.dash-card:hover .dash-card-icon svg,
.dash-card:hover .dash-card-icon .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

.dash-card:hover .dash-card-icon svg [fill="currentColor"],
.dash-card:hover .dash-card-icon .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.dash-card:hover .dash-card-go {
    background: #111 !important;
    border-color: #111;
    color: #fff !important;
    transform: translateX(3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.dash-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
}

.dash-tool,
a.dash-tool,
button.dash-tool,
.dash-tool.hub-tile {
    appearance: none !important;
    -webkit-appearance: none !important;
    font: inherit;
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 0.9rem;
    min-height: 78px;
    padding: 1rem 2.6rem 1rem 1.1rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    background-color: #fff !important;
    color: var(--zblack) !important;
    text-decoration: none !important;
    text-align: left;
    cursor: pointer;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition:
        border-color 0.22s ease,
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-tool::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
    pointer-events: none;
}

.dash-tool::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #111;
    opacity: 0;
    transform: scaleY(0.55);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.dash-tool-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background:
        linear-gradient(160deg, #f7f7f7 0%, #ececec 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    color: #111 !important;
    flex-shrink: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 14px rgba(0, 0, 0, 0.05);
    transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.dash-tool-icon svg,
.dash-tool-icon .dash-ico {
    width: 20px;
    height: 20px;
    display: block;
    stroke-width: 1.55;
    shape-rendering: geometricPrecision;
    color: #111 !important;
    stroke: #111 !important;
}

.dash-tool-icon svg [fill="currentColor"],
.dash-tool-icon .dash-ico [fill="currentColor"] {
    fill: #111 !important;
}

.dash-tool-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.dash-tool-title {
    margin: 0;
    font-family: var(--lux);
    font-size: 1.14rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #0d0d0d !important;
    line-height: 1.2;
    text-align: left;
}

.dash-tool-desc {
    margin: 0;
    font-size: 0.76rem;
    font-weight: 500;
    color: #6b6b6b !important;
    line-height: 1.45;
    text-align: left;
}

.dash-tool:hover,
a.dash-tool:hover,
button.dash-tool:hover {
    background:
        linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    transform: translateY(-3px);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 48px rgba(0, 0, 0, 0.1),
        0 6px 14px rgba(0, 0, 0, 0.04);
    opacity: 1;
}

.dash-tool:hover::after {
    opacity: 1;
    transform: scaleY(1);
}

.dash-tool:hover .dash-tool-icon {
    background: #111 !important;
    border-color: #111;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
    transform: scale(1.04);
}

.dash-tool:hover .dash-tool-icon svg,
.dash-tool:hover .dash-tool-icon .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

.dash-tool:hover .dash-tool-icon svg [fill="currentColor"],
.dash-tool:hover .dash-tool-icon .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.dash-tool .dash-card-go {
    background: #f2f2f2 !important;
    color: #111 !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.dash-tool:hover .dash-card-go {
    background: #111 !important;
    border-color: #111;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.dash-rail {
    min-height: 0;
    overflow: auto;
    padding: 1rem 0.85rem 1.1rem 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    border-left: 1px solid #e4e4e4;
    background: #f7f7f7;
}

.dash-rail-card {
    padding: 0.95rem;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #e8e8e8;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.03);
}

.dash-rail-title {
    margin: 0 0 0.7rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--zblack);
}

.dash-quick {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.dash-quick-item {
    appearance: none;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.65rem 0.55rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #222;
    font-size: 0.8rem;
    font-weight: 650;
    text-decoration: none;
    text-align: left;
    cursor: pointer;
}

.dash-quick-item:hover {
    background: #f3f3f3;
}

.dash-quick-item > span:first-child {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #f1f1f1;
    color: var(--zblack);
    flex-shrink: 0;
}

.dash-quick-chev {
    margin-left: auto;
    color: #999;
}

.dash-activity {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.dash-activity li {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.dash-activity-dot {
    width: 8px;
    height: 8px;
    margin-top: 0.35rem;
    border-radius: 50%;
    background: var(--zblack);
    flex-shrink: 0;
}

.dash-activity-action {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #222;
    line-height: 1.3;
    word-break: break-word;
}

.dash-activity-time {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
    color: #888;
}

.dash-activity-empty {
    margin: 0;
    font-size: 0.8rem;
    color: #888;
}

.clean-hub,
.dash-subhub {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem 1rem 1rem;
    overflow: auto;
    background: #f2f2f2;
}

.clean-hub-head {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.clean-hub-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--zblack);
}

.clean-hub-sub {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #777;
}

.clean-hub-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: min(280px, 100%);
    min-height: 38px;
    padding: 0 0.85rem;
    border: 1px solid #d8d8d4;
    border-radius: 10px;
    background: #fff;
    color: #888;
}

.clean-hub-search input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--zblack);
    outline: none;
}

.hub-empty {
    grid-column: 1 / -1;
    padding: 2rem 1rem;
    text-align: center;
    color: #777;
    font-weight: 600;
}

.hub-tile[hidden] {
    display: none !important;
}

@media (max-width: 1200px) {
    .dash-mgmt-grid,
    .dash-mgmt-grid-sub {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (max-width: 900px) {
    .dash-shell {
        overflow: auto;
    }

    .dash-header {
        grid-template-columns: 1fr;
        justify-items: stretch;
    }

    .dash-header-left,
    .dash-header-mid,
    .dash-header-right {
        width: 100%;
        align-items: center;
        justify-content: center;
    }

    .dash-header-right {
        flex-wrap: wrap;
    }

    .dash-site {
        font-size: 1.15rem;
        max-width: 100%;
        white-space: normal;
        word-break: break-all;
    }

    .dash-mgmt-grid,
    .dash-mgmt-grid-sub,
    .dash-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clean-hub-head {
        flex-direction: column;
        align-items: stretch;
    }

    .clean-hub-search {
        width: 100%;
    }
}

@media (max-width: 560px) {
    .dash-stats,
    .dash-mgmt-grid,
    .dash-mgmt-grid-sub,
    .dash-tools {
        grid-template-columns: 1fr;
    }

    .dash-card {
        min-height: 104px;
    }

    .dash-shell-full .dash-main {
        padding: 0.85rem 0.85rem 1rem;
    }
}

/* Orders list page ? compact filters + custom dropdowns */
.orders-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 0.85rem;
    padding: 0;
    background: transparent;
    border: none;
}

.orders-filter-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.orders-filter-field > span {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #777;
    line-height: 1;
}

.orders-filter-control,
.custom-select-trigger {
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 0 0.75rem;
    border: 1.5px solid #d0d0cc;
    border-radius: 6px;
    background: #fff;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--zblack);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.orders-filter-control:hover,
.custom-select-trigger:hover {
    border-color: #999;
}

.orders-filter-control:focus,
.custom-select-trigger:focus,
.custom-select.is-open .custom-select-trigger {
    border-color: var(--zblack);
    box-shadow: 0 0 0 2px rgba(10, 10, 10, 0.08);
}

.custom-select {
    position: relative;
}

.custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    text-align: left;
}

.custom-select-trigger::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 2px solid var(--zblack);
    border-bottom: 2px solid var(--zblack);
    transform: rotate(45deg);
    margin-top: -3px;
    flex-shrink: 0;
    transition: transform 0.15s ease;
}

.custom-select.is-open .custom-select-trigger::after {
    transform: rotate(225deg);
    margin-top: 3px;
}

.custom-select-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.custom-select-menu {
    position: absolute;
    z-index: 50;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1.5px solid var(--zblack);
    border-radius: 8px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
    max-height: 200px;
    overflow: auto;
}

.custom-select-menu li {
    padding: 0.55rem 0.7rem;
    border-radius: 5px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--zblack);
    cursor: pointer;
}

.custom-select-menu li:hover {
    background: #f2f2f0;
}

.custom-select-menu li.is-selected {
    background: var(--zblack);
    color: #fff;
}

.custom-select-menu li.is-selected:hover {
    background: #1a1a1a;
    color: #fff;
}

/* Download DB ? password verification */
.verify-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 180px);
    width: 100%;
    padding: 1rem 0.5rem;
}

.verify-card {
    width: 100%;
    max-width: 520px;
    background: linear-gradient(180deg, #fff 0%, var(--pearl) 100%);
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    padding: 2.15rem 1.9rem;
    box-shadow: var(--lux-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}

.panel-modal .verify-card,
.panel-modal-verify.verify-card {
    max-width: none;
    width: 100%;
    box-sizing: border-box;
}

.verify-card h2 {
    margin: 0;
    font-family: var(--lux);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--graphite);
    line-height: 1.15;
}

.verify-card > p {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #5c5c58;
    line-height: 1.55;
}

.verify-card .field span {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6a6a66;
}

.verify-card .field input {
    border-color: rgba(20, 20, 20, 0.14);
    border-radius: 12px;
    min-height: 48px;
}

.verify-card .field input:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.verify-btn {
    margin-top: 0.45rem;
    width: 100% !important;
    max-width: none !important;
    align-self: stretch !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 52px;
    border-radius: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.88rem;
}

.panel-modal .verify-btn,
.verify-card .verify-btn,
.verify-card .btn.btn-primary {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-self: stretch !important;
}

/* Close ? SHORTCUTS panel */
.shortcuts-wrap {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    flex: 1;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}

.shortcuts-card {
    width: 100%;
    max-width: none;
    height: 100%;
    min-height: 0;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--lux-shadow);
    display: flex;
    flex-direction: column;
}

.shortcuts-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    background:
        linear-gradient(135deg, #1a1a1a 0%, var(--zblack) 50%, #171717 100%);
    color: #f7f5f0;
    padding: 1rem 1.25rem;
    flex-shrink: 0;
    position: relative;
}

.shortcuts-head::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--metal), transparent);
    opacity: 0.55;
}

.shortcuts-head strong {
    font-family: var(--lux);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.shortcuts-menu-icon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
    flex-shrink: 0;
}

.shortcuts-menu-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.35);
}

.shortcuts-list {
    padding: 0;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.35rem;
    border-bottom: 1px solid rgba(20, 20, 20, 0.06);
    cursor: pointer;
    flex: 1;
    min-height: 0;
    transition: background 0.15s ease;
}

.shortcut-row:hover {
    background: rgba(10, 10, 10, 0.02);
}

.shortcut-row:last-child {
    border-bottom: none;
}

.shortcut-row > span {
    font-family: var(--font);
    font-size: clamp(0.95rem, 2.2vh, 1.08rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #161616;
}

.shortcut-toggle {
    appearance: none;
    -webkit-appearance: none;
    width: 50px;
    height: 28px;
    border-radius: 999px;
    background: #d5d5d0;
    position: relative;
    cursor: pointer;
    transition: background 0.2s ease;
    flex-shrink: 0;
    border: none;
    margin: 0;
}

.shortcut-toggle::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.2s ease;
}

.shortcut-toggle:checked {
    background: var(--graphite);
}

.shortcut-toggle:checked::after {
    transform: translateX(22px);
}

.shortcuts-save {
    display: block;
    width: 100%;
    margin: 0.9rem 0 0;
    padding: 0 1.1rem;
    min-height: 48px;
    height: 48px;
    border: none;
    border-radius: 0;
    background: linear-gradient(165deg, #1c1c1c, var(--zblack));
    color: #f7f5f0;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    cursor: pointer;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
    transition: background 0.2s ease, transform 0.15s ease;
}

.shortcuts-save:hover {
    background: linear-gradient(165deg, #2a2a2a, #151515);
    transform: translateY(-1px);
}

/* Home shortcuts popup */
.shortcuts-modal[hidden] {
    display: none !important;
}

.shortcuts-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.shortcuts-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 8, 8, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.shortcuts-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    max-height: calc(100vh - 2rem);
    animation: luxPop 0.38s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.shortcuts-modal-card {
    height: auto;
    max-height: calc(100vh - 2rem);
    box-shadow: var(--lux-shadow);
}

.shortcuts-modal-card .shortcuts-list {
    overflow: visible;
    flex: none;
}

.shortcuts-modal-card .shortcut-row {
    flex: none;
    min-height: 54px;
    padding: 0.9rem 1.35rem;
}

.shortcuts-modal-x {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}

.shortcuts-modal-x::before,
.shortcuts-modal-x::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
}

.shortcuts-modal-x::before {
    transform: rotate(45deg);
}

.shortcuts-modal-x::after {
    transform: rotate(-45deg);
}

.shortcuts-modal-x:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: none;
}

body.shortcuts-modal-open,
body.panel-modal-open {
    overflow: hidden;
}

@keyframes luxPop {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Settings feature popups ? luxury */
.panel-modal[hidden] {
    display: none !important;
}

.panel-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.panel-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.panel-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(80vw, 100%);
    height: min(80vh, 100%);
    max-height: 80vh;
    overflow: auto;
    animation: luxPop 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.panel-modal-sm,
.panel-modal-md,
.panel-modal-lg,
.panel-modal-printing {
    width: min(80vw, 100%);
    height: min(80vh, 100%);
    max-height: 80vh;
}

.panel-modal-order-actions {
    width: min(360px, calc(100vw - 2rem)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto;
    align-self: center;
}

#panelModal-order-actions.panel-modal {
    display: flex;
    align-items: center;
    justify-content: center;
}

.panel-modal-order-actions .panel-modal-card {
    height: auto;
    min-height: 0;
    box-sizing: border-box;
}

.panel-modal-more-time {
    width: min(380px, 94vw);
    height: auto !important;
    max-height: min(92vh, 100%);
    overflow: visible;
}

.panel-modal-invoice {
    display: none;
}

.panel-modal-dialog:has(.time-setting-card) .panel-modal-card,
.panel-modal-dialog .time-setting-card,
.panel-modal-dialog .panel-modal-time-card {
    height: 100%;
    min-height: 100%;
    box-sizing: border-box;
}

.panel-modal-card {
    background: #fff;
    border: 1px solid var(--zblack);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--lux-shadow);
}

.panel-modal-head {
    background: var(--zblack);
    color: #fff;
    padding: 1.2rem 3.5rem 1.2rem 1.5rem;
    font-family: var(--lux);
    font-size: clamp(1.35rem, 2.2vw, 1.65rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    line-height: 1.15;
    position: relative;
}

.panel-modal-head::after {
    content: "";
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 0;
    height: 1px;
    background: #fff;
    opacity: 0.28;
}

.panel-modal-body {
    padding: 1.5rem 1.5rem 1.55rem;
    text-align: left;
}

.panel-modal-form {
    margin: 0;
}

.panel-modal-form .form-actions {
    margin-top: 0.65rem;
}

.panel-modal-form .btn-primary {
    border-radius: 10px;
    min-height: 50px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.82rem;
    font-weight: 700;
}

.printing-popup-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem 0.95rem;
    margin-bottom: 0;
}

.printing-popup-grid .field:last-child:nth-child(odd) {
    grid-column: auto;
}

.panel-modal-printing,
.panel-modal-payment {
    width: min(96vw, 1180px);
    height: min(88vh, 100%);
    max-height: 88vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-modal-payment {
    width: min(96vw, 1180px);
}

.panel-modal-payment .printing-popup-card {
    border-radius: 18px;
    box-shadow:
        0 28px 80px rgba(0, 0, 0, 0.28),
        0 2px 0 rgba(255, 255, 255, 0.06) inset;
}

.panel-modal-payment .printing-popup-card > .panel-modal-head {
    padding: 1.35rem 10rem 1.35rem 1.65rem;
    letter-spacing: -0.02em;
}

.panel-modal-payment .printing-popup-form {
    padding: 1.25rem 1.5rem 0 !important;
    background:
        linear-gradient(180deg, #f7f7f7 0%, #fff 42%);
}

.payment-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.85rem !important;
    margin: 0.15rem 0 0.75rem !important;
}

@media (max-width: 700px) {
    .payment-menu {
        grid-template-columns: 1fr !important;
    }
}

.payment-menu .printing-menu-btn::before {
    content: none !important;
    display: none !important;
}

.payment-menu .printing-menu-btn::after {
    top: 50%;
    transform: translateY(-50%);
    right: 0.95rem;
    opacity: 0.55;
    border-color: #fff;
}

.payment-menu-btn {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 0.85rem !important;
    min-height: 92px;
    padding: 1rem 2.4rem 1rem 1rem !important;
    border-radius: 14px !important;
    border-color: var(--zblack) !important;
    background: var(--zblack) !important;
    color: #fff !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14) !important;
}

.payment-menu-btn:hover,
.payment-menu-btn:focus-visible,
.payment-menu-btn:active {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
}

.payment-menu-btn .printing-menu-label {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 750;
    letter-spacing: -0.025em;
    color: inherit;
}

.payment-menu-btn .printing-menu-status {
    margin-top: 0;
    margin-left: auto;
    margin-right: 0.15rem;
    padding: 0.28rem 0.65rem;
    font-size: 0.64rem;
}

.payment-menu-btn .printing-menu-status.is-inactive,
.payment-menu-btn .printing-menu-status.is-empty {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
}

.payment-menu-btn .printing-menu-status.is-active {
    background: #ecfdf3;
    border-color: #ecfdf3;
    color: #067647;
}

.payment-menu-btn .printing-menu-status.is-set {
    background: #fff;
    border-color: #fff;
    color: var(--zblack);
}

.pay-menu-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.pay-menu-ico.is-lg {
    width: 3rem;
    height: 3rem;
    border-radius: 12px;
    background: var(--zblack);
    border-color: var(--zblack);
    color: #fff;
}

.payment-menu-btn:hover .pay-menu-ico,
.payment-menu-btn:focus-visible .pay-menu-ico,
.payment-menu-btn:active .pay-menu-ico {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.payment-menu-btn:hover .printing-menu-status.is-inactive,
.payment-menu-btn:hover .printing-menu-status.is-empty,
.payment-menu-btn:focus-visible .printing-menu-status.is-inactive,
.payment-menu-btn:focus-visible .printing-menu-status.is-empty,
.payment-menu-btn:active .printing-menu-status.is-inactive,
.payment-menu-btn:active .printing-menu-status.is-empty {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.payment-menu-btn:hover .printing-menu-status.is-active,
.payment-menu-btn:focus-visible .printing-menu-status.is-active,
.payment-menu-btn:active .printing-menu-status.is-active {
    background: #fff;
    border-color: #fff;
    color: #067647;
}

.panel-modal-payment .printing-panes,
.panel-modal-payment .payment-panes {
    max-width: 100%;
    width: 100%;
    margin: 0;
    gap: 0;
}

.panel-modal-payment .printing-pane {
    margin-top: 0;
    margin-bottom: 0;
    padding: 1.25rem 1.35rem 1.35rem;
    border-radius: 14px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.04);
}

.payment-panes .payment-detail-pane {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.payment-detail-head {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0 0 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.payment-detail-head .printing-pane-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
    font-size: 1.35rem;
}

.payment-detail-desc {
    margin: 0.18rem 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--muted, #595959);
    letter-spacing: 0.01em;
}

.payment-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.95rem 1.25rem;
    margin: 0;
    align-items: start;
}

.payment-field {
    display: flex;
    flex-direction: column;
    gap: 0.38rem;
    min-width: 0;
}

.payment-field > span {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #333;
}

.payment-field input,
.payment-field select {
    width: 100%;
    min-height: 48px;
    padding: 0.7rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    background: #fafafa;
    color: var(--zblack);
    font-family: var(--font, "Manrope", sans-serif);
    font-size: 0.88rem;
    font-weight: 550;
    outline: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.payment-field input:hover,
.payment-field select:hover {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.22);
}

.payment-field input:focus,
.payment-field select:focus {
    background: #fff;
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07);
}

.payment-field-full {
    grid-column: 1 / -1;
}

.payment-choice-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 480px;
    gap: 0.65rem !important;
}

.payment-field-full .payment-choice-pair {
    max-width: 560px;
}

.payment-choice-pair .printing-choice {
    min-height: 48px;
    border-radius: 10px;
}

.payment-mode-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.payment-mode-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1rem 1.05rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: linear-gradient(180deg, #f8f8f8 0%, #fff 100%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.payment-mode-card:hover {
    border-color: rgba(0, 0, 0, 0.2);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

.payment-mode-card > strong {
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    color: var(--zblack);
}

.payment-mode-card .printing-choice-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.panel-modal-payment .printing-popup-actions {
    margin: 0 -1.5rem;
    padding: 1rem 1.5rem 1.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, #fff 40%);
}

.panel-modal-payment .printing-popup-actions .btn-primary {
    min-height: 52px;
    border-radius: 12px;
    font-size: 0.82rem;
    letter-spacing: 0.14em;
}

@media (max-width: 860px) {
    .panel-modal-payment,
    .panel-modal-printing {
        width: min(96vw, 100%);
        height: min(92vh, 100%);
        max-height: 92vh;
    }
}

@media (max-width: 720px) {
    .payment-detail-grid,
    .payment-mode-cards {
        grid-template-columns: 1fr;
    }

    .panel-modal-payment .printing-popup-form {
        padding: 1rem 1rem 0 !important;
    }

    .panel-modal-payment .printing-popup-actions {
        margin: 0 -1rem;
        padding: 0.9rem 1rem 1.05rem;
    }
}

.printing-popup-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    background: #fff;
}

.printing-popup-card > .panel-modal-head {
    flex-shrink: 0;
    padding-right: 9.5rem;
}

.panel-modal-printing .panel-modal-head-actions,
.panel-modal-payment .panel-modal-head-actions {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.panel-modal-printing .panel-modal-head-actions .panel-modal-x,
.panel-modal-payment .panel-modal-head-actions .panel-modal-x {
    position: relative;
    top: auto;
    right: auto;
}

.panel-modal-back {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 0.95rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.panel-modal-back:hover {
    background: #fff;
    border-color: #fff;
    color: var(--zblack);
}

.panel-modal-printing.is-printing-detail .panel-modal-back,
.panel-modal-payment.is-printing-detail .panel-modal-back {
    background: #fff;
    border-color: #fff;
    color: var(--zblack);
}

.panel-modal-printing.is-printing-detail .panel-modal-back:hover,
.panel-modal-payment.is-printing-detail .panel-modal-back:hover {
    background: rgba(255, 255, 255, 0.88);
}

/* Printing popup ? premium menu + panes */
.printing-popup-form {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    max-height: none;
    padding: 1rem 1.25rem 0 !important;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.printing-menu[hidden],
.printing-panes[hidden],
.printing-pane[hidden] {
    display: none !important;
}

.printing-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin: 0.1rem 0 0.55rem;
    flex: 1 1 auto;
    align-content: start;
    overflow: auto;
    min-height: 0;
    counter-reset: print-item;
}

#printingMenu .printing-menu-btn::before,
.print-menu-btn::before {
    content: none !important;
    display: none !important;
}

.print-menu-btn {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap;
    gap: 0.85rem !important;
    min-height: 88px;
    padding: 1rem 2.4rem 1rem 1rem !important;
    border-radius: 14px;
}

.print-menu-btn .printing-menu-label {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 750;
    letter-spacing: -0.02em;
}

.print-menu-btn .printing-menu-status {
    margin-top: 0;
    margin-left: auto;
    margin-right: 0.1rem;
    flex-shrink: 0;
}

.print-menu-ico {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

#printingMenu .printing-menu-btn::after,
.print-menu-btn::after {
    top: 50%;
    bottom: auto;
    right: 0.95rem;
    transform: translateY(-50%) rotate(45deg);
    opacity: 0.55;
}

.print-menu-btn:hover::after,
.print-menu-btn:focus-visible::after,
.print-menu-btn:active::after {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) translate(1px, -1px);
}

.printing-menu-btn {
    appearance: none;
    -webkit-appearance: none;
    counter-increment: print-item;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    min-height: 88px;
    padding: 0.85rem 1.7rem 0.85rem 0.9rem;
    border: 1px solid var(--zblack);
    border-radius: 12px;
    background: var(--zblack);
    color: #fff;
    font-family: var(--font, "Manrope", sans-serif);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
    text-align: left;
    text-transform: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.printing-menu-label {
    display: block;
    width: 100%;
    padding-right: 0.35rem;
    color: inherit;
}

.printing-menu-status {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    margin-top: auto;
    padding: 0.22rem 0.5rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.printing-menu-status.is-active {
    background: #ecfdf3;
    border-color: #ecfdf3;
    color: #067647;
}

.printing-menu-status.is-inactive,
.printing-menu-status.is-empty {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: rgba(255, 255, 255, 0.9);
}

.printing-menu-status.is-set {
    background: #fff;
    border-color: #fff;
    color: var(--zblack);
}

.printing-menu-btn:hover .printing-menu-status.is-active {
    background: #fff;
    border-color: #fff;
    color: #067647;
}

.printing-menu-btn:hover .printing-menu-status.is-inactive,
.printing-menu-btn:hover .printing-menu-status.is-empty {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}

.printing-menu-btn:hover .printing-menu-status.is-set {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.printing-menu-btn::before {
    content: counter(print-item, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #fff;
    color: var(--zblack);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    line-height: 1;
}

.printing-menu-btn::after {
    content: "";
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid currentColor;
    border-top: 1.5px solid currentColor;
    transform: rotate(45deg);
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.printing-menu-btn:hover {
    background: #1a1a1a;
    color: #fff;
    border-color: #1a1a1a;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.printing-menu-btn:hover::before {
    background: #fff;
    color: var(--zblack);
}

.printing-menu-btn:hover::after {
    opacity: 1;
    transform: rotate(45deg) translate(1px, -1px);
}

.printing-menu-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.printing-menu-btn:focus-visible {
    outline: 2px solid var(--zblack);
    outline-offset: 2px;
}

.printing-panes {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: stretch;
    animation: luxPop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.printing-pane {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0.95rem 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    width: 100%;
    margin-top: auto;
    margin-bottom: auto;
}

.printing-pane-title {
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    font-family: var(--font);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--zblack);
    line-height: 1.15;
}

.printing-pane-label {
    margin: 0.1rem 0 0;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted, #595959);
}

.printing-choice-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.55rem;
}

.printing-choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.16);
    border-radius: 8px;
    background: #fff;
    color: var(--zblack);
    font-family: var(--font, "Manrope", sans-serif);
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.printing-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.printing-choice span {
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    font-size: 0.8rem;
    color: inherit;
}

.printing-choice:has(input:checked),
.printing-choice.is-selected {
    background: var(--zblack);
    border-color: var(--zblack);
    color: #fff;
    box-shadow: none;
}

.printing-choice:hover {
    background: var(--zblack);
    border-color: var(--zblack);
    color: #fff;
}

.printing-pane-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.15rem;
}

.printing-pane .field {
    gap: 0.3rem;
}

.printing-pane .field > span {
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--zblack);
}

.printing-pane .field input {
    width: 100%;
    min-height: 40px;
    padding: 0.45rem 0.7rem;
    border: 1.5px solid var(--zblack);
    border-radius: 8px;
    background: #fff;
    color: var(--zblack);
    font-size: 0.84rem;
    font-weight: 600;
    box-sizing: border-box;
}

.printing-pane .field input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--zblack);
}

.printing-popup-actions {
    margin-top: auto;
    padding: 0.85rem 0 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: #fff;
    position: relative;
    z-index: 2;
}

.printing-popup-actions .btn-primary {
    width: 100%;
    min-height: 46px;
    border-radius: 10px;
    background: var(--zblack) !important;
    border-color: var(--zblack) !important;
    color: #fff !important;
    letter-spacing: 0.12em;
}

@media (max-width: 1100px) {
    .printing-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .printing-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .printing-pane-fields {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .printing-menu {
        grid-template-columns: 1fr;
    }

    .printing-menu-btn {
        min-height: 64px;
    }

    .printing-panes {
        width: 100%;
    }
}


.panel-modal-verify {
    margin: 0;
    box-shadow: none;
    border: none;
    border-radius: 18px;
    padding: 2rem 1.75rem 1.75rem;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}

.panel-modal-x {
    position: absolute;
    top: 0.95rem;
    right: 1rem;
    z-index: 5;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.panel-modal-x::before,
.panel-modal-x::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
}

.panel-modal-x::before {
    transform: rotate(45deg);
}

.panel-modal-x::after {
    transform: rotate(-45deg);
}

.panel-modal-x:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.35);
    transform: none;
}

.panel-modal-dialog:has(.verify-card) .panel-modal-x,
.panel-modal-dialog:has(.notice-popup-card) .panel-modal-x,
.panel-modal-dialog:has(.time-setting-card) .panel-modal-x {
    top: 0.85rem;
    right: 0.85rem;
    background: #fff;
    border: 1px solid var(--zblack);
    color: var(--zblack);
    box-shadow: none;
}

.panel-modal-dialog:has(.verify-card) .panel-modal-x:hover,
.panel-modal-dialog:has(.notice-popup-card) .panel-modal-x:hover,
.panel-modal-dialog:has(.time-setting-card) .panel-modal-x:hover {
    background: var(--zblack);
    border-color: var(--zblack);
    color: #fff;
}

.panel-modal-time-card,
.panel-modal-setting-card {
    margin: 0;
    box-shadow: var(--lux-shadow);
    max-height: calc(100vh - 2.5rem);
    overflow: auto;
    border-radius: 16px;
}

.panel-modal-dialog .shortcuts-modal-card {
    margin: 0;
}

/* Time setting page */
.time-setting-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zblack);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: none;
}

.time-setting-head {
    background: var(--zblack);
    color: #fff;
    padding: 1.15rem 1.35rem;
    font-family: var(--lux);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    flex-shrink: 0;
    position: relative;
}

.time-setting-head::after {
    content: "";
    position: absolute;
    left: 1.35rem;
    right: 1.35rem;
    bottom: 0;
    height: 1px;
    background: #fff;
    opacity: 0.35;
}

.time-setting-body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 2.25rem 1.35rem 1.35rem;
    align-content: start;
    align-items: stretch;
    background: #fff;
}

.time-setting-btn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.9rem;
    text-align: left;
    min-height: 88px;
    height: auto;
    padding: 1rem 1.15rem;
    background: var(--zblack);
    color: #fff;
    font-family: var(--font, "Manrope", sans-serif);
    border-radius: 14px;
    border: 1px solid var(--zblack);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    overflow: hidden;
    text-decoration: none;
}

.time-setting-btn::before {
    content: "";
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.time-setting-btn::after {
    content: "?";
    margin-left: auto;
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #fff;
    color: var(--zblack);
    font-size: 1.15rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.time-setting-btn .tile-mono {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    font-size: 1.15rem;
    font-weight: 800;
    border-radius: 10px;
    background: #fff;
    color: var(--zblack);
    letter-spacing: 0;
    line-height: 1;
    border: 1px solid #fff;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.time-setting-btn .tile-label {
    font-family: var(--font, "Manrope", sans-serif);
    font-size: 1.05rem;
    font-weight: 750;
    color: #fff;
    letter-spacing: -0.02em;
}

.time-setting-btn:hover {
    background: #fff;
    color: var(--zblack);
    border-color: var(--zblack);
    transform: translateY(-2px);
    box-shadow: none;
    opacity: 1;
}

.time-setting-btn:hover::before {
    transform: scaleX(1);
    background: var(--zblack);
}

.time-setting-btn:hover::after {
    background: var(--zblack);
    color: #fff;
    transform: translateX(3px);
}

.time-setting-btn:hover .tile-mono {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
    box-shadow: none;
    transform: none;
}

.time-setting-btn:hover .tile-label {
    color: var(--zblack);
}

.time-setting-btn:active {
    transform: translateY(0);
}
@media (max-width: 700px) {
    .time-setting-body {
        grid-template-columns: 1fr;
    }
}

/* Delivery / Takeaway time update */
.time-update-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--zblack);
    border-radius: 16px;
    overflow: visible;
    background: #fff;
    box-shadow: none;
}

.time-update-head {
    background: var(--zblack);
    color: #fff;
    padding: 1.05rem 1.25rem;
    font-family: var(--lux);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    flex-shrink: 0;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.time-update-head::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0;
    height: 1px;
    background: #fff;
    opacity: 0.35;
}

.time-update-body {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0.85rem;
    background: #fff;
    overflow: visible;
}

.time-day-block {
    flex: 0 0 auto;
    min-height: auto;
    background: #fff;
    border: 1px solid var(--zblack);
    border-radius: 8px;
    padding: 0.75rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.time-day-block h3 {
    margin: 0;
    padding-bottom: 0.45rem;
    margin-bottom: 0.15rem;
    border-bottom: 1px solid var(--zblack);
    font-family: var(--lux);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--zblack);
}

.time-day-fields {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.65rem;
    padding-top: 0.45rem;
}

.time-day-fields label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    min-width: 0;
}

.time-day-fields label span {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--zblack);
}

.time-picker {
    position: relative;
    z-index: 1;
}

.time-picker.is-open {
    z-index: 60;
}

.time-picker-trigger {
    width: 100%;
    min-height: 38px;
    height: 38px;
    padding: 0 1.8rem 0 0.65rem;
    border: 1px solid var(--zblack);
    border-radius: 6px;
    background: #fff;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--zblack);
    letter-spacing: 0.01em;
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    position: relative;
}

.time-picker-trigger::after {
    content: "";
    position: absolute;
    right: 11px;
    top: 50%;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--zblack);
    transform: translateY(-30%);
}

.time-picker-trigger:hover {
    border-color: var(--zblack);
    background: #fff;
}

.time-picker.is-open .time-picker-trigger,
.time-picker-trigger:focus {
    border-color: var(--zblack);
    background: var(--zblack);
    color: #fff;
    box-shadow: none;
}

.time-picker.is-open .time-picker-trigger::after,
.time-picker-trigger:focus::after {
    border-top-color: #fff;
}

.time-picker.is-open .time-picker-trigger::after {
    transform: translateY(-70%) rotate(180deg);
}

.time-picker-dropdown {
    position: absolute;
    z-index: 80;
    top: calc(100% + 4px);
    left: 0;
    width: 100%;
    max-width: 110px;
    max-height: 140px;
    overflow-y: auto;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--zblack);
    border-radius: 8px;
    box-shadow: none;
    scrollbar-width: thin;
}

.time-picker-dropdown::-webkit-scrollbar {
    width: 4px;
}

.time-picker-dropdown::-webkit-scrollbar-thumb {
    background: var(--zblack);
    border-radius: 999px;
}

.time-picker-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0.2rem 0.35rem;
    margin-bottom: 1px;
    border-radius: 5px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--zblack);
    cursor: pointer;
    user-select: none;
}

.time-picker-item:last-child {
    margin-bottom: 0;
}

.time-picker-item:hover {
    background: var(--zblack);
    color: #fff;
}

.time-picker-item.is-selected {
    background: var(--zblack);
    color: #fff;
}

.time-input-wrap,
.time-day-fields input[type="time"] {
    display: none;
}

.time-day-fields input[type="text"] {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    height: 38px;
    padding: 0.35rem 0.7rem;
    border: 1.5px solid #cfcfcf;
    border-radius: 8px;
    background: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.time-day-fields input[type="text"]::placeholder {
    color: #999;
    font-weight: 500;
}

.time-day-fields input[type="text"]:hover {
    border-color: #999;
}

.time-day-fields input[type="text"]:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.time-update-save {
    flex-shrink: 0;
    display: block;
    width: 100%;
    margin: 0.85rem 0 0;
    min-height: 50px;
    border: 1px solid var(--zblack);
    border-radius: 0;
    background: var(--zblack);
    color: #fff;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.time-update-save:hover {
    background: #fff;
    color: var(--zblack);
    transform: translateY(-1px);
}

@media (max-width: 800px) {
    .time-day-fields {
        grid-template-columns: 1fr 1fr;
    }

    .time-update-body {
        overflow: auto;
    }
}

/* Order Printing settings */
.printing-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.printing-form {
    margin-top: 0.25rem;
}

.printing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem 1.25rem;
}

.print-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
}

.print-field > span {
    font-size: 0.88rem;
    font-weight: 700;
    color: #222;
    letter-spacing: 0;
    text-transform: none;
}

.print-field input,
.print-select-wrap select {
    width: 100%;
    min-height: 46px;
    height: 46px;
    padding: 0 0.9rem;
    border: 1.5px solid #d0d0cc;
    border-radius: 8px;
    background: #fff;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--zblack);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.print-select-wrap {
    position: relative;
}

.print-select-wrap select {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Advanced printing dropdown */
.adv-select {
    position: relative;
    width: 100%;
}

.adv-select-trigger {
    width: 100%;
    min-height: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 0.9rem;
    border: 1.5px solid #d0d0cc;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff 0%, #f7f7f5 100%);
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--zblack);
    text-align: left;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.adv-select-trigger:hover {
    border-color: #999;
}

.adv-select.is-open .adv-select-trigger,
.adv-select-trigger:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.1);
    background: #fff;
}

.adv-select-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adv-select-value.is-placeholder {
    color: #888;
    font-weight: 600;
}

.adv-select-caret {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--zblack);
    position: relative;
    flex-shrink: 0;
}

.adv-select-caret::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 6px;
    height: 6px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: transform 0.15s ease;
}

.adv-select.is-open .adv-select-caret::after {
    top: 55%;
    transform: translate(-50%, -50%) rotate(225deg);
}

.adv-select-menu {
    position: absolute;
    z-index: 90;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #fff;
    border: 1.5px solid var(--zblack);
    border-radius: 10px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
    max-height: 240px;
    overflow-y: auto;
}

.adv-select-menu.is-up {
    top: auto;
    bottom: calc(100% + 6px);
    box-shadow: 0 -14px 36px rgba(0, 0, 0, 0.14);
}

.adv-select-menu li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.8rem;
    border-radius: 7px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--zblack);
    cursor: pointer;
}

.adv-select-menu li:hover {
    background: #f2f2f0;
}

.adv-select-menu li.is-selected {
    background: var(--zblack);
    color: #fff;
}

.adv-select-menu li.is-selected::after {
    content: none;
    display: none;
}

.print-field input:hover {
    border-color: #999;
}

.print-field input:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.08);
}

.printing-actions {
    margin-top: 1.5rem;
}

.app-wrap:has(.printing-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.printing-panel) {
    overflow: auto;
    height: auto;
}

/* Orders list page */
.orders-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.app-wrap:has(.orders-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.orders-panel) {
    overflow: auto;
    height: auto;
}

/* Payment method page */
.payment-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.payment-section {
    margin-bottom: 0;
    padding-bottom: 0;
}

.payment-section h3 {
    margin: 0;
}

.print-field-full {
    grid-column: 1 / -1;
}

.app-wrap:has(.payment-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.payment-panel) {
    overflow: auto;
    height: auto;
}

/* Postal code page */
.postal-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.postal-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin: 0.5rem 0 0.75rem;
}

.postal-search {
    display: flex;
    flex: 1 1 auto;
    gap: 0;
    max-width: none;
    min-width: 0;
}

.postal-search input[type="search"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    height: 42px;
    padding: 0 0.95rem;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--zblack);
    background: #fff;
}

.postal-search input[type="search"]:focus {
    outline: none;
    border-color: var(--zblack);
}

.postal-exports {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    flex-shrink: 0;
}

.postal-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 42px;
    padding: 0 1.05rem;
    border-radius: 6px;
    border: 1.5px solid var(--zblack);
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}

.postal-dl svg {
    flex-shrink: 0;
}

.postal-dl-csv {
    background: #fff;
    color: var(--zblack);
}

.postal-dl-csv:hover {
    background: var(--zblack);
    color: #fff;
}

.postal-dl-pdf {
    background: var(--zblack);
    color: #fff;
}

.postal-dl-pdf:hover {
    background: #fff;
    color: var(--zblack);
}

.postal-dl:active {
    transform: scale(0.98);
}

.postal-total {
    margin: 0 0 0.75rem;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.95rem;
    color: #222;
}

.postal-table {
    min-width: 720px;
}

.postal-status {
    display: inline-block;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--zblack);
    border-radius: 3px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #fff;
    color: var(--zblack);
}

.postal-status.is-active {
    background: var(--zblack);
    color: #fff;
    border-color: var(--zblack);
}

.postal-status.is-inactive {
    background: #f3f3f3;
    color: #444;
    border-color: #bbb;
}

.postal-delete {
    background: var(--zblack);
    color: #fff;
    border: 1px solid var(--zblack);
    border-radius: 3px;
    padding: 0.35rem 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.postal-delete:hover {
    background: #fff;
    color: var(--zblack);
}

.postal-empty-msg,
.postal-table .empty-cell {
    margin: 0.75rem 0 0;
    font-family: "Manrope", Arial, sans-serif;
    color: #666;
    text-align: center;
}

.inline-form {
    display: inline;
    margin: 0;
}

.app-wrap:has(.postal-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.postal-panel) {
    overflow: auto;
    height: auto;
}

/* Restaurant / Website setting */
.setting-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
}

.website-setting-card {
    margin-top: 0.5rem;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    background: #fff;
    overflow: visible;
    box-shadow: var(--lux-shadow);
}

.website-setting-head {
    background: linear-gradient(135deg, #1a1a1a 0%, var(--zblack) 50%, #171717 100%);
    color: #f7f5f0;
    padding: 1.1rem 1.35rem;
    font-family: var(--lux);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.website-setting-head::after {
    content: "";
    position: absolute;
    left: 1.35rem;
    right: 1.35rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--metal), transparent);
    opacity: 0.55;
}

.website-setting-form {
    padding: 1.35rem 1.35rem 1.5rem;
}

.website-setting-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.website-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
    min-width: 0;
}

.website-field-seo {
    grid-column: 1 / -1;
}

.website-field span {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #222;
}

.website-select {
    width: 100%;
    height: 44px;
    padding: 0 2.4rem 0 0.85rem;
    border: 1.5px solid #c8c8c8;
    border-radius: 6px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23111' d='M1.4 0.6L6 5.2 10.6 0.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    background-size: 12px 8px;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--zblack);
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    box-sizing: border-box;
}

.website-select:hover {
    border-color: #888;
}

.website-select:focus {
    outline: none;
    border-color: var(--zblack);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.website-seo-input {
    width: 100%;
    min-height: 96px;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #c8c8c8;
    border-radius: 6px;
    resize: vertical;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--zblack);
    background: #fff;
    box-sizing: border-box;
    line-height: 1.45;
}

.website-seo-input:hover {
    border-color: #888;
}

.website-seo-input:focus {
    outline: none;
    border-color: var(--zblack);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
}

.website-setting-footer {
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    gap: 1.25rem;
    width: 100%;
}

.website-save-btn {
    min-width: 0;
    width: 100%;
    min-height: 58px;
    height: 58px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 2rem;
    background: var(--zblack) !important;
    border-color: var(--zblack) !important;
    color: #fff !important;
}

.website-seo-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    width: 100%;
}

.website-seo-field span {
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #222;
}

.website-seo-field textarea {
    width: 100%;
    min-height: 96px;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid #c8c8c8;
    border-radius: 6px;
    resize: vertical;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 0.95rem;
    color: var(--zblack);
    background: #fff;
    box-sizing: border-box;
}

.website-seo-field textarea:focus {
    outline: none;
    border-color: var(--zblack);
}

.app-wrap:has(.setting-panel) {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
}

body.app-body:has(.setting-panel) {
    overflow: auto;
    height: auto;
}

/* Karvi SEO content */
.seo-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

.karvi-seo-card {
    margin-top: 0.5rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: #fff;
    padding: 1.35rem 1.4rem 1.2rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.karvi-seo-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    width: 100%;
}

.karvi-seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
    align-items: stretch;
}

.karvi-seo-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fbfbfb;
    padding: 0;
    min-width: 0;
    overflow: hidden;
    box-shadow: none;
}

.karvi-seo-block-head {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.8rem 1.05rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
}

.karvi-seo-block-title {
    margin: 0;
    font-family: var(--font, "Manrope", sans-serif);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zblack);
    line-height: 1.2;
    padding-bottom: 0;
    border-bottom: none;
}

.karvi-seo-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 0.85rem;
    padding: 1rem 1.05rem 1.15rem;
}

.karvi-field-full {
    grid-column: 1 / -1;
}

.karvi-field {
    display: flex;
    flex-direction: column;
    gap: 0.32rem;
    min-width: 0;
}

.karvi-field span {
    font-family: var(--font);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.03em;
    text-transform: none;
    color: #444;
}

.karvi-field span em {
    font-style: normal;
    font-weight: 500;
    color: #999;
}

.karvi-field input,
.karvi-field textarea {
    width: 100%;
    padding: 0.68rem 0.85rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 9px;
    font-family: var(--font);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--zblack);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.karvi-field input {
    min-height: 44px;
    height: 44px;
}

.karvi-field textarea {
    min-height: 108px;
    resize: vertical;
    line-height: 1.45;
}

.karvi-field input::placeholder,
.karvi-field textarea::placeholder {
    color: #b0b0b0;
    font-weight: 500;
}

.karvi-field input:hover,
.karvi-field textarea:hover {
    border-color: rgba(0, 0, 0, 0.26);
}

.karvi-field input:focus,
.karvi-field textarea:focus {
    outline: none;
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.karvi-seo-actions {
    margin: 0;
    display: flex;
    padding: 1rem 0 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: transparent;
}

.karvi-seo-actions .btn-primary {
    width: 100%;
    min-height: 48px;
    min-width: 0;
    border-radius: 10px;
    background: var(--zblack) !important;
    border-color: var(--zblack) !important;
    color: #fff !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 700;
}

.karvi-seo-actions .btn-primary:hover {
    background: #1a1a1a !important;
    color: #fff !important;
    border-color: #1a1a1a !important;
}

.app-wrap:has(.seo-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.seo-panel) {
    overflow: auto;
    height: auto;
}

@media (max-width: 980px) {
    .karvi-seo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .karvi-seo-card {
        padding: 1rem;
        border-radius: 14px;
    }

    .karvi-seo-fields {
        grid-template-columns: 1fr;
        padding: 0.95rem;
    }
}

@media (max-width: 900px) {
    .karvi-seo-grid {
        grid-template-columns: 1fr;
    }
}

/* Backend logs */
.logs-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    font-family: inherit;
}

.logs-suite {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
    font-family: inherit;
}

.logs-suite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.9rem 1.1rem;
    background: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.logs-suite-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
}

.logs-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #888;
}

.logs-suite-title {
    margin: 0;
    font-family: inherit !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #0d0d0d !important;
    line-height: 1.2 !important;
}

.logs-count {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.logs-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin: 0.35rem 0 0.9rem;
}

.logs-title {
    margin: 0;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--zblack);
    letter-spacing: -0.02em;
}

.logs-total {
    margin: 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--muted);
}

.logs-panel .logs-table-wrap {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow-x: auto;
    background: #fff;
}

.logs-table {
    min-width: 980px;
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
}

.logs-table th,
.logs-table td {
    border-right: none;
    vertical-align: middle;
}

.logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 2rem 1rem;
    text-align: center;
    font-family: inherit;
}

.logs-empty strong {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111;
}

.logs-empty span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
}

.logs-sno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.7rem;
    height: 1.7rem;
    padding: 0 0.35rem;
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f7f7f7;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.logs-datetime {
    white-space: nowrap;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.logs-resto {
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #111;
    max-width: 180px;
    word-break: break-word;
}

.logs-action {
    display: inline-block;
    max-width: 100%;
    padding: 0.22rem 0.55rem;
    border-radius: 7px;
    background: #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.35;
    word-break: break-word;
}

.logs-query {
    display: block;
    padding: 0.4rem 0.55rem;
    border-radius: 8px;
    background: #f7f7f7;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: #333;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

.logs-ip {
    white-space: nowrap;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--muted);
    padding: 0.2rem 0.45rem;
    border-radius: 6px;
    background: #f5f5f5;
}

.app-wrap:has(.logs-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.logs-panel) {
    overflow: auto;
    height: auto;
}

@media (max-width: 900px) {
    .website-setting-row {
        grid-template-columns: 1fr;
    }

    .website-setting-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .website-seo-field textarea {
        width: 100%;
    }

    .website-save-btn {
        width: 100%;
    }

    .karvi-seo-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .postal-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .postal-search {
        max-width: none;
    }

    .postal-exports {
        width: 100%;
    }

    .postal-dl {
        flex: 1;
        min-width: 0;
    }
}

@media (max-width: 900px) {
    .printing-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 600px) {
    .printing-grid {
        grid-template-columns: 1fr;
    }
}

.orders-table-wrap {
    overflow-x: auto;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

.orders-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font);
    font-size: 13px;
    min-width: 980px;
}

.orders-table th,
.orders-table td {
    padding: 12px 10px;
    text-align: left;
    border-bottom: 1px solid #e8e8e8;
    vertical-align: top;
}

.orders-table thead th {
    background: #f3f3f3;
    font-weight: 700;
    color: var(--zblack);
    white-space: nowrap;
}

.orders-table tbody tr:nth-child(even) {
    background: #fafafa;
}

.orders-table tbody tr:hover {
    background: #f2f2f2;
}

.pre-line {
    white-space: pre-line;
    line-height: 1.4;
}

.inline-form {
    margin: 0;
    display: inline;
}

.order-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: 1.5px solid var(--zblack);
    border-radius: 4px;
    background: #fff;
    color: var(--zblack);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.order-chip-btn {
    cursor: pointer;
    font-family: inherit;
}

.order-chip-btn:hover {
    background: var(--zblack);
    color: #fff;
}

.order-chip-done {
    background: var(--zblack);
    color: #fff;
}

.orders-empty-row td {
    text-align: center;
    padding: 2rem;
    color: #777;
}

@media (max-width: 900px) {
    .orders-filters {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .orders-filters {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .settings-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 700px) {
    .settings-grid {
        grid-template-columns: 1fr;
    }

    .settings-panel {
        padding: 14px;
    }

    .settings-btn {
        min-height: 72px;
        font-size: 0.82rem;
    }

    .settings-top {
        flex-direction: column;
        align-items: flex-start;
    }
}

.resto-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-bottom: 0.25rem;
}

.resto-title-row h3 {
    font-size: 1.22rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.resto-meta {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink-soft);
}

.resto-detail {
    margin: 0.35rem 0 0;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--muted);
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge-on {
    background: #ecfdf3;
    color: var(--success);
}

.badge-off {
    background: #f4f4f2;
    color: var(--muted);
}

.empty-state {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--muted);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}

.form-grid-3 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.15rem;
    align-items: end;
}

.form-grid-3 .field input,
.form-grid-3 .url-wrap input {
    padding: 0.75rem 0.9rem;
}

.form-grid-3 .url-prefix {
    padding: 0 0.65rem;
    font-size: 0.8rem;
}

.field-full {
    grid-column: 1 / -1;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.35rem;
}

.form-actions.field-full,
.form-actions {
    width: 100%;
}

.form-actions .btn,
.form-actions .btn-primary,
.form-actions .btn-lg,
.panel-modal-form .form-actions .btn-primary,
.panel-modal-form .btn-primary.btn-lg,
.website-save-btn,
.shortcuts-save,
.time-update-save,
.printing-popup-actions .btn-primary,
.karvi-seo-actions .btn-primary,
.payment-save-bar .btn-primary,
.verify-btn,
.verify-card .btn-primary {
    width: 100% !important;
    max-width: none !important;
    display: block;
    box-sizing: border-box;
}

/* Dashboard ? only Website List button page */
.dash-only {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    min-height: calc(100vh - 120px);
    padding: 2rem 1rem;
    position: relative;
}

.dash-back {
    position: absolute;
    top: 0;
    left: 0;
}

.page-back-row {
    margin-bottom: 1rem;
}

.dash-actions {
    margin-bottom: 1.25rem;
}

.website-list-btn {
    min-width: 260px;
    min-height: 72px;
    font-size: 1.2rem;
    border-radius: 14px;
}

/* Add New Restaurant */
.add-resto-panel {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    font-family: inherit;
}

.add-resto-card {
    position: relative;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.04)) border-box;
    border: 1px solid transparent;
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.07);
    animation: rise 0.4s ease both;
}

.add-resto-card::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.18), transparent);
    pointer-events: none;
}

.add-resto-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem 0.9rem;
    background:
        linear-gradient(180deg, #fbfbfb 0%, #fff 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.add-resto-head-text {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    padding-left: 0.75rem;
}

.add-resto-head-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem;
    bottom: 0.15rem;
    width: 3px;
    border-radius: 3px;
    background: #111;
}

.add-resto-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #888;
}

.add-resto-head h1 {
    margin: 0;
    font-family: inherit;
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #0d0d0d;
    line-height: 1.2;
}

.add-resto-form {
    padding: 1.15rem 1.25rem 1.1rem;
    margin: 0;
    background:
        radial-gradient(120% 80% at 50% 0%, #fafafa 0%, #fff 55%);
}

.add-resto-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem 0.95rem;
}

.add-resto-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.add-resto-field-wide {
    grid-column: span 2;
}

.add-resto-field > span {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: #666;
    line-height: 1.2;
}

.add-resto-field input {
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    color: var(--zblack);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.add-resto-field input::placeholder {
    color: #aaa;
    font-weight: 400;
}

.add-resto-field input:hover {
    border-color: rgba(0, 0, 0, 0.22);
}

.add-resto-field input:focus {
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.add-resto-url {
    display: flex;
    align-items: stretch;
    min-height: 42px;
    height: 42px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.add-resto-url:hover {
    border-color: rgba(0, 0, 0, 0.22);
}

.add-resto-url:focus-within {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.add-resto-url-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 0.6rem;
    background: linear-gradient(180deg, #f4f4f4, #ececec);
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 600;
    color: #666;
    white-space: nowrap;
}

.add-resto-url input {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    height: 100%;
    min-height: 0;
}

.add-resto-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    margin: 1rem -1.25rem -1.1rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(180deg, #f7f7f7 0%, #f0f0f0 100%);
}

.add-resto-save {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    height: 40px;
    min-width: 180px;
    padding: 0 1.75rem;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}

.add-resto-save:hover {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
}

.add-resto-save:active {
    transform: translateY(1px);
}

.add-resto-cancel {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    height: 40px;
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    padding: 0 1.25rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    background: #fff;
    color: #111;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.add-resto-cancel:hover {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.28);
    color: #000;
}

@media (max-width: 900px) {
    .add-resto-grid {
        grid-template-columns: 1fr 1fr;
    }

    .add-resto-field-wide {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .add-resto-grid {
        grid-template-columns: 1fr;
    }

    .add-resto-field-wide {
        grid-column: auto;
    }

    .add-resto-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .add-resto-save,
    .add-resto-cancel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }
}

/* Website list */
.website-panel {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06);
    animation: rise 0.45s ease both;
    font-family: inherit;
}

.website-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    background: #fff;
    color: #000;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.website-panel-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.website-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #777;
}

.website-panel-head h1 {
    margin: 0;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #000;
    line-height: 1.2;
}

.website-count {
    flex-shrink: 0;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #f3f3f3;
    border: 1px solid rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--muted);
}

.website-table-wrap {
    overflow: hidden;
    background: #fff;
}

.website-empty {
    padding: 2rem 1.1rem;
    text-align: center;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
}

.website-list-head {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) minmax(140px, 1.2fr) minmax(180px, 1.8fr) 88px;
    gap: 0.65rem;
    align-items: center;
    padding: 0.5rem 1.1rem;
    background: #fafafa;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
}

.website-col-action {
    text-align: right;
}

.website-list {
    display: flex;
    flex-direction: column;
}

.website-row {
    display: grid;
    grid-template-columns: minmax(120px, 1.1fr) minmax(140px, 1.2fr) minmax(180px, 1.8fr) 88px;
    gap: 0.65rem;
    align-items: center;
    padding: 0.55rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fff;
    font-family: inherit;
    transition: background 0.12s ease;
}

.website-row:last-child {
    border-bottom: none;
}

.website-row:hover {
    background: #f7f7f7;
}

.website-row-name {
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--zblack);
    line-height: 1.3;
    word-break: break-word;
}

.website-row-email {
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.3;
    word-break: break-word;
}

.website-row-url {
    min-width: 0;
}

.website-row-action {
    display: flex;
    justify-content: flex-end;
}

.url-save-form {
    margin: 0;
    width: 100%;
}

.url-edit-input {
    width: 100%;
    min-height: 34px;
    height: 34px;
    padding: 0.25rem 0.65rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #fff;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--zblack);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.url-edit-input::placeholder {
    color: #aaa;
    font-weight: 400;
}

.url-edit-input:hover {
    border-color: rgba(0, 0, 0, 0.22);
}

.url-edit-input:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.btn-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    height: 34px;
    padding: 0 0.85rem;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-save:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
}

.btn-save:active {
    background: #000;
}

@media (max-width: 900px) {
    .website-list-head {
        display: none;
    }

    .website-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.85rem 1rem;
    }

    .website-row-action {
        justify-content: flex-start;
    }

    .btn-save {
        width: 100%;
    }
}

/* Legacy table fallback (unused) */
.website-table {
    width: 100%;
    border-collapse: collapse;
    font-family: inherit;
    font-size: 0.9rem;
}

.website-table th,
.website-table td {
    padding: 0.55rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    vertical-align: middle;
    font-family: inherit;
}

.website-table thead th {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted);
    background: #fafafa;
    white-space: nowrap;
}

.col-name,
.col-email {
    font-weight: 500;
    color: var(--zblack);
}

.col-url {
    min-width: 220px;
}

.col-action {
    width: 90px;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 900px) {
    .stats {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 700px) {
    .main-nav {
        grid-template-columns: 1fr;
    }

    .nav-btn {
        min-height: 64px;
        font-size: 1.05rem;
    }

    .nav-btn-logout {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }

    .home-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .home-search {
        max-width: none;
    }

    .home-filters {
        width: 100%;
    }

    .home-filter {
        flex: 1;
        min-width: 0;
    }

    .restaurant-list .resto-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .resto-actions {
        width: 100%;
    }

    .resto-actions .btn,
    .resto-actions .btn-close-item {
        width: 100%;
    }

    .resto-actions form {
        flex: 1;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .stats {
        grid-template-columns: 1fr;
    }

    .app-wrap-top {
        padding-top: 0.85rem;
    }
}

/* ???????????????????????????????????????????
   EDIT SUITE ? premium luxury atmosphere
   ??????????????????????????????????????????? */
body.edit-suite {
    background: #f2f2f2;
    background-attachment: scroll;
    margin: 0;
    min-height: 100vh;
}

body.edit-suite .app-wrap,
body.edit-suite .app-wrap-top {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    min-height: 100vh;
    box-sizing: border-box;
}

body.edit-suite .app-wrap-top:has(.hub-panel),
body.edit-suite .app-wrap-top:has(.settings-panel-fit),
body.edit-suite .app-wrap:has(.settings-panel) {
    padding: 0 !important;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.edit-suite .app-wrap:has(.orders-panel),
body.edit-suite .app-wrap:has(.printing-panel),
body.edit-suite .app-wrap:has(.payment-panel),
body.edit-suite .app-wrap:has(.postal-panel),
body.edit-suite .app-wrap:has(.setting-panel),
body.edit-suite .app-wrap:has(.seo-panel),
body.edit-suite .app-wrap:has(.logs-panel),
body.edit-suite .app-wrap:has(.category-panel),
body.edit-suite .app-wrap:has(.price-panel),
body.edit-suite .app-wrap:has(.cat-order-panel),
body.edit-suite .app-wrap:has(.addon-panel),
body.edit-suite .app-wrap:has(.size-panel),
body.edit-suite .app-wrap:has(.topping-panel),
body.edit-suite .app-wrap:has(.item-images-panel),
body.edit-suite .app-wrap:has(.item-order-panel),
body.edit-suite .app-wrap:has(.time-panel),
body.edit-suite .app-wrap:has(.email-panel),
body.edit-suite .app-wrap:has(.form-suite) {
    padding: 0 !important;
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.edit-suite .settings-panel {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    background: #fff !important;
    overflow: auto !important;
    box-sizing: border-box !important;
    padding: 0.55rem 0.65rem 0.75rem !important;
}

body.edit-suite .settings-panel::before {
    display: none !important;
}

body.edit-suite .lux-page {
    padding: 0.65rem 0.75rem 0.85rem !important;
}

body.edit-suite .hub-panel.settings-panel,
body.edit-suite .settings-panel.hub-panel {
    padding: 0 !important;
    overflow: hidden !important;
}

body.edit-suite .settings-panel-fit {
    padding: 0 !important;
}

body.edit-suite .price-panel.settings-panel-fit.lux-page,
body.edit-suite .cat-order-panel.settings-panel-fit.lux-page,
body.edit-suite .item-order-panel.settings-panel-fit.lux-page {
    padding: 0.55rem 0.65rem 0.75rem !important;
}

body.edit-suite .item-images-panel.settings-panel-fit.lux-page {
    padding: 0 !important;
}

body.edit-suite .addon-panel.lux-page,
body.edit-suite .size-panel.lux-page,
body.edit-suite .topping-panel.lux-page,
body.edit-suite .category-panel.lux-page,
body.edit-suite .orders-panel.lux-page,
body.edit-suite .printing-panel.lux-page,
body.edit-suite .payment-panel.lux-page,
body.edit-suite .postal-panel.lux-page,
body.edit-suite .setting-panel.lux-page,
body.edit-suite .seo-panel.lux-page,
body.edit-suite .logs-panel.lux-page,
body.edit-suite .time-panel.lux-page,
body.edit-suite .email-panel.lux-page,
body.edit-suite .form-suite.lux-page {
    padding: 0 !important;
    background: #f5f5f5 !important;
}

body.edit-suite .edit-topbar {
    margin: 0 0 0.55rem !important;
}

body.edit-suite .alert {
    border-radius: 0;
    margin: 0;
    box-shadow: none;
    backdrop-filter: none;
}

/* Shared luxury surfaces inside edit pages */
.edit-suite .orders-table-wrap,
.edit-suite .karvi-seo-card,
.edit-suite .printing-form,
.edit-suite .payment-form,
.edit-suite .postal-toolbar {
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 46px rgba(10, 10, 10, 0.06);
}

.edit-suite .orders-table-wrap {
    overflow: auto;
}

.edit-suite .orders-table thead th {
    background: linear-gradient(135deg, #1a1a1a 0%, var(--zblack) 100%);
    color: #f7f5f0;
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: none;
    padding: 0.95rem 0.9rem;
    position: sticky;
    top: 0;
    z-index: 1;
}

.edit-suite .orders-table tbody tr:nth-child(even) {
    background: rgba(10, 10, 10, 0.02);
}

.edit-suite .orders-table tbody tr:hover {
    background: rgba(154, 134, 96, 0.08);
}

.edit-suite .orders-filter-field > span {
    letter-spacing: 0.1em;
    color: #7a7a74;
}

.edit-suite .orders-filter-control,
.edit-suite .custom-select-trigger {
    border-radius: 8px;
    border-color: rgba(20, 20, 20, 0.12);
    min-height: 32px;
    height: 32px;
    background: #fff;
}

.edit-suite .order-chip {
    border-radius: 999px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.edit-suite .order-chip-btn {
    background: var(--graphite);
    color: #fff;
    border: none;
}

.edit-suite .order-chip-done {
    background: rgba(6, 118, 71, 0.1);
    color: var(--success);
}

.edit-suite .printing-grid .print-field > span,
.edit-suite .website-field > span,
.edit-suite .website-seo-field > span,
.edit-suite .karvi-field > span {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #6e6e68;
    font-weight: 700;
}

.edit-suite .printing-grid input,
.edit-suite .printing-grid select,
.edit-suite .website-select,
.edit-suite .website-seo-field textarea,
.edit-suite .karvi-field input,
.edit-suite .karvi-field textarea,
.edit-suite .adv-select-trigger {
    border-radius: 12px;
    border-color: rgba(20, 20, 20, 0.12);
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.edit-suite .printing-grid input:focus,
.edit-suite .printing-grid select:focus,
.edit-suite .website-select:focus,
.edit-suite .website-seo-field textarea:focus,
.edit-suite .karvi-field input:focus,
.edit-suite .karvi-field textarea:focus {
    border-color: var(--ink);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
    outline: none;
}

.edit-suite .printing-actions .btn,
.edit-suite .website-save-btn,
.edit-suite .karvi-seo-actions .btn {
    border-radius: 12px;
    min-height: 48px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    box-shadow: none;
}

.edit-suite .payment-form .btn-primary {
    border-radius: 12px;
    min-height: 48px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 750;
    background: var(--zblack);
    border-color: var(--zblack);
    box-shadow: none;
}

.edit-suite .payment-section h3 {
    font-family: var(--lux);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
}

.edit-suite .payment-section {
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    margin-bottom: 0;
    box-shadow: none;
}

.edit-suite .karvi-seo-card {
    padding: 1.35rem 1.4rem 1.2rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.edit-suite .karvi-seo-block {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fbfbfb;
    box-shadow: none;
    padding: 0;
    overflow: hidden;
}

.edit-suite .karvi-seo-block-title {
    font-family: var(--font, "Manrope", sans-serif);
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--zblack);
}

.edit-suite .karvi-field > span {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    text-transform: none;
    color: #444;
}

.edit-suite .karvi-field input,
.edit-suite .karvi-field textarea {
    border-radius: 9px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #fff;
    min-height: 0;
}

.edit-suite .karvi-field input:focus,
.edit-suite .karvi-field textarea:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.edit-suite .karvi-seo-actions .btn,
.edit-suite .karvi-seo-actions .btn-primary {
    border-radius: 10px;
    min-height: 48px;
    width: 100%;
}

.edit-suite .logs-title {
    font-family: var(--lux);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.edit-suite .logs-action {
    background: var(--graphite);
    color: #f7f5f0;
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.edit-suite .logs-query {
    background: rgba(10, 10, 10, 0.04);
    border-radius: 8px;
    border: 1px solid rgba(20, 20, 20, 0.06);
}

.edit-suite .postal-dl {
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.78rem;
}

.edit-suite .postal-status {
    border-radius: 999px;
    letter-spacing: 0.04em;
}

.edit-suite .time-day-block {
    border: 1px solid rgba(20, 20, 20, 0.07);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(10, 10, 10, 0.03);
}

.edit-suite .time-day-block h3 {
    font-family: var(--lux);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.edit-suite .time-picker-trigger {
    border-radius: 10px;
    border-color: var(--zblack);
    font-weight: 600;
}

.edit-suite .time-picker-trigger:hover,
.edit-suite .time-picker.is-open .time-picker-trigger {
    border-color: var(--zblack);
    box-shadow: none;
}

.edit-suite .panel-modal-form .field span {
    letter-spacing: 0.08em;
}

.edit-suite .panel-modal-form .field input {
    border-radius: 12px;
    min-height: 48px;
}

@media (max-width: 1100px) {
    .edit-suite .settings-grid:not(.dash-mgmt-grid) {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 720px) {
    .edit-suite .settings-grid:not(.dash-mgmt-grid) {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .edit-suite .settings-grid:not(.dash-mgmt-grid) {
        grid-template-columns: 1fr;
    }
}

/* ???????????????????????????????????????????
   ORDERS ? PAYMENT ? LOGS ? dedicated redesign
   ??????????????????????????????????????????? */
.lux-page {
    padding: 28px 30px 36px !important;
    text-align: left;
}

.lux-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
    margin: 0 0 1.45rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--zblack);
}

.lux-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--muted);
}

.lux-page-title {
    margin: 0;
    font-family: var(--lux);
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--zblack);
    line-height: 1.05;
    text-align: left;
}

.lux-page-sub {
    margin: 0.5rem 0 0;
    max-width: 42rem;
    font-size: 0.94rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.55;
}

.lux-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.lux-stat {
    min-width: 96px;
    padding: 0.75rem 1.05rem;
    border-radius: 12px;
    background: var(--zblack);
    color: #fff;
    border: 1px solid var(--zblack);
    box-shadow: none;
    text-align: left;
}

.lux-stat-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.25rem;
}

.lux-stat-value {
    font-family: var(--lux);
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}

.lux-filter-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.65rem 0.75rem;
    margin-bottom: 0;
    padding: 0.75rem 0.9rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--zblack);
    box-shadow: none;
}

.lux-orders-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.orders-search-wrap {
    width: 100%;
}

.orders-search-bar {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    min-height: 46px;
    padding: 0.55rem 0.9rem;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.orders-search-bar:focus-within {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.orders-search-bar svg {
    flex-shrink: 0;
    color: #555;
}

.orders-search-bar input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 550;
    color: #000;
}

.orders-search-bar input[type="search"]::placeholder {
    color: #888;
}

.orders-search-bar input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

.orders-search-clear {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: #f0f0f0;
    color: #111;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.orders-search-clear:hover {
    background: #000;
    color: #fff;
}

.orders-empty-filter {
    margin: 0;
    padding: 1.35rem 1rem;
    text-align: center;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #666;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.lux-filter-bar .orders-filter-field {
    gap: 0.25rem;
}

.lux-filter-bar .orders-filter-field > span {
    font-size: 0.62rem;
    letter-spacing: var(--track-label);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--zblack);
}

.lux-filter-bar .orders-filter-control,
.lux-filter-bar .custom-select-trigger {
    min-height: 32px;
    height: 32px;
    padding: 0 0.6rem;
    font-size: 0.8rem;
    border-radius: 8px;
    border-width: 1px;
}

.lux-table-shell {
    border: 1px solid rgba(20, 20, 20, 0.08) !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 18px 46px rgba(10, 10, 10, 0.06);
    overflow: auto;
}

.orders-panel .orders-table,
.logs-panel .orders-table {
    font-family: inherit;
    font-size: 0.88rem;
    min-width: 980px;
}

.orders-panel .orders-table thead th {
    background: var(--zblack);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    padding: 1rem 0.95rem;
    border-bottom: none;
    white-space: nowrap;
    text-align: left;
}

.logs-panel .orders-table thead th {
    background: #fafafa !important;
    color: var(--muted) !important;
    font-family: inherit !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    padding: 0.55rem 0.9rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    white-space: nowrap;
    text-align: left;
}

.orders-panel .orders-table tbody td {
    padding: 1rem 0.95rem;
    border-bottom: 1px solid var(--line);
    color: var(--zblack);
    vertical-align: middle;
    text-align: left;
}

.logs-panel .orders-table tbody td {
    padding: 0.6rem 0.9rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
    color: var(--zblack);
    vertical-align: middle;
    text-align: left;
    font-family: inherit;
}

.orders-panel .orders-table tbody tr:nth-child(even) {
    background: rgba(10, 10, 10, 0.018);
}

.logs-panel .orders-table tbody tr:nth-child(even) {
    background: #fff;
}

.orders-panel .orders-table tbody tr:hover {
    background: rgba(154, 134, 96, 0.08);
}

.logs-panel .orders-table tbody tr:hover {
    background: #f7f7f7 !important;
}

.logs-panel .orders-table tbody tr:last-child td {
    border-bottom: none !important;
}

.lux-sno {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 0.4rem;
    border-radius: 8px;
    background: rgba(10, 10, 10, 0.05);
    font-weight: 700;
    font-size: 0.8rem;
    color: #333;
}

.lux-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 2.5rem 1rem;
    text-align: center;
}

.lux-empty strong {
    font-family: var(--lux);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--graphite);
}

.lux-empty span {
    color: #777;
    font-size: 0.92rem;
}

.order-amount-block,
.order-contact-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.order-amount-block strong {
    font-family: var(--lux);
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.order-amount-block span,
.order-contact-block span {
    font-size: 0.78rem;
    color: #666;
    font-weight: 600;
}

.order-address,
.order-delivery {
    max-width: 220px;
    font-size: 0.84rem;
    line-height: 1.15;
    color: #333;
}

.order-time {
    white-space: nowrap;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.orders-panel .order-chip {
    border-radius: 999px;
    border: 1px solid rgba(20, 20, 20, 0.14);
    background: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.orders-panel .order-chip-btn {
    background: linear-gradient(165deg, #1c1c1c, var(--zblack));
    color: #f7f5f0;
    border-color: transparent;
}

.orders-panel .order-chip-btn:hover {
    background: linear-gradient(165deg, #2a2a2a, #151515);
    color: #fff;
}

.orders-panel .order-chip-done {
    background: rgba(6, 118, 71, 0.1);
    border-color: rgba(6, 118, 71, 0.22);
    color: var(--success);
}

.orders-panel .order-chip-cancel {
    background: #f3f3f3;
    color: #777;
    border-color: #ddd;
}

.order-row.is-clickable {
    cursor: pointer;
}

.order-row.is-clickable:hover {
    background: #f5f5f5 !important;
}

.order-actions-card {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    animation: noticeCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.order-actions-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    background: #fff;
    color: #000;
    padding: 0.95rem 0.95rem 0.85rem 1.05rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.order-actions-head::after {
    display: none;
}

.order-actions-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.order-actions-eyebrow {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
}

.order-actions-no {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #000;
}

.order-actions-x {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #f6f6f6;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.order-actions-x:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.order-actions-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    width: 100%;
    margin: 0;
    background: #f7f7f7;
}

.order-action-form {
    margin: 0;
}

.order-action-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 11px;
    background: #fff;
    color: #000;
    font-family: "Manrope", system-ui, sans-serif;
    cursor: pointer;
    text-align: left;
    box-shadow: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.order-action-btn:hover {
    border-color: rgba(0, 0, 0, 0.22);
    background: #fff;
    color: #000;
    transform: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.order-action-btn:active {
    transform: none;
}

.order-action-btn.is-primary {
    background: #000;
    border-color: #000;
    color: #fff;
    box-shadow: none;
}

.order-action-btn.is-primary:hover {
    background: #171717;
    border-color: #171717;
    color: #fff;
    box-shadow: none;
}

.order-action-btn.is-danger {
    border-color: rgba(160, 40, 40, 0.18);
    background: #fff;
}

.order-action-btn.is-danger .order-action-title {
    color: #9a2a2a;
}

.order-action-btn.is-danger .order-action-ico {
    background: #f4e8e8;
    border-color: transparent;
    color: #9a2a2a;
}

.order-action-btn.is-danger:hover {
    background: #9a2a2a;
    border-color: #9a2a2a;
    color: #fff;
}

.order-action-btn.is-danger:hover .order-action-title,
.order-action-btn.is-danger:hover .order-action-desc,
.order-action-btn.is-danger:hover .order-action-go {
    color: #fff;
}

.order-action-btn.is-danger:hover .order-action-ico {
    background: rgba(255, 255, 255, 0.16);
    border-color: transparent;
    color: #fff;
}

.order-action-ico {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    border: none;
    background: #f0f0f0;
    color: #111;
    transition: background 0.15s ease, color 0.15s ease;
}

.order-action-btn.is-primary .order-action-ico {
    background: rgba(255, 255, 255, 0.14);
    border-color: transparent;
    color: #fff;
}

.order-action-btn:hover:not(.is-primary):not(.is-danger) .order-action-ico {
    background: #000;
    border-color: transparent;
    color: #fff;
}

.order-action-copy {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    min-width: 0;
}

.order-action-title {
    font-size: 0.88rem;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: inherit;
}

.order-action-desc {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    color: #777;
}

.order-action-btn.is-primary .order-action-desc {
    color: rgba(255, 255, 255, 0.62);
}

.order-action-go {
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1;
    color: #bbb;
    transition: color 0.15s ease, transform 0.15s ease;
}

.order-action-btn:hover .order-action-go {
    color: inherit;
    transform: translateX(2px);
}

.order-action-btn.is-primary .order-action-go {
    color: rgba(255, 255, 255, 0.55);
}

.panel-modal-order-actions .panel-modal-x {
    display: none;
}

.panel-modal-order-actions .panel-modal-x:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Add More Time modal */
.more-time-card {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    animation: noticeCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.more-time-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    background: #fff;
    color: #000;
    padding: 0.95rem 0.95rem 0.85rem 1.05rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.more-time-head-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.more-time-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #777;
}

.more-time-title {
    margin: 0;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #000;
    line-height: 1.2;
}

.more-time-x {
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #f6f6f6;
    color: #333;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.more-time-x::before,
.more-time-x::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 1.6px;
    background: currentColor;
    border-radius: 2px;
}

.more-time-x::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.more-time-x::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.more-time-x:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.more-time-body {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 1rem 1.05rem 1.05rem;
    margin: 0;
    background: #fff;
}

.more-time-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.more-time-field > span {
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

.more-time-field input {
    width: 100%;
    min-height: 40px;
    height: 40px;
    padding: 0.35rem 0.75rem;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 10px;
    background: #fff;
    color: var(--zblack);
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 500;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.more-time-field input::placeholder {
    color: #a0a0a0;
    font-weight: 400;
}

.more-time-field input:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.more-time-hint {
    margin: 0;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--muted);
    line-height: 1.35;
}

.more-time-submit {
    appearance: none;
    width: 100%;
    min-height: 40px;
    height: 40px;
    border: 1px solid #000;
    border-radius: 10px;
    background: #000;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.more-time-submit:hover {
    background: #1a1a1a;
    border-color: #1a1a1a;
    color: #fff;
}

.more-time-submit:active {
    background: #000;
}

@media (max-width: 520px) {
    .order-actions-body {
        padding: 0.65rem;
        gap: 0.35rem;
    }

    .order-action-btn {
        padding: 0.6rem 0.7rem;
        column-gap: 0.6rem;
    }

    .order-action-ico {
        width: 32px;
        height: 32px;
    }

    .order-action-title {
        font-size: 0.84rem;
    }
}

/* Show Order ? full page */
.order-invoice-page[hidden] {
    display: none !important;
}

.order-invoice-page {
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: flex;
    flex-direction: column;
    background: #ececec;
    overflow: hidden;
}

body.order-invoice-open {
    overflow: hidden;
}

.order-invoice-page-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #ececec;
}

.order-invoice-page-title {
    margin: 0;
    flex: 1 1 auto;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #000;
}

.order-invoice-page-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0;
}

.order-invoice-card {
    display: none;
}

.rechnung-toolbar {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem clamp(1rem, 3vw, 2rem);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    flex-shrink: 0;
    z-index: 5;
}

.rechnung-toolbar .btn-primary {
    background: #000;
    border-color: #000;
    color: #fff;
}

.rechnung-toolbar .btn-primary:hover {
    background: #1a1a1a;
    color: #fff;
}

.rechnung-close {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin-left: 0;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;
    background: #f6f6f6;
    color: #000;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0;
    line-height: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.rechnung-close::before,
.rechnung-close::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 1.6px;
    border-radius: 2px;
    background: currentColor;
}

.rechnung-close::before {
    transform: rotate(45deg);
}

.rechnung-close::after {
    transform: rotate(-45deg);
}

.rechnung-close:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.rechnung-sheet {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: calc(100vh - 3.75rem);
    overflow: visible;
    padding: 1.5rem clamp(1.1rem, 2.5vw, 2.25rem) 2rem;
    background: #fff;
    border: none;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    color: #000;
    font-family: var(--font);
}

.rechnung-shop {
    margin: 0 0 0.9rem;
    text-align: center;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--zblack);
}

.rechnung-title-box {
    border: 1px solid var(--zblack);
    padding: 0.7rem 1rem;
    margin: 0 0 1.35rem;
}

.rechnung-title-box h1 {
    margin: 0;
    text-align: center;
    font-size: clamp(1.55rem, 3vw, 1.95rem);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zblack);
}

.rechnung-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem 2rem;
    margin-bottom: 1rem;
}

.rechnung-customer {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 55%;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: left;
}

.rechnung-details {
    flex: 0 0 auto;
    min-width: 0;
    max-width: 42%;
    margin-left: auto;
    font-size: 0.9rem;
    line-height: 1.45;
    text-align: right;
}

.rechnung-customer strong,
.rechnung-details strong {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    font-weight: 700;
}

.rechnung-customer p {
    margin: 0 0 0.15rem;
    color: var(--zblack);
}

.rechnung-detail-item {
    margin: 0.55rem 0 0;
}

.rechnung-detail-item .rechnung-label {
    display: block;
    font-weight: 700;
    color: var(--zblack);
}

.rechnung-detail-item > span:not(.rechnung-label) {
    display: block;
    margin-top: 0.12rem;
    font-weight: 400;
    color: var(--zblack);
    word-break: break-word;
}

.rechnung-label {
    font-weight: 700;
}

.rechnung-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0.75rem;
    margin: 0.35rem 0 1rem;
    background: #f2f2f2;
    border-top: 1px dashed #ccc;
    border-bottom: 1px dashed #ccc;
    font-size: 0.78rem;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.rechnung-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.15rem;
    font-size: 0.88rem;
}

.rechnung-table th,
.rechnung-table td {
    padding: 0.55rem 0.45rem;
    border-bottom: 1px solid #e0e0e0;
    text-align: left;
    vertical-align: top;
}

.rechnung-table th {
    background: #f0f0f0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--zblack);
}

.rechnung-table th:nth-child(4),
.rechnung-table th:nth-child(5),
.rechnung-table td:nth-child(4),
.rechnung-table td:nth-child(5) {
    text-align: right;
}

.rechnung-totals {
    width: min(260px, 100%);
    margin-left: auto;
    font-size: 0.9rem;
}

.rechnung-total-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.2rem 0;
}

.rechnung-total-row.is-grand {
    margin-top: 0.25rem;
    font-weight: 800;
}

.rechnung-footer {
    margin: 1.6rem 0 0;
    font-size: 0.9rem;
    line-height: 1.45;
}

.rechnung-footer strong {
    font-weight: 800;
}

.panel-modal-invoice {
    width: min(1100px, 96vw);
    height: auto;
    max-height: min(92vh, 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.panel-modal-invoice .panel-modal-card {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    max-height: min(92vh, 100%);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

@media (max-width: 720px) {
    .rechnung-meta {
        flex-direction: column;
        gap: 1rem;
    }

    .rechnung-sheet {
        padding: 1.1rem 1rem 1.3rem;
    }
}

@media print {
    body * {
        visibility: hidden !important;
    }

    #panelModal-order-invoice,
    #panelModal-order-invoice * {
        visibility: visible !important;
    }

    #panelModal-order-invoice {
        position: static !important;
        inset: auto !important;
        background: #fff !important;
        display: block !important;
        overflow: visible !important;
    }

    .order-invoice-page-shell,
    .order-invoice-page-body {
        display: block !important;
        overflow: visible !important;
        padding: 0 !important;
        background: #fff !important;
    }

    .rechnung-toolbar,
    .no-print,
    .order-invoice-page-title {
        display: none !important;
    }

    .rechnung-sheet {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
}

.orders-panel .order-type-chip.is-delivery {
    background: rgba(10, 10, 10, 0.04);
}

.orders-panel .order-type-chip.is-pickup {
    background: rgba(154, 134, 96, 0.12);
    border-color: rgba(154, 134, 96, 0.28);
    color: #6e5d3d;
}

/* Payment page cards */
.payment-panel .lux-page-head,
.payment-page-head {
    align-items: flex-start;
    gap: 1rem 1.5rem;
}

.payment-page-heading {
    min-width: 0;
    flex: 1 1 320px;
}

.payment-page-heading .lux-page-sub {
    margin-top: 0.45rem;
    max-width: 48ch;
}

.payment-page-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    justify-content: flex-end;
    max-width: 280px;
}

.payment-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    background: #fff;
    font-family: var(--font);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--zblack);
}

.payment-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0;
}

.lux-pay-card {
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: #fff;
    overflow: visible;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.05);
}

.lux-pay-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--zblack);
    color: #fff;
    position: relative;
}

.lux-pay-card-head::after {
    content: none;
}

.lux-pay-card-title {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}

.lux-pay-mark {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    color: #fff;
    flex-shrink: 0;
}

.lux-pay-card-head h3 {
    margin: 0;
    font-family: var(--lux);
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: #fff;
    line-height: 1.15;
}

.lux-pay-card-desc {
    margin: 0.22rem 0 0;
    font-family: var(--font);
    font-size: 0.74rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.58);
    line-height: 1.3;
}

.lux-pay-tag {
    flex-shrink: 0;
    font-family: var(--font);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    padding: 0.32rem 0.75rem;
    background: rgba(255, 255, 255, 0.08);
}

.lux-pay-card .printing-grid {
    padding: 1.15rem 1.2rem 1.25rem;
    margin: 0;
    background:
        radial-gradient(ellipse at top left, rgba(0, 0, 0, 0.02), transparent 55%),
        #fafafa;
}

.payment-modes-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.lux-pay-card .print-field > span {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #555;
    font-weight: 700;
}

.lux-pay-card .print-field input,
.lux-pay-card .adv-select-trigger,
.lux-pay-card .print-select-wrap select {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.14);
    min-height: 44px;
    background: #fff;
    font-weight: 500;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.lux-pay-card .print-field input:hover,
.lux-pay-card .print-select-wrap select:hover {
    border-color: rgba(0, 0, 0, 0.28);
}

.lux-pay-card .print-field input:focus,
.lux-pay-card .print-select-wrap select:focus {
    outline: none;
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.lux-save-bar {
    margin-top: 0.15rem;
    padding: 1rem 1.15rem;
    border-radius: 14px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.04);
}

.payment-save-bar {
    justify-content: space-between;
    flex-wrap: wrap;
}

.payment-save-hint {
    margin: 0;
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 500;
    color: #777;
    line-height: 1.4;
}

.lux-save-bar .btn,
.payment-save-bar .btn-primary {
    min-width: 220px;
    min-height: 48px;
    border-radius: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.78rem;
    font-weight: 750;
    background: var(--zblack);
    border-color: var(--zblack);
    box-shadow: none;
}

.lux-save-bar .btn:hover,
.payment-save-bar .btn-primary:hover {
    background: #fff;
    color: var(--zblack);
    border-color: var(--zblack);
}

@media (max-width: 700px) {
    .payment-page-meta {
        justify-content: flex-start;
        max-width: none;
        width: 100%;
    }

    .payment-save-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .payment-save-bar .btn-primary {
        width: 100%;
        min-width: 0;
    }

    .lux-pay-card-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Logs refinements */
.logs-panel .logs-datetime {
    white-space: normal;
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    font-variant-numeric: tabular-nums;
    color: var(--muted) !important;
    line-height: 1.15 !important;
}

.logs-panel .logs-date,
.logs-panel .logs-time {
    display: block;
    line-height: 1.15 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.logs-panel .logs-time {
    margin-top: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #444 !important;
}

.logs-panel .logs-resto {
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: #111 !important;
    max-width: 180px;
}

.logs-panel .logs-action {
    display: inline-block;
    max-width: 100%;
    padding: 0.22rem 0.55rem !important;
    border-radius: 7px !important;
    background: #f3f3f3 !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111 !important;
    font-family: inherit !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    line-height: 1.35;
    word-break: break-word;
}

.logs-panel .logs-query {
    display: block;
    padding: 0.4rem 0.55rem !important;
    border-radius: 8px !important;
    background: #f7f7f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.4;
}

.logs-panel .logs-ip,
.logs-panel code.logs-ip {
    display: block !important;
    white-space: nowrap !important;
    padding: 0.4rem 0.55rem !important;
    border-radius: 8px !important;
    background: #f7f7f7 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-family: inherit !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.logs-panel .logs-table th,
.logs-panel .logs-table td {
    border-right: none !important;
}

.logs-panel .logs-table th:last-child,
.logs-panel .logs-table td:last-child {
    border-right: none;
}

/* Export Data popup — premium */
#panelModal-export.panel-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

#panelModal-export.panel-modal[hidden] {
    display: none !important;
}

.export-popup-dialog {
    width: min(420px, calc(100vw - 2rem)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 auto;
    align-self: center;
}

.export-popup-card {
    position: relative;
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid #111 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.16) !important;
}

.export-popup-x {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.export-popup-x:hover {
    background: #111;
    color: #fff;
    border-color: #111;
}

.export-popup-top {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1.35rem 3.1rem 1.1rem 1.35rem;
    background:
        linear-gradient(180deg, #f7f7f7 0%, #fff 100%);
    border-bottom: 1px solid #ececec;
}

.export-popup-ico {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 12px;
    background: #111;
    color: #fff;
}

.export-popup-copy {
    min-width: 0;
    padding-top: 0.1rem;
}

.export-popup-eyebrow {
    margin: 0 0 0.2rem;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #888;
}

.export-popup-title {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: #111;
    line-height: 1.2;
}

.export-popup-lead {
    margin: 0.35rem 0 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    color: #666;
    line-height: 1.35;
}

.export-popup-body {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.1rem 1.2rem 1.25rem;
}

.export-opt {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background: #fafafa;
    color: #111;
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.export-opt-badge {
    display: inline-grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.4rem;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.export-opt-alt .export-opt-badge {
    background: #fff;
    color: #111;
    border: 1.5px solid #111;
}

.export-opt-text {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.export-opt-text strong {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.export-opt-text span {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 500;
    color: #777;
    line-height: 1.3;
}

.export-opt-go {
    font-size: 1.05rem;
    font-weight: 600;
    color: #999;
    transition: color 0.15s ease, transform 0.15s ease;
}

.export-opt:hover {
    background: #fff;
    border-color: #111;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.export-opt:hover .export-opt-go {
    color: #111;
    transform: translateX(2px);
}

.export-opt:active {
    transform: translateY(0);
}

@media (max-width: 900px) {
    .lux-filter-bar {
        grid-template-columns: 1fr 1fr;
    }

    .lux-page {
        padding: 18px 16px 24px !important;
    }

    .lux-save-bar {
        justify-content: stretch;
    }

    .lux-save-bar .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 600px) {
    .lux-filter-bar {
        grid-template-columns: 1fr;
    }

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

/* ========== UPDATE CATEGORY ? premium lines layout ========== */
.category-panel {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
}

body.edit-suite .category-panel.lux-page {
    padding: 0 !important;
    background: #f3f3f3 !important;
    width: 100% !important;
    max-width: none !important;
}

body.edit-suite .category-panel > .edit-topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.7rem clamp(1.1rem, 3vw, 2rem) !important;
}

.app-wrap:has(.category-panel) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.category-panel) {
    overflow: auto;
    height: auto;
}

.category-update-card {
    margin: 0.85rem clamp(1rem, 2.5vw, 1.75rem) 1.35rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.category-update-head {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    background: #fff;
    color: #000;
    padding: 0.7rem 1.1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.category-update-eyebrow {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.66rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #888;
}

.category-update-head strong {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #000;
}

.category-update-body {
    background: #fff;
}

.category-empty {
    padding: 2.25rem 1.25rem;
    text-align: center;
    color: #777;
    font-weight: 600;
}

.category-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 148px;
    gap: 0.55rem 0.9rem;
    padding: 0.7rem 1.1rem 0.75rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    align-items: stretch;
}

.category-row:nth-child(even) {
    background: #fafafa;
}

.category-row:last-child {
    border-bottom: none;
}

.category-row-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 1.15rem;
    margin: 0;
    min-width: 0;
}

.category-col {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0;
    padding-right: 0.25rem;
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}

.category-col:last-child {
    border-right: none;
    padding-right: 0;
    padding-left: 0.35rem;
}

.category-field {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
}

.category-field > span {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #777;
    line-height: 1.15;
}

.category-name-input {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid rgba(0, 0, 0, 0.14);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0.28rem;
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #000;
    line-height: 1.2;
    outline: none;
    transition: border-color 0.15s ease;
}

.category-name-input:hover {
    border-bottom-color: rgba(0, 0, 0, 0.35);
}

.category-name-input:focus {
    border-bottom-color: #000;
}

.category-field textarea {
    width: 100%;
    min-height: 58px;
    padding: 0.4rem 0.55rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 7px;
    background: #fff;
    color: #111;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 500;
    line-height: 1.35;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.category-row:nth-child(even) .category-field textarea {
    background: #fff;
}

.category-field textarea:hover {
    border-color: rgba(0, 0, 0, 0.28);
}

.category-field textarea:focus {
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.category-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    justify-content: center;
}

.category-delete-form {
    margin: 0;
    display: flex;
}

.category-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 36px;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid #000;
    border-radius: 9px;
    background: #000;
    color: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.76rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.category-btn:hover {
    background: #1a1a1a;
    color: #fff;
}

.category-btn-items {
    background: #fff;
    color: #000;
    min-height: 36px;
}

.category-btn-items:hover {
    background: #000;
    color: #fff;
}

.category-btn-delete {
    background: #fff;
    color: #8a2a2a;
    border-color: rgba(140, 40, 40, 0.35);
}

.category-btn-delete:hover {
    background: #8a2a2a;
    border-color: #8a2a2a;
    color: #fff;
}

@media (max-width: 980px) {
    .category-row {
        grid-template-columns: 1fr;
    }

    .category-col,
    .category-col:last-child {
        border-right: none;
        padding: 0;
    }

    .category-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .category-actions .category-btn,
    .category-delete-form {
        flex: 1 1 120px;
    }

    .category-btn-items {
        min-height: 36px;
    }
}

@media (max-width: 700px) {
    .category-row-form {
        grid-template-columns: 1fr;
    }

    .category-update-card {
        margin: 0.85rem 0.85rem 1.5rem;
        border-radius: 12px;
    }
}

/* ???????????????????????????????????????????
   MENU PRICE UPDATE ? black & white list
   ??????????????????????????????????????????? */
.price-panel {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
}

.price-panel:has(.update-item-card) {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    display: block !important;
}

.app-wrap:has(.price-panel.settings-panel-fit) {
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

body.app-body:has(.price-panel.settings-panel-fit) {
    overflow: hidden;
    height: 100vh;
}

.app-wrap:has(.price-panel):has(.update-item-card) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
    display: block;
}

body.app-body:has(.price-panel):has(.update-item-card) {
    overflow: auto;
    height: auto;
}

.price-panel.settings-panel-fit.lux-page {
    padding: 0 !important;
    background: #f3f3f3 !important;
}

.price-suite {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.75rem clamp(1rem, 2.5vw, 1.75rem) 1.1rem;
    box-sizing: border-box;
}

.price-list-card {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

.price-list-toolbar {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #fafafa;
    flex-shrink: 0;
}

.price-search-bar {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.45rem 0.7rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    color: #666;
}

.price-search-bar:focus-within {
    border-color: #000;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.price-search-bar input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--zblack);
    outline: none;
}

.price-search-bar input::placeholder {
    color: #999;
    font-weight: 400;
}

.price-search-clear {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 6px;
    background: #efefef;
    color: #333;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.price-search-clear[hidden] {
    display: none !important;
}

.price-search-clear:hover {
    background: #000;
    color: #fff;
}

.price-list-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 132px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 1rem;
    background: #fff;
    color: var(--muted);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.price-col-price,
.price-col-actions {
    text-align: center;
}

.price-list {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.price-empty {
    padding: 1.8rem 1rem;
    text-align: center;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
}

.price-empty[hidden] {
    display: none !important;
}

.price-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px 132px;
    gap: 0.5rem;
    align-items: center;
    padding: 0.48rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: #fff;
    min-height: 0;
    font-family: inherit;
    transition: background 0.12s ease;
}

.price-row[hidden] {
    display: none !important;
}

.price-row:hover {
    background: #f7f7f7;
}

.price-row:last-child {
    border-bottom: none;
}

.price-row-main {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.price-row-no {
    flex-shrink: 0;
    min-width: 2.4rem;
    text-align: center;
    padding: 0.12rem 0.35rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: transparent;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.price-row-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    line-height: 1.15;
}

.price-row-name {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: normal;
    color: var(--zblack);
    line-height: 1.25;
    word-break: break-word;
}

.price-row-sub {
    margin-top: 0.05rem;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--muted);
    line-height: 1.2;
    word-break: break-word;
}

.price-row-price {
    text-align: right;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--zblack);
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
}

.price-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.3rem;
    flex-shrink: 0;
}

.price-delete-form {
    margin: 0;
}

.price-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    height: 26px;
    padding: 0 0.6rem;
    border-radius: 6px;
    border: 1px solid #000;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none !important;
    line-height: 1;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.price-action-edit {
    background: #000;
    color: #fff;
}

.price-action-edit:hover {
    background: #222;
    color: #fff;
}

.price-action-delete {
    background: #fff;
    color: #8a2a2a;
    border-color: rgba(140, 40, 40, 0.4);
}

.price-action-delete:hover {
    background: #8a2a2a;
    border-color: #8a2a2a;
    color: #fff;
}

/* UPDATE ITEM form */
.update-item-card {
    border: 1px solid rgba(20, 20, 20, 0.1);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 44px rgba(10, 10, 10, 0.07);
    font-family: inherit;
}

.update-item-head {
    background: linear-gradient(135deg, #1a1a1a 0%, var(--zblack) 55%, #141414 100%);
    color: #fff;
    padding: 1rem 1.25rem;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-transform: none;
    position: relative;
}

.update-item-head::after {
    content: "";
    position: absolute;
    left: 1.25rem;
    right: 1.25rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    opacity: 0.55;
}

.update-item-form {
    padding: 0.85rem 1.1rem 0;
    font-family: inherit;
}

.update-item-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem 0.85rem;
    margin-bottom: 0.75rem;
    width: 100%;
    box-sizing: border-box;
}

.update-item-field {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.update-item-field > span {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
    line-height: 1.2;
}

.update-item-field input,
.update-item-field select {
    width: 100%;
    min-height: 42px;
    height: 42px;
    padding: 0.5rem 0.7rem;
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 8px;
    background: #fff;
    color: var(--zblack);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.update-item-field input:focus,
.update-item-field select:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.update-item-price-block {
    margin-bottom: 0.75rem;
}

.update-item-price-label {
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
    margin-bottom: 0.28rem;
}

.update-item-price-table {
    border: 1px solid rgba(20, 20, 20, 0.1);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.update-item-price-head,
.update-item-price-row {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
}

.update-item-price-head {
    background: #f6f5f2;
    border-bottom: 1px solid rgba(20, 20, 20, 0.08);
}

.update-item-price-head span {
    padding: 0.3rem 0.65rem;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
    border-right: 1px solid rgba(20, 20, 20, 0.08);
}

.update-item-price-head span:last-child {
    border-right: none;
}

.update-item-price-row input {
    width: 100%;
    min-height: 32px;
    height: 32px;
    padding: 0.2rem 0.65rem;
    border: none;
    border-right: 1px solid rgba(20, 20, 20, 0.08);
    background: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--zblack);
    outline: none;
}

.update-item-price-row input:last-child {
    border-right: none;
}

.update-item-price-row input:focus {
    background: #fafafa;
}

.update-item-save {
    display: block;
    width: calc(100% + 2.2rem);
    margin-left: -1.1rem;
    margin-right: -1.1rem;
    min-height: 38px;
    height: 38px;
    border: none;
    background: linear-gradient(165deg, #1c1c1c, var(--zblack));
    color: #fff;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    transition: background 0.15s ease;
}

.update-item-save:hover {
    background: linear-gradient(165deg, #2a2a2a, #151515);
}

@media (max-width: 900px) {
    .price-list-head {
        display: none;
    }

    .price-row {
        grid-template-columns: 1fr;
        gap: 0.4rem;
        padding: 0.7rem 0.9rem;
    }

    .price-row-price {
        text-align: left;
        font-size: 0.8rem;
    }

    .price-row-actions {
        justify-content: flex-start;
    }

    .price-action-btn {
        min-height: 28px;
        height: 28px;
    }

    .update-item-grid {
        grid-template-columns: 1fr;
    }

    .update-item-price-head,
    .update-item-price-row {
        grid-template-columns: 1fr;
    }

    .update-item-price-head span,
    .update-item-price-row input {
        border-right: none;
        border-bottom: 1px solid rgba(20, 20, 20, 0.08);
    }

    .update-item-price-head span:last-child,
    .update-item-price-row input:last-child {
        border-bottom: none;
    }
}

/* ???????????????????????????????????????????
   UPDATE CATEGORY ORDER ? black & white
   ??????????????????????????????????????????? */
.cat-order-panel {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1 0 auto !important;
}

.cat-order-panel.settings-panel-fit.lux-page {
    padding: 14px 16px !important;
}

.app-wrap:has(.cat-order-panel.settings-panel-fit) {
    padding: 0;
    min-height: 100vh;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

body.app-body:has(.cat-order-panel.settings-panel-fit) {
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

.cat-order-panel > .edit-topbar {
    flex-shrink: 0;
}

.cat-order-card {
    flex: 1 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid rgba(20, 20, 20, 0.1);
    border-radius: 16px;
    overflow: visible;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfa 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 18px 44px rgba(10, 10, 10, 0.07);
}

.cat-order-table-wrap {
    flex: 1 0 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.cat-order-table-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.65rem 1.15rem;
    background: linear-gradient(135deg, #1a1a1a 0%, var(--zblack) 100%);
    color: rgba(247, 245, 240, 0.72);
    flex-shrink: 0;
}

.cat-order-table-head span {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(247, 245, 240, 0.72);
}

.cat-order-table-head span:last-child {
    text-align: left;
    padding-left: 0.15rem;
}

.cat-order-list {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
}

.cat-order-empty {
    padding: 2.4rem 1rem;
    text-align: center;
    color: #888;
    font-weight: 600;
}

.cat-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 130px;
    gap: 0.85rem;
    align-items: center;
    padding: 0.55rem 1.15rem;
    border-bottom: 1px solid rgba(20, 20, 20, 0.06);
    transition: background 0.15s ease;
}

.cat-order-row:nth-child(even) {
    background: rgba(10, 10, 10, 0.015);
}

.cat-order-row:last-child {
    border-bottom: none;
}

.cat-order-row:hover {
    background: rgba(154, 134, 96, 0.08);
}

.cat-order-main {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    min-width: 0;
}

.cat-order-index {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: linear-gradient(165deg, #1c1c1c, var(--zblack));
    color: #f7f5f0;
    font-size: 0.72rem;
    font-weight: 700;
    margin-top: 0.05rem;
}

.cat-order-text {
    min-width: 0;
}

.cat-order-name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--zblack);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cat-order-no {
    display: flex;
    justify-content: flex-start;
}

.cat-order-no input {
    width: 100%;
    max-width: 108px;
    min-height: 34px;
    padding: 0.3rem 0.55rem;
    border: 1px solid rgba(20, 20, 20, 0.12);
    border-radius: 9px;
    background: #fff;
    text-align: center;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--zblack);
    font-variant-numeric: tabular-nums;
    outline: none;
    box-shadow: 0 2px 8px rgba(10, 10, 10, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cat-order-no input:focus {
    border-color: var(--zblack);
    box-shadow: 0 0 0 3px rgba(10, 10, 10, 0.06);
}

.cat-order-save {
    flex-shrink: 0;
    display: block;
    width: 100%;
    min-height: 52px;
    border: none;
    border-top: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 0 0 16px 16px;
    background: linear-gradient(165deg, #1c1c1c, var(--zblack));
    color: #fff;
    font-family: var(--font);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cat-order-save:hover {
    background: linear-gradient(165deg, #2a2a2a, #151515);
}

.notice-popup-dialog {
    width: min(380px, calc(100vw - 2rem)) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto;
    align-self: center;
}

#panelModal-notice.panel-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.notice-popup-card {
    margin: 0;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    padding: 1.15rem 1.15rem 1.05rem;
    animation: noticeCardIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.notice-popup-card.is-error {
    border-color: rgba(120, 40, 40, 0.18);
}

@keyframes noticeCardIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.notice-popup-x {
    position: absolute;
    top: 0.7rem;
    right: 0.7rem;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #f7f7f7;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.notice-popup-x:hover {
    background: #000;
    border-color: #000;
    color: #fff;
}

.notice-popup-body {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.15rem 2rem 0 0.1rem;
    text-align: left;
}

.notice-popup-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #000;
    color: #fff;
}

.notice-popup-card.is-error .notice-popup-icon {
    background: #3a1a1a;
    color: #fff;
}

.notice-popup-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding-top: 0.1rem;
}

.notice-popup-title {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1.02rem;
    font-weight: 780;
    letter-spacing: -0.02em;
    color: #000;
    line-height: 1.3;
    text-align: left;
}

.notice-popup-text {
    margin: 0;
    max-width: none;
    color: #666;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

.notice-popup-card.is-error .notice-popup-text {
    color: #8a3a3a;
}

.notice-popup-actions {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}

.notice-popup-ok {
    min-height: 38px;
    width: auto;
    min-width: 96px;
    max-width: none;
    padding: 0.55rem 1.15rem;
    border-radius: 9px;
    letter-spacing: 0.04em;
    text-transform: none;
    font-size: 0.84rem;
    font-weight: 700;
    background: #000 !important;
    border: none !important;
    color: #fff !important;
}

.notice-popup-ok:hover {
    background: #1a1a1a !important;
    color: #fff !important;
}

.notice-popup-card.is-error .notice-popup-ok {
    background: #2a1212 !important;
}

.notice-popup-card.is-error .notice-popup-ok:hover {
    background: #3d1f1f !important;
}

/* Hide legacy floating X on notice modal */
.panel-modal-dialog:has(.notice-popup-card) > .panel-modal-x {
    display: none;
}

.notice-popup-accent,
.notice-popup-eyebrow {
    display: none !important;
}

@media (max-width: 700px) {
    .cat-order-table-head,
    .cat-order-row {
        grid-template-columns: minmax(0, 1fr) 100px;
        gap: 0.65rem;
        padding-left: 0.9rem;
        padding-right: 0.9rem;
    }
}

/* ???????????????????????????????????????????
   ITEM ORDER UPDATE ? category grid
   ??????????????????????????????????????????? */
.item-order-panel {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    flex: 1 1 auto !important;
}

.item-order-panel.settings-panel-fit.lux-page {
    padding: 0.65rem 0.75rem 1rem !important;
    background: #f5f5f5 !important;
}

.item-order-panel > .edit-topbar {
    flex-shrink: 0;
}

.item-order-panel .clean-hub {
    flex: 1 1 auto;
    min-height: 0;
}

.app-wrap:has(.item-order-panel .item-order-detail-card) {
    height: auto;
    min-height: 100vh;
    overflow: auto;
}

body.app-body:has(.item-order-panel .item-order-detail-card) {
    overflow: auto;
    height: auto;
    min-height: 100vh;
}

.item-order-empty,
.item-order-placeholder {
    padding: 1.5rem 1.15rem;
    text-align: center;
    background: #fafafa;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    color: #777;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
}

.item-order-empty,
.item-order-placeholder {
    padding: 1.5rem 1.15rem;
    text-align: center;
    background: #fafafa;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    color: #777;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
}

.item-order-placeholder h2 {
    margin: 0 0 0.5rem;
    font-family: inherit;
    font-size: 1.35rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #0a0a0a;
}

.item-order-placeholder p {
    margin: 0 0 1.25rem;
    color: #666;
    font-weight: 500;
}

.item-order-empty {
    color: #777;
    font-weight: 500;
}

.item-order-detail-card .item-order-empty {
    margin: 0.75rem;
}

.item-order-detail-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
}

.item-order-form {
    margin: 0;
    display: flex;
    flex-direction: column;
}

.item-order-table-wrap {
    width: 100%;
    overflow: auto;
    background: #fff;
}

.item-order-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: inherit;
}

.item-order-table thead th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #666;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.item-order-table tbody td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 550;
    color: #222;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    word-break: break-word;
}

.item-order-table tbody tr:last-child td {
    border-bottom: none;
}

.item-order-table tbody tr:hover td {
    background: #fafafa;
}

.item-order-col-name {
    width: 42%;
    font-weight: 650;
    color: #111;
}

.item-order-col-cat {
    width: 28%;
    color: #555;
}

.item-order-col-itemno {
    width: 14%;
    color: #333;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.item-order-col-orderno {
    width: 16%;
}

.item-order-col-orderno input {
    width: 100%;
    max-width: 110px;
    min-height: 40px;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    color: #111;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-order-col-orderno input:hover {
    border-color: rgba(0, 0, 0, 0.26);
}

.item-order-col-orderno input:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.item-order-save-bar {
    display: flex;
    align-items: center;
    padding: 0.9rem 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%);
}

.item-order-save {
    appearance: none;
    min-width: 160px;
    min-height: 42px;
    padding: 0.4rem 1.25rem;
    border: 1px solid #111;
    border-radius: 11px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease;
}

.item-order-save:hover {
    background: #000;
}

@media (max-width: 900px) {
    .item-order-table {
        table-layout: auto;
        min-width: 720px;
    }
}


/* ???????????????????????????????????????????
   ITEM IMAGES UPDATE ? POS category grid B&W
   ??????????????????????????????????????????? */
.item-images-panel.settings-panel-fit.lux-page {
    padding: 0 !important;
}

.item-images-panel > .edit-topbar {
    flex-shrink: 0;
    margin: 0.55rem 0.75rem 0.35rem;
}

.item-images-panel .clean-hub {
    flex: 1 1 auto;
    min-height: 0;
}

.img-cat-screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0.55rem 0.65rem 0.75rem;
    box-sizing: border-box;
    background: #fff;
    overflow: auto;
}

.img-cat-grid {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.55rem;
    align-content: start;
    width: 100%;
    min-height: 0;
}

.img-cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 72px;
    padding: 0.85rem 0.7rem;
    background: var(--zblack) !important;
    background-color: var(--zblack) !important;
    color: #fff !important;
    border: none;
    border-radius: 0;
    text-align: center;
    text-decoration: none !important;
    font-family: var(--font, "Manrope", sans-serif);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.25;
    cursor: pointer;
    transition: background 0.15s ease;
}

.img-cat-btn:hover {
    background: #222 !important;
    color: #fff !important;
}

.img-update-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0.65rem 0.75rem 1rem;
    background: #f5f5f5;
}

.img-list-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
}

.img-update-empty {
    margin: 0.75rem;
    padding: 1.6rem 1rem;
    text-align: center;
    color: #777;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: #fafafa;
}

.img-list-table-wrap {
    width: 100%;
    overflow: auto;
    background: #fff;
}

.img-list-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: inherit;
}

.img-list-table thead th {
    padding: 0.85rem 1rem;
    text-align: left;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #666;
    background: #f7f7f7;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.img-list-table thead th:nth-child(3),
.img-list-table thead th:nth-child(4) {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
}

.img-list-table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 550;
    color: #222;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    word-break: break-word;
}

.img-list-table tbody tr:last-child td {
    border-bottom: none;
}

.img-list-table tbody tr:hover td {
    background: #fafafa;
}

.img-list-item-name {
    width: 36%;
    font-weight: 650;
    color: #111;
}

.img-list-cat-name {
    width: 26%;
    color: #555;
}

.img-list-view {
    width: 96px;
    padding-left: 0.55rem !important;
    padding-right: 1.25rem !important;
    text-align: center;
}

.img-list-img-name {
    width: auto;
    padding-left: 1.35rem !important;
    padding-right: 1rem !important;
    text-align: left;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.img-list-view img,
.img-list-thumb {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f4f4f4;
    object-fit: cover;
    display: block;
}

.img-list-thumb {
    display: grid;
    place-items: center;
    color: #999;
}

@media (max-width: 900px) {
    .img-list-table {
        table-layout: auto;
        min-width: 680px;
    }

    .img-list-img-name {
        white-space: normal;
    }
}

/* ???????????????????????????????????????????
   ADDON LIST ? group rows
   ??????????????????????????????????????????? */
.addon-panel.lux-page {
    padding: 0.65rem 0.75rem 1rem !important;
    background: #f5f5f5 !important;
}

.addon-list-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
}

.addon-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.65rem;
}

.addon-empty {
    padding: 1.6rem 1rem;
    text-align: center;
    color: #777;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: #fafafa;
}

.addon-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    align-items: center;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.addon-row:hover {
    border-color: rgba(0, 0, 0, 0.14);
    background: #fafafa;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.addon-row:last-child {
    border-bottom: none;
}

.addon-row-index {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.addon-row-form {
    min-width: 0;
}

.addon-col-names,
.addon-col-max {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(88px, 0.45fr);
    gap: 0.65rem;
    min-width: 0;
}

.addon-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin: 0;
    min-width: 0;
}

.addon-label,
.addon-col-max .addon-label {
    display: block;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    line-height: 1.2;
    margin: 0;
}

.addon-col-names input,
.addon-col-max input {
    width: 100%;
    max-width: none;
    min-height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    padding: 0.35rem 0.75rem;
    margin: 0;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111;
    outline: none;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.addon-col-names input:hover,
.addon-col-max input:hover {
    border-color: rgba(0, 0, 0, 0.26);
}

.addon-col-names input:focus,
.addon-col-max input:focus {
    border-color: #111;
    background: #fff;
    padding: 0.35rem 0.75rem;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.addon-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
    min-width: 118px;
}

.addon-delete-form {
    margin: 0;
}

.addon-btn {
    appearance: none;
    width: 100%;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.addon-btn:hover {
    background: #000;
}

.addon-btn-delete {
    background: #fff !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
    color: #b91c1c !important;
}

.addon-btn-delete:hover {
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
}

@media (max-width: 900px) {
    .addon-col-names,
    .addon-col-max {
        grid-template-columns: 1fr 1fr;
    }

    .addon-field-max {
        grid-column: 1 / -1;
        max-width: 160px;
    }
}

@media (max-width: 720px) {
    .addon-row {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 0.65rem;
    }

    .addon-actions {
        grid-column: 2;
        flex-direction: row;
        min-width: 0;
    }

    .addon-btn {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .addon-row {
        grid-template-columns: 1fr;
    }

    .addon-row-index {
        display: none;
    }

    .addon-col-names,
    .addon-col-max {
        grid-template-columns: 1fr;
    }

    .addon-field-max {
        grid-column: auto;
        max-width: none;
    }

    .addon-actions {
        grid-column: auto;
        flex-direction: row;
    }

    .addon-btn {
        flex: 1;
    }
}

/* ???????????????????????????????????????????
   SIZE LIST
   ??????????????????????????????????????????? */
.size-panel.lux-page {
    padding: 0.65rem 0.75rem 1rem !important;
    background: #f5f5f5 !important;
}

.size-list-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
}

.size-list-bar {
    display: none !important;
}

.size-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.65rem;
}

.size-empty {
    padding: 1.6rem 1rem;
    text-align: center;
    color: #777;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: #fafafa;
}

.size-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    align-items: center;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.size-row:hover {
    border-color: rgba(0, 0, 0, 0.14);
    background: #fafafa;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.size-row:last-child {
    border-bottom: none;
}

.size-row-index {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.size-row-form {
    min-width: 0;
}

.size-col-names,
.size-col-value {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    min-width: 0;
    padding-right: 0;
    border-right: none;
}

.size-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin: 0;
    min-width: 0;
}

.size-label {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    line-height: 1.2;
    margin: 0;
}

.size-col-names input,
.size-col-value input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    padding: 0.35rem 0.75rem;
    margin: 0;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111;
    outline: none;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.size-col-names input:hover,
.size-col-value input:hover {
    border-color: rgba(0, 0, 0, 0.26);
}

.size-col-names input:focus,
.size-col-value input:focus {
    border-color: #111;
    background: #fff;
    padding: 0.35rem 0.75rem;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.size-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
    min-width: 118px;
}

.size-delete-form {
    margin: 0;
}

.size-btn {
    appearance: none;
    width: 100%;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.size-btn:hover {
    background: #000;
}

.size-btn-delete {
    background: #fff !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
    color: #b91c1c !important;
}

.size-btn-delete:hover {
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
}

@media (max-width: 900px) {
    .size-col-names,
    .size-col-value {
        grid-template-columns: 1fr 1fr;
    }

    .size-field-value {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .size-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .size-actions {
        grid-column: 2;
        flex-direction: row;
        min-width: 0;
    }

    .size-btn {
        flex: 1;
    }
}

@media (max-width: 640px) {
    .size-row {
        grid-template-columns: 1fr;
    }

    .size-row-index {
        display: none;
    }

    .size-col-names,
    .size-col-value {
        grid-template-columns: 1fr;
    }

    .size-field-value {
        grid-column: auto;
    }

    .size-actions {
        grid-column: auto;
        flex-direction: row;
    }

    .size-btn {
        flex: 1;
    }
}

/* ???????????????????????????????????????????
   TOPPING LIST
   ??????????????????????????????????????????? */
.topping-panel.lux-page {
    padding: 0.65rem 0.75rem 1rem !important;
    background: #f5f5f5 !important;
}

.topping-list-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
}

.topping-suite-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(180deg, #fbfbfb 0%, #fff 100%);
}

.topping-suite-heading {
    min-width: 0;
}

.topping-suite-eyebrow {
    margin: 0 0 0.2rem;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
}

.topping-suite-heading h2 {
    margin: 0;
    font-family: inherit;
    font-size: 1.28rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: #0a0a0a;
    line-height: 1.2;
}

.topping-suite-sub {
    margin: 0.3rem 0 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: #777;
    line-height: 1.35;
}

.topping-suite-count {
    flex-shrink: 0;
    margin-top: 0.15rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f4f4f4;
    color: #444;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    white-space: nowrap;
}

.topping-list-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.75rem 0.65rem;
}

.topping-empty {
    padding: 1.6rem 1rem;
    text-align: center;
    color: #777;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    border: 1px dashed rgba(0, 0, 0, 0.12);
    border-radius: 14px;
    background: #fafafa;
}

.topping-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 0.75rem;
    padding: 0.85rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    align-items: center;
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.topping-row:hover {
    border-color: rgba(0, 0, 0, 0.14);
    background: #fafafa;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.topping-row-index {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.topping-row-form {
    min-width: 0;
}

.topping-col-names {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    min-width: 0;
    padding-right: 0;
    border-right: none;
}

.topping-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    margin: 0;
    min-width: 0;
}

.topping-label {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
}

.topping-sep {
    display: none;
}

.topping-col-names input {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 10px;
    background: #fff;
    padding: 0.35rem 0.75rem;
    margin: 0;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    color: #111;
    outline: none;
    line-height: 1.25;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.topping-col-names input:hover {
    border-color: rgba(0, 0, 0, 0.26);
}

.topping-col-names input:focus {
    border-color: #111;
    background: #fff;
    padding: 0.35rem 0.75rem;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.topping-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: stretch;
    min-width: 118px;
}

.topping-delete-form {
    margin: 0;
}

.topping-btn {
    appearance: none;
    width: 100%;
    min-height: 36px;
    padding: 0.35rem 0.75rem;
    border: 1px solid #111;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 650;
    letter-spacing: normal;
    text-transform: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.topping-btn:hover {
    background: #000;
}

.topping-btn-delete {
    background: #fff !important;
    border-color: rgba(185, 28, 28, 0.35) !important;
    color: #b91c1c !important;
}

.topping-btn-delete:hover {
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
}

@media (max-width: 860px) {
    .topping-row {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .topping-actions {
        grid-column: 2;
        flex-direction: row;
        min-width: 0;
    }

    .topping-btn {
        flex: 1;
    }
}

@media (max-width: 700px) {
    .topping-suite-head {
        flex-direction: column;
        align-items: stretch;
    }

    .topping-suite-count {
        align-self: flex-start;
    }

    .topping-row {
        grid-template-columns: 1fr;
    }

    .topping-row-index {
        display: none;
    }

    .topping-col-names {
        grid-template-columns: 1fr;
    }

    .topping-actions {
        grid-column: auto;
        flex-direction: row;
    }

    .topping-btn {
        flex: 1;
    }
}

/* ???????????????????????????????????????????
   LUXURY SYSTEM ? global B&W polish layer
   Manrope UI / left rhythm
   ??????????????????????????????????????????? */
.app-body,
.login-body,
.edit-suite,
.panel,
.settings-panel,
.lux-page,
.dash-main,
.panel-modal-card {
    text-align: left;
}

.list-head h2,
.panel-title,
.settings-title,
.page-title,
.resto-name,
.category-head h2,
.menu-section-title {
    font-family: var(--font) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: var(--zblack) !important;
    line-height: 1.2 !important;
}

.nav-btn,
.btn,
.dash-ghost-btn,
.dash-primary-btn,
.shortcuts-save,
.time-update-save,
.login-submit,
.edit-topbar-btn,
.topping-btn,
.addon-btn,
.size-btn {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: center;
}

.field span,
.home-filter span,
.orders-filter-field > span,
.lux-eyebrow,
.eyebrow,
.login-kicker,
.dash-brand-eyebrow,
.time-day-fields label span {
    font-family: var(--font) !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--muted) !important;
}

.lux-eyebrow,
.login-kicker,
.dash-brand-eyebrow {
    color: var(--muted) !important;
}

.dash-brand-eyebrow {
    color: rgba(255, 255, 255, 0.7) !important;
}

table th {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-align: left;
}

table td {
    font-family: var(--font);
    text-align: left;
    color: var(--zblack);
}

input,
select,
textarea,
.custom-select-trigger,
.time-picker-trigger {
    font-family: var(--font) !important;
    color: var(--zblack);
}

.muted,
.login-lead,
.brand-sub,
.lux-page-sub,
.dash-card-desc,
.dash-tool-desc,
.login-form-note {
    line-height: 1.55;
}

.notice-popup-card,
.panel-modal-card,
.verify-card {
    text-align: left;
}

.hub-panel.settings-panel,
.settings-panel.hub-panel,
.dash-panel {
    background: var(--bg) !important;
}

.settings-panel::before {
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent) !important;
}

.time-setting-head,
.time-update-head {
    font-family: var(--lux) !important;
    letter-spacing: 0.12em !important;
    text-align: left;
}

.printing-section-title,
.website-section-title,
.invoice-section-title {
    font-family: var(--lux) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    color: var(--zblack) !important;
}

@media (max-width: 700px) {
    .lux-page {
        padding: 1.15rem 1rem 1.5rem !important;
    }

    .lux-page-title {
        font-size: 1.85rem !important;
    }

    .dash-section-title {
        font-size: 0.78rem !important;
    }
}
/* ???????????????????????????????????????????
   HUB + POPUPS ? luxury premium redesign
   ??????????????????????????????????????????? */
.hub-panel.settings-panel,
.settings-panel.hub-panel,
.dash-panel {
    background: var(--bg) !important;
}

.dash-shell-full .dash-main {
    padding: 1.15rem 1.35rem 1.4rem;
}

.dash-section:has(.dash-mgmt-grid) {
    margin-top: 0.85rem;
}

.dash-section:has(.dash-tools) {
    margin-top: 1.85rem;
}

.dash-section-title {
    margin: 0 0 0.95rem;
    font-family: var(--font) !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    text-transform: none !important;
    color: var(--zblack) !important;
    position: relative;
    padding-bottom: 0.45rem;
}

.dash-section:has(.dash-tools) .dash-section-title {
    font-size: 0.72rem !important;
    letter-spacing: 0.12em !important;
    margin-bottom: 0.7rem;
}

.dash-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 1.5px;
    background: var(--zblack);
}

.dash-mgmt-grid {
    gap: 1.05rem;
}

.dash-card,
a.dash-card,
button.dash-card,
.dash-card.hub-tile,
button.dash-card.hub-tile {
    min-height: 142px !important;
    padding: 1.25rem 1.3rem 1.3rem !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    background-color: #fff !important;
    color: var(--zblack) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease,
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.dash-card::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 18%;
    right: 18%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
    pointer-events: none;
    z-index: 1;
}

.dash-card::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #111;
    opacity: 0;
    transform: scaleY(0.55);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.dash-card-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background:
        linear-gradient(160deg, #f7f7f7 0%, #ececec 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111 !important;
    margin-bottom: 1rem !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 14px rgba(0, 0, 0, 0.05) !important;
}

.dash-card-icon svg,
.dash-card-icon .dash-ico {
    width: 21px;
    height: 21px;
    color: #111 !important;
    stroke: #111 !important;
}

.dash-card-icon svg [fill="currentColor"],
.dash-card-icon .dash-ico [fill="currentColor"] {
    fill: #111 !important;
}

.dash-card-title {
    font-family: var(--font) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.2 !important;
    color: #0d0d0d !important;
}

.dash-card-desc {
    margin-top: 0.42rem !important;
    font-size: 0.79rem !important;
    font-weight: 500 !important;
    color: #6b6b6b !important;
    line-height: 1.5 !important;
    max-width: 24ch !important;
    padding-right: 1.8rem;
}

.dash-card-go {
    right: 1.1rem !important;
    bottom: 1.1rem !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    background: #f2f2f2 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111 !important;
    font-size: 1.2rem !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
    transition: background 0.22s ease, color 0.22s ease, transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease !important;
}

.dash-card:hover,
a.dash-card:hover,
button.dash-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
    background-color: #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 48px rgba(0, 0, 0, 0.1),
        0 6px 14px rgba(0, 0, 0, 0.04) !important;
    opacity: 1 !important;
}

.dash-card:hover::after {
    opacity: 1 !important;
    transform: scaleY(1) !important;
}

.dash-card:hover .dash-card-go {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    transform: translateX(3px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

.dash-card:hover .dash-card-icon {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18) !important;
    transform: scale(1.04);
}

.dash-card:hover .dash-card-icon svg,
.dash-card:hover .dash-card-icon .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

.dash-card:hover .dash-card-icon svg [fill="currentColor"],
.dash-card:hover .dash-card-icon .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.dash-tools {
    gap: 1.05rem;
}

.dash-tool,
a.dash-tool,
button.dash-tool,
.dash-tool.hub-tile {
    min-height: 84px !important;
    padding: 1.05rem 2.7rem 1.05rem 1.15rem !important;
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
    background-color: #fff !important;
    color: var(--zblack) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 36px rgba(0, 0, 0, 0.06),
        0 2px 8px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden;
    transition:
        transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease,
        box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

.dash-tool::before {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 1), transparent);
    pointer-events: none;
}

.dash-tool::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: #111;
    opacity: 0;
    transform: scaleY(0.55);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}

.dash-tool-icon {
    width: 44px !important;
    height: 44px !important;
    border-radius: 13px !important;
    background:
        linear-gradient(160deg, #f7f7f7 0%, #ececec 100%) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 6px 14px rgba(0, 0, 0, 0.05) !important;
}

.dash-tool-icon svg,
.dash-tool-icon .dash-ico {
    color: #111 !important;
    stroke: #111 !important;
}

.dash-tool-icon svg [fill="currentColor"],
.dash-tool-icon .dash-ico [fill="currentColor"] {
    fill: #111 !important;
}

.dash-tool-title {
    font-family: var(--lux) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #0d0d0d !important;
}

.dash-tool-desc {
    color: #6b6b6b !important;
    font-size: 0.77rem !important;
}

.dash-tool:hover,
a.dash-tool:hover,
button.dash-tool:hover {
    transform: translateY(-3px) !important;
    opacity: 1 !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #f6f6f6 100%) !important;
    background-color: #fff !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 22px 48px rgba(0, 0, 0, 0.1),
        0 6px 14px rgba(0, 0, 0, 0.04) !important;
}

.dash-tool:hover::after {
    opacity: 1 !important;
    transform: scaleY(1) !important;
}

.dash-tool:hover .dash-tool-icon {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18) !important;
    transform: scale(1.04);
}

.dash-tool:hover .dash-tool-icon svg,
.dash-tool:hover .dash-tool-icon .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

.dash-tool:hover .dash-tool-icon svg [fill="currentColor"],
.dash-tool:hover .dash-tool-icon .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.dash-tool .dash-card-go {
    background: #f2f2f2 !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    color: #111 !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 999px !important;
    right: 1.1rem !important;
    bottom: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04) !important;
}

.dash-tool:hover .dash-card-go {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

/* Popup / page luxury polish */
.panel-modal-card {
    border-radius: 18px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28) !important;
    overflow: hidden;
}

.panel-modal-head {
    padding: 1.15rem 3.4rem 1.15rem 1.45rem !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    letter-spacing: 0.12em !important;
}

.panel-modal-body {
    padding: 1.35rem 1.4rem 1.4rem !important;
}

.panel-modal-form .field > span,
.shortcuts-modal .field > span {
    letter-spacing: 0.1em !important;
}

.panel-modal-form .field input,
.panel-modal-form .field select,
.panel-modal-form .field textarea {
    min-height: 46px;
    border-radius: 10px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.18) !important;
}

.panel-modal-form .field input:focus,
.panel-modal-form .field select:focus,
.panel-modal-form .field textarea:focus {
    border-color: var(--zblack) !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

.time-setting-body {
    padding: 2.5rem 1.6rem 1.6rem !important;
    gap: 1rem !important;
    background: #fff !important;
    align-content: center !important;
    grid-template-columns: 1fr !important;
}

.time-setting-btn {
    min-height: 92px !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important;
}

.lux-page {
    padding: 28px 30px 36px !important;
    background:
        radial-gradient(ellipse at top, rgba(0,0,0,0.025), transparent 50%),
        #fff !important;
}

.lux-page-head {
    border-bottom: 1px solid var(--zblack) !important;
    padding-bottom: 1.1rem !important;
    margin-bottom: 1.35rem !important;
}

.lux-page-title {
    font-size: clamp(1.85rem, 3vw, 2.4rem) !important;
}

.edit-suite .orders-table-wrap,
.edit-suite .website-table-wrap,
.home-table-wrap {
    border-radius: 12px !important;
    border-color: var(--zblack) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.05);
}

.edit-topbar {
    border-radius: 12px !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.04) !important;
}
/* Topbar refined override */
.edit-topbar {
    padding: 0.45rem 0.55rem !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.edit-topbar-btn {
    min-height: 36px !important;
    padding: 0.4rem 0.95rem !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.edit-topbar-btn-back,
.edit-topbar-btn-ghost,
a.edit-topbar-btn-back,
a.edit-topbar-btn-ghost {
    background: var(--zblack) !important;
    background-color: var(--zblack) !important;
    color: #fff !important;
    border: 1px solid var(--zblack) !important;
    box-shadow: none !important;
}

.edit-topbar-btn-back:hover,
.edit-topbar-btn-ghost:hover,
a.edit-topbar-btn-back:hover,
a.edit-topbar-btn-ghost:hover {
    background: var(--zblack) !important;
    background-color: var(--zblack) !important;
    color: #fff !important;
    border-color: var(--zblack) !important;
}

.edit-topbar-btn-solid {
    background: var(--zblack) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

.edit-topbar-btn-solid:hover {
    background: #fff !important;
    color: var(--zblack) !important;
    box-shadow: none !important;
}

.edit-topbar-link {
    max-width: min(100%, 520px) !important;
    padding: 0.4rem 0.85rem !important;
    border-radius: 999px !important;
    background: #f6f6f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: var(--zblack) !important;
}

.edit-topbar-link:hover {
    background: #fff !important;
    border-color: var(--zblack) !important;
    color: var(--zblack) !important;
}

.edit-topbar-url {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}

/* ========== HUB SUITE ??? site theme + black accents ========== */
@keyframes hubFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hub-panel.settings-panel,
.settings-panel.hub-panel.dash-panel {
    background: var(--bg) !important;
    border: none !important;
    box-shadow: none !important;
    min-height: calc(100vh - 0px);
}

.hub-panel.settings-panel::before {
    display: none !important;
}

.hub-panel .dash-shell-full .dash-main {
    padding: 0 0 2rem !important;
    max-width: none;
    width: 100%;
    margin: 0;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hub-panel .dash-shell-full .dash-main::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.hub-panel.settings-panel,
.settings-panel.hub-panel.dash-panel,
.app-wrap:has(.hub-panel),
body.app-body.edit-suite:has(.hub-panel) {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hub-panel.settings-panel::-webkit-scrollbar,
.settings-panel.hub-panel.dash-panel::-webkit-scrollbar,
.app-wrap:has(.hub-panel)::-webkit-scrollbar,
body.app-body.edit-suite:has(.hub-panel)::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.hub-panel .edit-topbar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
    background: var(--bg-elevated) !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    border-radius: 0 !important;
    margin: 0 0 1.25rem !important;
    padding: 0.55rem 1.25rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.hub-panel .edit-topbar::before {
    display: none !important;
}

.hub-panel .edit-topbar-btn-back,
.hub-panel .edit-topbar-btn-ghost {
    background: var(--bg-elevated) !important;
    border: 1.5px solid var(--zblack) !important;
    color: var(--zblack) !important;
}

.hub-panel .edit-topbar-btn-back:hover,
.hub-panel .edit-topbar-btn-ghost:hover {
    background: var(--zblack) !important;
    color: #fff !important;
    border-color: var(--zblack) !important;
}

.hub-panel .edit-topbar-btn-solid {
    background: var(--zblack) !important;
    color: #fff !important;
    border: 1.5px solid var(--zblack) !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

.hub-panel .edit-topbar-btn-solid:hover {
    background: #fff !important;
    color: var(--zblack) !important;
    border-color: var(--zblack) !important;
    box-shadow: none !important;
}

.hub-panel .edit-topbar-link {
    background: #f6f6f6 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    color: var(--zblack) !important;
}

.hub-panel .edit-topbar-link:hover {
    background: #fff !important;
    border-color: var(--zblack) !important;
    color: var(--zblack) !important;
}

.hub-panel .edit-topbar-link.is-muted {
    color: var(--muted) !important;
}

.hub-panel .hub-section-main,
.hub-panel .hub-section-tools {
    padding-left: clamp(1rem, 2.5vw, 1.5rem);
    padding-right: clamp(1rem, 2.5vw, 1.5rem);
    margin-top: 0 !important;
    margin-bottom: 1.5rem;
    animation: hubFadeUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    box-sizing: border-box;
}

.hub-panel .hub-section-tools {
    animation-delay: 0.05s;
}

.hub-section-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 0.9rem;
}

.hub-section-label {
    margin: 0;
    flex-shrink: 0;
    font-family: var(--lux);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000;
}

.hub-section-rule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.2), transparent 90%);
}

.hub-panel .dash-mgmt-grid {
    gap: 0.85rem !important;
    counter-reset: hubtile;
}

.hub-panel .dash-card.hub-tile,
.hub-panel a.dash-card.hub-tile,
.hub-panel button.dash-card.hub-tile {
    counter-increment: hubtile;
    min-height: 112px !important;
    padding: 0.95rem 1.05rem 1rem !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
    color: var(--zblack) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease,
        color 0.2s ease !important;
}

.hub-panel .dash-card.hub-tile::before {
    content: counter(hubtile, decimal-leading-zero) !important;
    display: block !important;
    position: absolute !important;
    top: 0.9rem !important;
    right: 1rem !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    background: none !important;
    font-family: var(--lux) !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.12em !important;
    color: rgba(0, 0, 0, 0.25) !important;
    z-index: 2;
    pointer-events: none;
    transition: color 0.2s ease !important;
}

.hub-panel .dash-card.hub-tile::after {
    content: none !important;
    display: none !important;
}

.hub-panel .dash-card-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--zblack) !important;
    border: 1px solid var(--zblack) !important;
    color: #fff !important;
    margin-bottom: 0.65rem !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
}

.hub-panel .dash-card-icon svg,
.hub-panel .dash-card-icon .dash-ico {
    width: 17px !important;
    height: 17px !important;
    color: #fff !important;
    stroke: #fff !important;
    transition: stroke 0.2s ease, color 0.2s ease !important;
}

.hub-panel .dash-card-icon svg [fill="currentColor"],
.hub-panel .dash-card-icon .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.hub-panel .dash-card-title {
    font-family: var(--lux) !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.15 !important;
    color: #000 !important;
    transition: color 0.2s ease !important;
}

.hub-panel .dash-card-desc {
    margin-top: 0.28rem !important;
    font-size: 0.74rem !important;
    font-weight: 500 !important;
    color: #333 !important;
    line-height: 1.4 !important;
    max-width: 22ch !important;
    transition: color 0.2s ease !important;
}

.hub-panel .dash-card-go {
    right: 0.9rem !important;
    bottom: 0.85rem !important;
    width: 28px !important;
    height: 28px !important;
    background: var(--zblack) !important;
    border: 1px solid var(--zblack) !important;
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    font-size: 1.1rem !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.hub-panel .dash-card.hub-tile:hover,
.hub-panel a.dash-card.hub-tile:hover,
.hub-panel button.dash-card.hub-tile:hover,
.hub-panel .dash-card.hub-tile:active,
.hub-panel a.dash-card.hub-tile:active,
.hub-panel button.dash-card.hub-tile:active,
.hub-panel .dash-card.hub-tile:focus-visible,
.hub-panel a.dash-card.hub-tile:focus-visible,
.hub-panel button.dash-card.hub-tile:focus-visible {
    transform: translateY(-2px) !important;
    border-color: var(--zblack) !important;
    background: var(--zblack) !important;
    background-color: var(--zblack) !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18) !important;
}

.hub-panel .dash-card.hub-tile:hover::before,
.hub-panel .dash-card.hub-tile:active::before,
.hub-panel .dash-card.hub-tile:focus-visible::before {
    color: rgba(255, 255, 255, 0.35) !important;
}

.hub-panel .dash-card.hub-tile:hover .dash-card-title,
.hub-panel .dash-card.hub-tile:active .dash-card-title,
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-title {
    color: #fff !important;
}

.hub-panel .dash-card.hub-tile:hover .dash-card-desc,
.hub-panel .dash-card.hub-tile:active .dash-card-desc,
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-desc {
    color: rgba(255, 255, 255, 0.65) !important;
}

.hub-panel .dash-card.hub-tile:hover .dash-card-icon,
.hub-panel .dash-card.hub-tile:active .dash-card-icon,
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-icon {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--zblack) !important;
    box-shadow: none !important;
}

.hub-panel .dash-card.hub-tile:hover .dash-card-icon svg,
.hub-panel .dash-card.hub-tile:hover .dash-card-icon .dash-ico,
.hub-panel .dash-card.hub-tile:active .dash-card-icon svg,
.hub-panel .dash-card.hub-tile:active .dash-card-icon .dash-ico,
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-icon svg,
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-icon .dash-ico {
    color: var(--zblack) !important;
    stroke: var(--zblack) !important;
}

.hub-panel .dash-card.hub-tile:hover .dash-card-icon svg [fill="currentColor"],
.hub-panel .dash-card.hub-tile:hover .dash-card-icon .dash-ico [fill="currentColor"],
.hub-panel .dash-card.hub-tile:active .dash-card-icon svg [fill="currentColor"],
.hub-panel .dash-card.hub-tile:active .dash-card-icon .dash-ico [fill="currentColor"],
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-icon svg [fill="currentColor"],
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-icon .dash-ico [fill="currentColor"] {
    fill: var(--zblack) !important;
}

.hub-panel .dash-card.hub-tile:hover .dash-card-go,
.hub-panel .dash-card.hub-tile:active .dash-card-go,
.hub-panel .dash-card.hub-tile:focus-visible .dash-card-go {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--zblack) !important;
    transform: translateX(2px);
}

.hub-panel .dash-section-title {
    display: none !important;
}

.hub-panel .dash-tools {
    gap: 0.85rem !important;
}

.hub-panel .dash-tool.hub-tile,
.hub-panel a.dash-tool.hub-tile,
.hub-panel button.dash-tool.hub-tile {
    min-height: 68px !important;
    padding: 0.75rem 2.4rem 0.75rem 0.95rem !important;
    border-radius: 14px !important;
    border: 1.5px solid rgba(0, 0, 0, 0.12) !important;
    background: var(--bg-elevated) !important;
    background-color: var(--bg-elevated) !important;
    color: var(--zblack) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease !important;
}

.hub-panel .dash-tool.hub-tile::before,
.hub-panel .dash-tool.hub-tile::after {
    content: none !important;
    display: none !important;
}

.hub-panel .dash-tool-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    background: var(--zblack) !important;
    border: 1px solid var(--zblack) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14) !important;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important;
}

.hub-panel .dash-tool-icon svg,
.hub-panel .dash-tool-icon .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
    transition: stroke 0.2s ease, color 0.2s ease !important;
}

.hub-panel .dash-tool-icon svg [fill="currentColor"],
.hub-panel .dash-tool-icon .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.hub-panel .dash-tool-title {
    font-family: var(--lux) !important;
    font-size: 1.08rem !important;
    font-weight: 600 !important;
    letter-spacing: -0.015em !important;
    color: #000 !important;
    transition: color 0.2s ease !important;
}

.hub-panel .dash-tool-desc {
    color: #333 !important;
    font-size: 0.74rem !important;
    transition: color 0.2s ease !important;
}

.hub-panel .dash-tool .dash-card-go {
    background: var(--zblack) !important;
    border: 1px solid var(--zblack) !important;
    color: #fff !important;
    width: 28px !important;
    height: 28px !important;
    right: 0.9rem !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease !important;
}

.hub-panel .dash-tool.hub-tile:hover,
.hub-panel a.dash-tool.hub-tile:hover,
.hub-panel button.dash-tool.hub-tile:hover,
.hub-panel .dash-tool.hub-tile:active,
.hub-panel a.dash-tool.hub-tile:active,
.hub-panel button.dash-tool.hub-tile:active,
.hub-panel .dash-tool.hub-tile:focus-visible,
.hub-panel a.dash-tool.hub-tile:focus-visible,
.hub-panel button.dash-tool.hub-tile:focus-visible {
    transform: translateY(-2px) !important;
    border-color: var(--zblack) !important;
    background: var(--zblack) !important;
    background-color: var(--zblack) !important;
    color: #fff !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18) !important;
}

.hub-panel .dash-tool.hub-tile:hover .dash-tool-title,
.hub-panel .dash-tool.hub-tile:active .dash-tool-title,
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-title {
    color: #fff !important;
}

.hub-panel .dash-tool.hub-tile:hover .dash-tool-desc,
.hub-panel .dash-tool.hub-tile:active .dash-tool-desc,
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-desc {
    color: rgba(255, 255, 255, 0.65) !important;
}

.hub-panel .dash-tool.hub-tile:hover .dash-tool-icon,
.hub-panel .dash-tool.hub-tile:active .dash-tool-icon,
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-icon {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--zblack) !important;
    box-shadow: none !important;
}

.hub-panel .dash-tool.hub-tile:hover .dash-tool-icon svg,
.hub-panel .dash-tool.hub-tile:hover .dash-tool-icon .dash-ico,
.hub-panel .dash-tool.hub-tile:active .dash-tool-icon svg,
.hub-panel .dash-tool.hub-tile:active .dash-tool-icon .dash-ico,
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-icon svg,
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-icon .dash-ico {
    color: var(--zblack) !important;
    stroke: var(--zblack) !important;
}

.hub-panel .dash-tool.hub-tile:hover .dash-tool-icon svg [fill="currentColor"],
.hub-panel .dash-tool.hub-tile:hover .dash-tool-icon .dash-ico [fill="currentColor"],
.hub-panel .dash-tool.hub-tile:active .dash-tool-icon svg [fill="currentColor"],
.hub-panel .dash-tool.hub-tile:active .dash-tool-icon .dash-ico [fill="currentColor"],
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-icon svg [fill="currentColor"],
.hub-panel .dash-tool.hub-tile:focus-visible .dash-tool-icon .dash-ico [fill="currentColor"] {
    fill: var(--zblack) !important;
}

.hub-panel .dash-tool.hub-tile:hover .dash-card-go,
.hub-panel .dash-tool.hub-tile:active .dash-card-go,
.hub-panel .dash-tool.hub-tile:focus-visible .dash-card-go {
    background: #fff !important;
    border-color: #fff !important;
    color: var(--zblack) !important;
}

.hub-panel .hub-empty {
    color: var(--muted);
    grid-column: 1 / -1;
    padding: 1.5rem;
    text-align: center;
}

@media (max-width: 700px) {
    .hub-panel .dash-shell-full .dash-main {
        padding: 0 0 1.5rem !important;
    }

    .hub-panel .edit-topbar {
        padding: 0.5rem 0.85rem !important;
    }

    .hub-panel .hub-section-main,
    .hub-panel .hub-section-tools {
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .hub-panel .dash-mgmt-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .hub-panel .dash-tools {
        grid-template-columns: 1fr !important;
    }
}

/* ========== PANEL AS FULL PAGE (hub ??? Payment/Printing/etc.) ========== */
body.panel-page {
    background: var(--bg, #f5f5f5);
}

body.panel-page .panel-modal-as-page {
    position: static;
    inset: auto;
    display: block !important;
    background: transparent;
    z-index: auto;
    padding: 0 0 2rem;
}

body.panel-page .panel-modal-as-page .panel-modal-backdrop {
    display: none !important;
}

body.panel-page .panel-modal-as-page .panel-modal-dialog,
body.panel-page .panel-modal-as-page .panel-modal-dialog.panel-modal-sm,
body.panel-page .panel-modal-as-page .panel-modal-dialog.panel-modal-md,
body.panel-page .panel-modal-as-page .panel-modal-dialog.panel-modal-lg,
body.panel-page .panel-modal-as-page .panel-modal-dialog.panel-modal-printing {
    position: relative;
    width: min(1100px, 100%);
    max-width: 1100px;
    height: auto;
    max-height: none;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: none;
    transform: none;
}

body.panel-page .panel-modal-as-page .panel-modal-x,
body.panel-page .panel-modal-as-page .panel-modal-head-actions .panel-modal-x {
    display: none !important;
}

body.panel-page .panel-modal-as-page .panel-modal-head-actions {
    position: static;
    justify-content: flex-start;
    padding: 0.5rem 0 0;
}

body.panel-page.panel-page-printing .panel-modal-as-page .panel-modal-back {
    display: inline-flex;
}

/* ========== HUB PRO ? 90% white premium (CRM-inspired) ========== */
.hub-panel.hub-pro {
    --hub-ink: #000000;
    --hub-muted: #555555;
    --hub-line: rgba(0, 0, 0, 0.1);
    --hub-accent: #000000;
    --hub-accent-soft: rgba(0, 0, 0, 0.06);
    --hub-white: #ffffff;
    --hub-wash: #f5f5f5;
    background: var(--hub-wash) !important;
    background-image: none !important;
    color: var(--hub-ink);
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hub-panel.hub-pro::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.hub-pro-shell,
.hub-pro-main {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    box-sizing: border-box;
}

.hub-panel.hub-pro > .hub-pro-shell,
.hub-panel.hub-pro > .dash-shell {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.hub-panel.hub-pro > .edit-topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--hub-line) !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.75rem clamp(1rem, 3vw, 1.75rem) !important;
    box-sizing: border-box;
}

.hub-panel.hub-pro > .edit-topbar .edit-topbar-center {
    min-width: 0;
    width: 100%;
}

.hub-panel.hub-pro > .edit-topbar .edit-topbar-link {
    max-width: 100% !important;
    width: auto;
}

.hub-panel.hub-pro > .edit-topbar .edit-client-card {
    align-items: center;
}

/* Hero */
.hub-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    align-items: end;
    padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 1.5rem) clamp(2rem, 4vw, 2.75rem);
    animation: hubProIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.hub-hero-brand {
    margin: 0 0 0.65rem;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.hub-hero-title {
    margin: 0;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: clamp(2.6rem, 6.5vw, 4.4rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 0.95;
    color: var(--hub-ink);
    text-transform: uppercase;
}

.hub-hero-sub {
    margin: 1rem 0 0;
    max-width: 34ch;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 0.98rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--hub-muted);
}

.hub-hero-visual {
    position: relative;
    min-height: 200px;
    animation: hubProFloat 5.5s ease-in-out infinite;
}

.hub-mock {
    position: relative;
    width: 100%;
    max-width: 380px;
    margin-left: auto;
    border-radius: 14px;
    background: var(--hub-white);
    border: 1px solid var(--hub-line);
    box-shadow:
        0 28px 60px rgba(20, 20, 20, 0.08),
        0 8px 20px rgba(20, 20, 20, 0.04);
    overflow: hidden;
}

.hub-mock-bar {
    display: flex;
    gap: 6px;
    padding: 0.7rem 0.85rem;
    background: #f0efed;
    border-bottom: 1px solid var(--hub-line);
}

.hub-mock-bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d4d2ce;
}

.hub-mock-bar span:first-child { background: #bbbbbb; }

.hub-mock-body {
    display: grid;
    grid-template-columns: 52px 1fr;
    min-height: 168px;
}

.hub-mock-side {
    background: #f4f3f1;
    border-right: 1px solid var(--hub-line);
}

.hub-mock-main {
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.hub-mock-row {
    height: 10px;
    width: 55%;
    border-radius: 99px;
    background: #e8e6e3;
}

.hub-mock-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.45rem;
}

.hub-mock-cards i {
    display: block;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(160deg, #f7f6f4, #ebe8e4);
    border: 1px solid rgba(20, 20, 20, 0.06);
}

.hub-mock-cards i:nth-child(2) {
    background: linear-gradient(160deg, rgba(0, 0, 0, 0.1), #eeeeee);
}

.hub-mock-chart {
    flex: 1;
    min-height: 48px;
    border-radius: 8px;
    background:
        linear-gradient(90deg, transparent 0 8%, rgba(0, 0, 0, 0.2) 8% 12%, transparent 12%),
        linear-gradient(90deg, transparent 0 28%, rgba(20, 20, 20, 0.12) 28% 32%, transparent 32%),
        linear-gradient(90deg, transparent 0 48%, rgba(0, 0, 0, 0.25) 48% 52%, transparent 52%),
        linear-gradient(90deg, transparent 0 68%, rgba(20, 20, 20, 0.1) 68% 72%, transparent 72%),
        linear-gradient(90deg, transparent 0 88%, rgba(0, 0, 0, 0.18) 88% 92%, transparent 92%),
        #f7f6f4;
    background-size: 100% 100%, 100% 70%, 100% 85%, 100% 55%, 100% 75%, 100% 100%;
    background-position: bottom;
    background-repeat: no-repeat;
}

.hub-mock-phone {
    position: absolute;
    right: -6%;
    bottom: -12%;
    width: 110px;
    max-width: none;
    border-radius: 18px;
    z-index: 2;
    box-shadow: 0 18px 40px rgba(20, 20, 20, 0.12);
}

.hub-mock-phone .hub-mock-bar {
    justify-content: center;
    padding: 0.55rem;
    background: #eceae7;
}

.hub-mock-phone .hub-mock-bar span {
    width: 28px;
    height: 5px;
    border-radius: 99px;
}

.hub-mock-phone-body {
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 120px;
    background: var(--hub-white);
}

.hub-mock-phone-body i {
    display: block;
    height: 28px;
    border-radius: 6px;
    background: #f1efec;
}

.hub-mock-phone-body i:first-child {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.12), #f1efec);
}

/* Section headings */
.hub-pro-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 0 1.25rem;
    padding: 0 clamp(1rem, 2.5vw, 1.75rem);
}

.hub-pro-eyebrow {
    margin: 0;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hub-accent);
}

.hub-pro-heading {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: clamp(1.35rem, 2.4vw, 1.7rem);
    font-weight: 750;
    letter-spacing: -0.03em;
    color: var(--hub-ink);
    line-height: 1.15;
}

/* Process flow ? always horizontal, black & white */
.hub-panel.hub-pro > .hub-flow {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.85rem clamp(0.75rem, 2.5vw, 1.75rem) 0.95rem;
    border-bottom: 1px solid var(--hub-line);
    background: #fff;
    box-sizing: border-box;
    animation: hubProIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    overflow: hidden !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.hub-panel.hub-pro > .hub-flow::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
}

.hub-flow-track {
    list-style: none;
    margin: 0;
    padding: 0.15rem 0 0;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 0 !important;
    position: relative;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.hub-flow-track::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    height: 0;
    border-top: 1.5px dotted rgba(0, 0, 0, 0.28);
    pointer-events: none;
    display: block !important;
}

.hub-flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.35rem;
    padding: 0 0.25rem;
    position: relative;
    z-index: 1;
}

.hub-flow-ico {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.14);
    color: #000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hub-flow-step:hover .hub-flow-ico {
    background: #000;
    border-color: #000;
    color: #fff !important;
}

.hub-flow-ico svg,
.hub-flow-ico .dash-ico {
    width: 18px;
    height: 18px;
    color: #000 !important;
    stroke: #000 !important;
}

.hub-flow-ico .dash-ico [fill="currentColor"] {
    fill: #000 !important;
}

.hub-flow-step:hover .hub-flow-ico svg,
.hub-flow-step:hover .hub-flow-ico .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

.hub-flow-step:hover .hub-flow-ico .dash-ico [fill="currentColor"] {
    fill: #fff !important;
}

.hub-flow-step strong {
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #000;
}

.hub-flow-step > span:last-child {
    display: none;
}

/* Feature grid ? premium soft tiles */
.hub-feats {
    padding: 1.75rem 0 0.5rem;
    animation: hubProIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
    width: 100%;
}

.hub-feats .hub-pro-head {
    padding-left: clamp(1rem, 2.5vw, 1.75rem);
    padding-right: clamp(1rem, 2.5vw, 1.75rem);
}

.hub-feat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0 clamp(1rem, 2.5vw, 1.75rem);
    width: 100%;
    box-sizing: border-box;
    counter-reset: hubfeat;
    border: none;
}

.hub-feat {
    counter-increment: hubfeat;
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 0.95rem;
    align-items: center;
    min-height: 108px;
    padding: 1.15rem 1.2rem;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    box-shadow: 0 1px 0 rgba(20, 20, 20, 0.02);
    overflow: hidden;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease,
        background 0.22s ease;
}

.hub-feat::before {
    content: counter(hubfeat, decimal-leading-zero);
    position: absolute;
    top: 0.85rem;
    right: 2.6rem;
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(20, 20, 20, 0.28);
    transition: color 0.2s ease;
}

.hub-feat:hover {
    background: #fff;
    border-color: rgba(20, 20, 20, 0.16);
    box-shadow:
        0 16px 36px rgba(20, 20, 20, 0.07),
        0 4px 12px rgba(20, 20, 20, 0.03);
    transform: translateY(-3px);
}

.hub-feat:hover::before {
    color: var(--hub-accent);
}

.hub-feat:focus-visible {
    outline: 2px solid var(--hub-accent);
    outline-offset: 2px;
}

.hub-feat-ico {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    background: linear-gradient(165deg, #faf9f7, #f1eeea);
    border: 1px solid rgba(20, 20, 20, 0.07);
    color: var(--hub-ink);
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        transform 0.22s ease,
        box-shadow 0.22s ease;
}

.hub-feat:hover .hub-feat-ico {
    background: var(--hub-ink);
    border-color: var(--hub-ink);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(20, 20, 20, 0.18);
}

.hub-feat-ico svg,
.hub-feat-ico .dash-ico {
    width: 20px;
    height: 20px;
}

.hub-feat-copy {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
    padding-right: 0.5rem;
}

.hub-feat-title {
    font-family: var(--font-sans, "Manrope", system-ui, sans-serif);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-transform: none;
    color: var(--hub-ink);
    line-height: 1.2;
}

.hub-feat-desc {
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    color: var(--hub-muted);
    max-width: 38ch;
}

.hub-feat-go {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    line-height: 1;
    color: rgba(20, 20, 20, 0.35);
    background: transparent;
    border: 1px solid transparent;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.hub-feat:hover .hub-feat-go {
    color: #fff;
    background: var(--hub-accent);
    border-color: var(--hub-accent);
    transform: translateX(2px);
}

/* Tools */
.hub-tools-pro {
    padding: 2rem 0 3rem;
    animation: hubProIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.14s both;
}

.hub-tool-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding: 0 clamp(1rem, 2.5vw, 1.75rem);
    width: 100%;
    box-sizing: border-box;
}

.hub-tool-pro {
    position: relative;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 0.85rem;
    align-items: center;
    padding: 1.1rem 1.15rem;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    border: 1px solid rgba(20, 20, 20, 0.08);
    border-radius: 16px;
    transition:
        border-color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.22s ease;
}

.hub-tool-pro:hover {
    border-color: rgba(0, 0, 0, 0.35);
    box-shadow: 0 14px 32px rgba(20, 20, 20, 0.06);
    transform: translateY(-2px);
}

.hub-tool-pro .hub-feat-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
}

.hub-tool-pro:hover .hub-feat-ico {
    background: var(--hub-accent-soft);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--hub-accent);
    box-shadow: none;
}

.hub-tool-pro .hub-feat-title {
    font-size: 0.88rem;
}

.hub-tool-pro .hub-feat-desc {
    font-size: 0.78rem;
    max-width: none;
}

.hub-tool-pro .hub-feat-go {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
}

.hub-tool-pro:hover .hub-feat-go {
    color: var(--hub-accent);
    background: var(--hub-accent-soft);
    border-color: rgba(0, 0, 0, 0.12);
}

.hub-pro .hub-empty {
    grid-column: 1 / -1;
    padding: 1.5rem;
    text-align: center;
    color: var(--hub-muted);
    font-size: 0.9rem;
}


@keyframes hubProIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hubProFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@media (max-width: 900px) {
    .hub-hero {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .hub-hero-visual {
        max-width: 340px;
        margin: 0 auto;
        width: 100%;
    }

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

    .hub-flow-track {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }

    .hub-flow-track::before {
        display: block !important;
    }

    .hub-tool-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .hub-feat-grid {
        grid-template-columns: 1fr;
    }

    .hub-feat {
        min-height: 96px;
        padding: 1rem 1.05rem;
    }

    .hub-flow-track {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        min-width: 0;
    }

    .hub-flow-ico {
        width: 36px;
        height: 36px;
    }

    .hub-flow-step strong {
        font-size: 0.58rem;
        letter-spacing: 0.03em;
    }

    .hub-mock-phone {
        right: 0;
        width: 96px;
    }
}

/* ========== FORM SUITE ? full-width B&W premium forms ========== */
body.edit-suite .form-suite.lux-page,
body.edit-suite .seo-panel.lux-page,
body.edit-suite .time-panel.lux-page,
body.edit-suite .email-panel.lux-page,
body.edit-suite .payment-panel.lux-page,
body.edit-suite .printing-panel.lux-page,
body.edit-suite .setting-panel.lux-page,
body.edit-suite .close-panel.lux-page {
    padding: 0 !important;
    background: #f5f5f5 !important;
    width: 100% !important;
    max-width: none !important;
}

body.edit-suite .form-suite > .edit-topbar,
body.edit-suite .seo-panel > .edit-topbar,
body.edit-suite .time-panel > .edit-topbar,
body.edit-suite .email-panel > .edit-topbar,
body.edit-suite .payment-panel > .edit-topbar,
body.edit-suite .printing-panel > .edit-topbar,
body.edit-suite .setting-panel > .edit-topbar,
body.edit-suite .close-panel > .edit-topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.7rem clamp(1.1rem, 3vw, 2rem) !important;
}

.form-suite .karvi-seo-card,
.seo-panel .karvi-seo-card,
.payment-panel .payment-suite-card,
.printing-panel .printing-suite-card,
.close-panel .close-suite-card {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f5f5 !important;
    padding: 1.35rem clamp(1.1rem, 3.5vw, 2.25rem) 2.25rem !important;
    box-sizing: border-box;
}

.form-suite .karvi-seo-form,
.form-suite .payment-form,
.form-suite .close-shortcuts-form,
.seo-panel .karvi-seo-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100%;
    max-width: none;
}

.close-panel .close-shortcuts-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0;
    background: transparent;
    flex: 1 1 auto;
    align-content: start;
    min-height: 0;
}

.close-panel .close-shortcut-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 0.95rem 1.05rem;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    min-height: 0;
}

.close-panel .close-shortcut-wide {
    grid-column: 1 / -1;
}

.close-panel .close-shortcut-row:hover {
    border-color: rgba(0, 0, 0, 0.28);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.close-panel .close-shortcut-copy {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
}

.close-panel .close-shortcut-copy strong {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.92rem;
    font-weight: 750;
    color: #000;
    letter-spacing: -0.01em;
}

.close-panel .close-shortcut-copy em {
    font-style: normal;
    font-size: 0.76rem;
    font-weight: 500;
    color: #666;
}

.close-panel .close-shortcut-row .shortcut-toggle {
    flex-shrink: 0;
}

.close-suite-head {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0 0 0.15rem;
}

.close-suite-head.form-head-row {
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    padding: 0;
}

.close-suite-head h2 {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #000;
}

.close-suite-head p {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 500;
    color: #666;
}

body.has-edit-shell .edit-shell-content:has(.close-panel) {
    overflow: hidden;
}

body.has-edit-shell .edit-shell-content > .close-panel.lux-page {
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column;
    overflow: hidden !important;
}

.close-panel .close-suite-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding: 1rem clamp(1.1rem, 3vw, 2rem) 1.15rem !important;
}

.close-panel .close-shortcuts-form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem !important;
    overflow: hidden;
}

.close-panel .close-save-bar {
    margin-top: auto;
    padding-top: 0.75rem !important;
    flex-shrink: 0;
}

.close-panel .close-save-bar .btn {
    min-height: 44px !important;
}

@media (max-width: 720px) {
    .close-panel .close-shortcuts-list {
        grid-template-columns: 1fr;
    }

    .close-panel .close-shortcut-wide {
        grid-column: auto;
    }

    body.has-edit-shell .edit-shell-content:has(.close-panel) {
        overflow-y: auto;
    }
}

.form-suite .karvi-seo-grid,
.seo-panel .karvi-seo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.15rem;
    width: 100%;
}

.form-suite .karvi-seo-block,
.seo-panel .karvi-seo-block {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
    min-width: 0;
    padding: 0;
    margin: 0;
}

.form-suite .payment-section.lux-pay-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    background: #fff;
    overflow: visible;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    min-width: 0;
    padding: 0;
    margin: 0;
}

.form-suite .karvi-seo-block-head,
.seo-panel .karvi-seo-block-head,
.form-suite .payment-section .lux-pay-card-head,
.form-suite .payment-section .karvi-seo-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #fff;
}

.form-suite .karvi-seo-block-title,
.seo-panel .karvi-seo-block-title,
.form-suite .payment-section .lux-pay-card-title h3,
.form-suite .payment-section .karvi-seo-block-title {
    margin: 0;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000;
    line-height: 1.2;
}

.form-suite .lux-pay-card-desc {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: #666;
}

.form-suite .lux-pay-tag {
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #000;
    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    background: #f5f5f5;
}

.form-suite .lux-pay-mark {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #000;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.form-suite .karvi-seo-fields,
.seo-panel .karvi-seo-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.05rem 1.15rem;
    padding: 1.25rem 1.25rem 1.35rem;
    background: #fafafa;
}

.form-suite .payment-section .printing-grid.pay-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.55rem 0.65rem;
    padding: 0.8rem 0.95rem 0.95rem;
    background: #fafafa;
    overflow: visible;
    border-radius: 0 0 12px 12px;
}

.form-suite .payment-section .pay-field-sm {
    grid-column: span 2;
}

.form-suite .payment-section .pay-field-md {
    grid-column: span 3;
}

.form-suite .payment-section .pay-field-lg {
    grid-column: span 4;
}

.form-suite .payment-section .pay-field-full {
    grid-column: 1 / -1;
}

.form-suite .payment-section .pay-grid-compact {
    max-width: none;
    width: 100%;
}

.form-suite .payment-section .pay-modes-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.form-suite .payment-section .pay-field-mode {
    grid-column: span 1;
}

.form-suite .payment-section .print-field > span {
    font-size: 0.62rem;
    margin: 0;
}

.form-suite .payment-section .print-field,
.form-suite .payment-section .print-select-wrap {
    overflow: visible;
    position: relative;
}

.form-suite .payment-section .print-field input {
    min-height: 36px;
    height: 36px;
    padding: 0.35rem 0.65rem;
    font-size: 0.84rem;
    border-radius: 8px;
}

.form-suite .payment-section .adv-select {
    position: relative;
    z-index: 1;
}

.form-suite .payment-section .adv-select.is-open {
    z-index: 80;
}

.form-suite .payment-section .adv-select-trigger {
    min-height: 36px;
    height: 36px;
    padding: 0.3rem 0.65rem;
    font-size: 0.84rem;
    border-radius: 8px;
    font-weight: 650;
}

.form-suite .payment-section .adv-select-menu {
    z-index: 90;
    top: calc(100% + 4px);
    max-height: 180px;
    padding: 0.3rem;
    border-radius: 9px;
    border: 1.5px solid #000;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.form-suite .payment-section .adv-select-menu li {
    padding: 0.48rem 0.65rem;
    font-size: 0.82rem;
    border-radius: 7px;
}

.form-suite .payment-section .adv-select-caret {
    width: 16px;
    height: 16px;
}

.form-suite .payment-section .lux-pay-card-head,
.form-suite .payment-section .karvi-seo-block-head {
    padding: 0.65rem 0.95rem;
}

.form-suite .payment-section .lux-pay-mark {
    width: 34px;
    height: 34px;
    font-size: 0.65rem;
    border-radius: 8px;
}

.form-suite .payment-section .lux-pay-card-desc {
    font-size: 0.72rem;
    margin-top: 0.12rem;
}

.form-suite .payment-section .lux-pay-tag {
    font-size: 0.62rem;
    padding: 0.22rem 0.55rem;
}

.form-suite .payment-form,
.form-suite.payment-panel .payment-suite-card {
    gap: 0.65rem;
}

.form-suite.payment-panel .karvi-seo-actions.lux-save-bar {
    margin-top: 0.25rem;
    padding-top: 0.35rem;
}

.form-suite .karvi-field,
.seo-panel .karvi-field {
    display: flex;
    flex-direction: column;
    gap: 0.42rem;
    min-width: 0;
}

.form-suite .payment-section .print-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
    overflow: visible;
    position: relative;
}

.form-suite .karvi-field-full,
.seo-panel .karvi-field-full {
    grid-column: 1 / -1;
}

.form-suite .karvi-field > span,
.seo-panel .karvi-field > span {
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #444;
}

.form-suite .karvi-field input,
.form-suite .karvi-field textarea,
.form-suite .karvi-field select,
.seo-panel .karvi-field input,
.seo-panel .karvi-field textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.72rem 0.95rem;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 11px;
    background: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.95rem;
    font-weight: 550;
    color: #000;
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-suite .karvi-field textarea,
.seo-panel .karvi-field textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.45;
}

.form-suite .karvi-field input:hover,
.form-suite .karvi-field textarea:hover,
.seo-panel .karvi-field input:hover,
.seo-panel .karvi-field textarea:hover,
.form-suite .adv-select-trigger:hover {
    border-color: rgba(0, 0, 0, 0.28);
}

.form-suite .karvi-field input:focus,
.form-suite .karvi-field textarea:focus,
.seo-panel .karvi-field input:focus,
.seo-panel .karvi-field textarea:focus,
.form-suite .adv-select.is-open .adv-select-trigger,
.form-suite .adv-select-trigger:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.form-suite .print-select-wrap,
.form-suite .karvi-field .print-select-wrap {
    width: 100%;
}

.form-suite .adv-select {
    width: 100%;
}

.form-suite .adv-select-trigger {
    width: 100%;
    min-height: 48px;
    border-radius: 11px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    padding: 0.65rem 0.95rem;
    font-size: 0.95rem;
    font-weight: 650;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* Payment form: keep compact controls (override shared form-suite sizes) */
.form-suite .payment-section .print-field > span {
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #444;
}

.form-suite .payment-section .print-field input {
    width: 100%;
    min-height: 36px;
    height: 36px;
    padding: 0.35rem 0.65rem;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    background: #fff;
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.84rem;
    font-weight: 550;
    color: #000;
    box-sizing: border-box;
}

.form-suite .payment-section .print-field input:hover,
.form-suite .payment-section .adv-select-trigger:hover {
    border-color: rgba(0, 0, 0, 0.28);
}

.form-suite .payment-section .print-field input:focus,
.form-suite .payment-section .adv-select.is-open .adv-select-trigger,
.form-suite .payment-section .adv-select-trigger:focus {
    outline: none;
    border-color: #000;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.08);
}

.form-suite .payment-section .adv-select-trigger {
    min-height: 36px;
    height: 36px;
    padding: 0.3rem 0.65rem;
    font-size: 0.84rem;
    border-radius: 8px;
}

.form-suite .adv-select-menu {
    border-radius: 12px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14);
    padding: 0.4rem;
    z-index: 120;
    background: #fff;
}

.form-suite .adv-select.is-open {
    z-index: 40;
}

.form-suite .adv-select-menu li {
    border-radius: 9px;
    padding: 0.7rem 0.8rem;
    font-weight: 650;
    color: #000;
}

.form-suite .adv-select-menu li:hover {
    background: #f2f2f2;
}

.form-suite .adv-select-menu li.is-selected {
    background: #000;
    color: #fff;
}

.form-suite .lux-page-head,
.form-suite .payment-page-head {
    display: none !important;
}

.form-suite .karvi-seo-actions,
.form-suite .payment-save-bar,
.seo-panel .karvi-seo-actions,
.form-suite .printing-popup-actions:not([hidden]) {
    margin: 0.35rem 0 0;
    padding: 1.1rem 0 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
    border-top: none;
}

.form-suite .karvi-seo-actions .btn,
.form-suite .payment-save-bar .btn,
.seo-panel .karvi-seo-actions .btn,
.form-suite .printing-popup-actions .btn {
    min-height: 48px;
    min-width: 180px;
    padding: 0.8rem 1.4rem;
    border-radius: 11px;
    font-weight: 750;
    letter-spacing: 0.02em;
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.form-suite .karvi-seo-actions .btn:hover,
.form-suite .payment-save-bar .btn:hover,
.seo-panel .karvi-seo-actions .btn:hover {
    background: #222 !important;
}

.form-suite.payment-panel .payment-suite-card,
.form-suite .payment-form {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    width: 100% !important;
    max-width: none !important;
}

/* Payment Methods page ? full width */
.payment-panel.form-suite,
.payment-panel.form-suite .payment-suite-card,
.payment-panel.form-suite .payment-form,
.payment-panel.form-suite .payment-section,
.payment-panel.form-suite .karvi-seo-actions {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.payment-panel.form-suite .payment-suite-card {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f5f5 !important;
    padding: 1.15rem clamp(1rem, 2.5vw, 1.75rem) 1.75rem !important;
}

.payment-panel.form-suite .payment-section,
.payment-panel.form-suite .lux-pay-card {
    width: 100% !important;
    max-width: none !important;
}

.payment-panel.form-suite .payment-section .printing-grid.pay-grid,
.payment-panel.form-suite .payment-section .pay-modes-grid {
    width: 100% !important;
    max-width: none !important;
}

.panel-modal-payment .printing-panes,
.panel-modal-payment .payment-panes {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
}

.panel-modal-payment,
.panel-modal-printing.panel-modal-payment {
    width: min(98vw, 1400px) !important;
}

.form-suite .payment-save-hint {
    display: none;
}

/* Restaurant Settings ? design polish (fields unchanged) */
.setting-panel.form-suite .karvi-seo-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f5f5 !important;
    padding: 1.15rem clamp(1rem, 2.5vw, 1.75rem) 1.75rem !important;
}

.setting-panel.form-suite .karvi-seo-form {
    width: 100% !important;
    max-width: none !important;
    gap: 1rem;
}

.setting-panel.form-suite .karvi-seo-block {
    width: 100% !important;
    max-width: none !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
}

.setting-panel.form-suite .karvi-seo-block-head {
    padding: 1rem 1.25rem 0.9rem;
    background: linear-gradient(180deg, #fbfbfb 0%, #fff 100%);
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.setting-panel.form-suite .karvi-seo-block-title {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #0d0d0d !important;
}

.setting-panel.form-suite .karvi-seo-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem 1.1rem;
    padding: 1.2rem 1.25rem 1.35rem;
    background:
        radial-gradient(120% 80% at 50% 0%, #fafafa 0%, #fff 60%);
    width: 100%;
    box-sizing: border-box;
}

.setting-panel.form-suite .karvi-field > span {
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--muted) !important;
}

.setting-panel.form-suite .karvi-field input,
.setting-panel.form-suite .karvi-field textarea,
.setting-panel.form-suite .karvi-field select,
.setting-panel.form-suite .print-select-wrap select {
    min-height: 42px;
    border-radius: 11px !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.setting-panel.form-suite .karvi-field textarea {
    min-height: 120px;
}

.setting-panel.form-suite .karvi-seo-actions.lux-save-bar {
    margin: 0 !important;
    padding: 0.95rem 0 0 !important;
    border-top: none !important;
    background: transparent !important;
    justify-content: flex-start !important;
}

.setting-panel.form-suite .karvi-seo-actions .btn {
    min-width: 168px;
    min-height: 42px !important;
    border-radius: 11px !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

/* Timing chooser */
.time-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1.25rem;
    background: #fafafa;
}

.time-choose-card {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    padding: 1.2rem 1.15rem;
    border-radius: 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    background: #fff;
    text-decoration: none !important;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.time-choose-card:hover {
    border-color: #000;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    background: #000;
    color: #fff;
}

.time-choose-ico {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #000;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.time-choose-card:hover .time-choose-ico {
    background: #fff;
    border-color: #fff;
    color: #000;
}

.time-choose-copy {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.time-choose-copy strong {
    font-size: 1rem;
    font-weight: 800;
}

.time-choose-copy span {
    font-size: 0.84rem;
    color: #666;
    transition: color 0.2s ease;
}

.time-choose-card:hover .time-choose-copy span {
    color: rgba(255, 255, 255, 0.75);
}

.time-choose-go {
    color: #999;
    font-size: 1.15rem;
}

.time-choose-card:hover .time-choose-go {
    color: #fff;
}

/* Timing schedule ? full width page + form */
.time-panel.form-suite,
.time-panel.form-suite .karvi-seo-card,
.time-panel.form-suite .karvi-seo-form,
.time-panel.form-suite .time-schedule-form,
.time-panel.form-suite .karvi-seo-block,
.time-panel.form-suite .time-schedule-block,
.time-panel.form-suite .time-schedule-body,
.time-panel.form-suite .time-day-block,
.time-panel.form-suite .karvi-seo-actions,
.time-panel.form-suite .lux-save-bar {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.time-panel.form-suite .karvi-seo-card {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f5f5 !important;
    padding: 1.15rem clamp(1rem, 2.5vw, 1.75rem) 1.75rem !important;
}

.time-panel.form-suite .karvi-seo-block.time-schedule-block,
.time-panel.form-suite .time-schedule-block {
    border-radius: 16px;
    overflow: hidden;
}

.form-suite .time-schedule-body {
    padding: 1.15rem 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    background: #fafafa;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.form-suite .time-day-block {
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.form-suite .time-day-block h3 {
    margin: 0 0 0.85rem;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    color: #000;
}

.form-suite .time-day-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
    width: 100%;
}

.form-suite .time-day-fields .karvi-field {
    width: 100%;
    min-width: 0;
}

.form-suite .time-day-fields .time-picker {
    width: 100%;
}

.form-suite .time-day-fields .karvi-field .time-picker-trigger,
.form-suite .time-picker-trigger {
    width: 100%;
    min-height: 48px;
    border-radius: 11px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    font-weight: 600;
    cursor: pointer;
    color: #000;
}

.form-suite .time-picker-trigger:hover {
    border-color: #000;
}

/* Printing page */
.printing-page-root {
    position: static !important;
    inset: auto !important;
    display: block !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100%;
}

.printing-page-toolbar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.printing-page-title.is-clickable:hover {
    opacity: 0.7;
}

.printing-page-root:not(.is-printing-detail) .printing-popup-actions,
.printing-popup-actions[hidden] {
    display: none !important;
}

.printing-page-root.is-printing-detail .printing-popup-actions {
    display: flex !important;
}

.printing-suite-card .printing-popup-card {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    width: 100%;
}

.printing-suite-card .printing-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    overflow: visible;
}

.printing-suite-card .printing-group-menu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin: 0;
    overflow: visible;
}

.printing-suite-card .printing-group-menu[hidden] {
    display: none !important;
}

/* Karvi Pro — active sub-button + inline detail below */
.printing-suite-card .printing-group-menu .printing-menu-btn.is-active,
.printing-page-root .printing-group-menu .printing-menu-btn.is-active {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14) !important;
}

.printing-suite-card .printing-group-menu .printing-menu-btn.is-active .printing-menu-label,
.printing-page-root .printing-group-menu .printing-menu-btn.is-active .printing-menu-label {
    color: #fff !important;
}

.printing-suite-card .printing-group-menu .printing-menu-btn.is-active .printing-menu-ico,
.printing-page-root .printing-group-menu .printing-menu-btn.is-active .printing-menu-ico {
    background: #2a2a2a !important;
    color: #fff !important;
}

.printing-page-root.is-printing-inline .printing-detail-shell,
.printing-suite-card:has(.printing-page-root.is-printing-inline) .printing-detail-shell {
    display: block !important;
    margin-top: 1rem !important;
}

.printing-page-root.is-printing-inline #printGroup-karvi-pro:not([hidden]) {
    margin-bottom: 0.25rem;
}

.printing-suite-card .printing-menu-btn,
.printing-suite-card .print-menu-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    min-height: 76px;
    padding: 0.95rem 2.4rem 0.95rem 1rem;
    border-radius: 14px;
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    background: #fff;
    color: #000;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.printing-suite-card .printing-menu-btn:hover,
.printing-suite-card .print-menu-btn:hover,
.printing-suite-card .printing-menu-btn:focus-visible {
    border-color: #000;
    background: #000;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
}

.printing-suite-card .printing-menu-label,
.printing-suite-card .print-menu-btn .printing-menu-label {
    flex: 1 1 auto;
    min-width: 0;
    color: inherit;
    font-size: 0.92rem;
    font-weight: 750;
    letter-spacing: -0.02em;
    line-height: 1.25;
}

.printing-suite-card .print-menu-ico,
.printing-suite-card .pay-menu-ico {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #f4f4f4;
    color: #000;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.printing-suite-card .printing-menu-btn:hover .print-menu-ico,
.printing-suite-card .printing-menu-btn:hover .pay-menu-ico,
.printing-suite-card .printing-menu-btn:focus-visible .print-menu-ico {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.printing-suite-card .printing-menu-status,
.printing-suite-card .print-menu-btn .printing-menu-status {
    margin: 0 0.15rem 0 auto;
    flex-shrink: 0;
    max-width: 42%;
    padding: 0.28rem 0.58rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: #f3f3f3;
    color: #333;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.printing-suite-card .printing-menu-status.is-active {
    background: #ecfdf3;
    border-color: #abefc6;
    color: #067647;
}

.printing-suite-card .printing-menu-status.is-inactive,
.printing-suite-card .printing-menu-status.is-empty {
    background: #f3f3f3;
    border-color: rgba(0, 0, 0, 0.1);
    color: #555;
}

.printing-suite-card .printing-menu-status.is-set {
    background: #111;
    border-color: #111;
    color: #fff;
}

.printing-suite-card .printing-menu-btn:hover .printing-menu-status.is-active,
.printing-suite-card .printing-menu-btn:focus-visible .printing-menu-status.is-active {
    background: #ecfdf3;
    border-color: #ecfdf3;
    color: #067647;
}

.printing-suite-card .printing-menu-btn:hover .printing-menu-status.is-inactive,
.printing-suite-card .printing-menu-btn:hover .printing-menu-status.is-empty,
.printing-suite-card .printing-menu-btn:focus-visible .printing-menu-status.is-inactive,
.printing-suite-card .printing-menu-btn:focus-visible .printing-menu-status.is-empty {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.28);
    color: #fff;
}

.printing-suite-card .printing-menu-btn:hover .printing-menu-status.is-set,
.printing-suite-card .printing-menu-btn:focus-visible .printing-menu-status.is-set {
    background: #fff;
    border-color: #fff;
    color: #111;
}

.printing-suite-card .print-menu-btn::after,
.printing-suite-card .printing-menu-btn::after {
    top: 50%;
    bottom: auto;
    right: 0.95rem;
    border-color: currentColor;
    opacity: 0.45;
    transform: translateY(-50%) rotate(45deg);
}

.printing-suite-card .printing-menu-btn:hover::after,
.printing-suite-card .printing-menu-btn:focus-visible::after {
    opacity: 1;
    transform: translateY(-50%) rotate(45deg) translate(1px, -1px);
}

.printing-suite-card .printing-page-toolbar {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin: 0 0 1.1rem;
}

.printing-suite-card .printing-page-title {
    margin: 0;
}

.printing-suite-card .printing-detail-shell {
    position: relative;
    margin-top: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(0, 0, 0, 0.035), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 18px 48px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: rise 0.35s ease both;
}

.printing-suite-card .printing-detail-shell::before {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);
    pointer-events: none;
    z-index: 2;
}

.printing-suite-card .printing-detail-shell:has(#printingPanes[hidden]):has(#printingSaveBar[hidden]) {
    display: none;
}

.printing-page-root.is-printing-inline .printing-detail-shell {
    display: block !important;
}

.printing-page-root.is-printing-inline #printingPanes {
    display: block !important;
}

.printing-suite-card .printing-panes {
    margin-top: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.printing-suite-card .printing-pane {
    padding: 0;
}

.printing-suite-card .printing-pane-title {
    position: relative;
    margin: 0;
    padding: 1.15rem 1.35rem 1.05rem 1.55rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 248, 248, 0.9) 100%);
    font-family: inherit !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    color: #0a0a0a !important;
    line-height: 1.25;
}

.printing-suite-card .printing-pane-title::before {
    content: "";
    position: absolute;
    left: 1.15rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 1.35rem;
    border-radius: 4px;
    background: #111;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.printing-suite-card .printing-pane-label {
    margin: 0 0 0.65rem;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--muted);
}

.printing-suite-card .printing-status-field,
.printing-suite-card .printing-option-field {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.1rem;
    width: auto;
    max-width: none;
    margin: 1.2rem 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    background:
        linear-gradient(145deg, #ffffff 0%, #f5f5f5 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.85) inset,
        0 8px 22px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.printing-suite-card .printing-status-field:hover,
.printing-suite-card .printing-option-field:hover {
    border-color: rgba(0, 0, 0, 0.14);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 12px 28px rgba(0, 0, 0, 0.06);
}

.printing-suite-card .printing-status-label {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #111 !important;
}

.printing-suite-card .printing-status-label::after {
    content: "Choose current state";
    font-size: 0.75rem;
    font-weight: 500;
    color: #888;
    letter-spacing: normal;
    text-transform: none;
}

.printing-suite-card .printing-option-field .printing-status-label::after {
    content: "Select an option";
}

.printing-suite-card .printing-choice-list {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.3rem;
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-sizing: border-box;
}

.printing-suite-card .printing-choice-list.is-status-toggle {
    flex: 0 0 auto;
    padding: 5px;
    border-radius: 14px;
    background: #e8e8e8;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.printing-suite-card .printing-choice-list.is-option-chips {
    flex: 1 1 auto;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.printing-suite-card .printing-choice {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 0;
    min-width: 88px;
    min-height: 38px;
    margin: 0;
    padding: 0.45rem 1.1rem;
    border: none;
    border-radius: 11px;
    background: transparent;
    box-shadow: none;
    font-family: inherit !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: #555;
    cursor: pointer;
    user-select: none;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
}

.printing-suite-card .printing-choice-list.is-option-chips .printing-choice {
    min-width: 0;
    min-height: 38px;
    padding: 0.45rem 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 11px;
    background: #fff;
    color: #333;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.printing-suite-card .printing-choice input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    pointer-events: auto;
    z-index: 2;
}

.printing-suite-card .printing-choice span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
}

.printing-suite-card .printing-choice span::before {
    display: none;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on.is-selected span::before,
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on:has(input:checked) span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off.is-selected span::before,
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off:has(input:checked) span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.printing-suite-card .printing-choice:hover {
    color: #111;
    background: rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
    box-shadow: none;
    border-color: transparent;
}

.printing-suite-card .printing-choice-list.is-option-chips .printing-choice:hover {
    border-color: rgba(0, 0, 0, 0.28);
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.printing-suite-card .printing-choice:has(input:checked),
.printing-suite-card .printing-choice.is-selected {
    background: #111 !important;
    border-color: #111 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.2) !important;
    transform: none;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on:has(input:checked),
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on.is-selected {
    background: linear-gradient(165deg, #0f9f5b, #067647) !important;
    border-color: #05603a !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(6, 118, 71, 0.32) !important;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off:has(input:checked),
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off.is-selected {
    background: linear-gradient(165deg, #e5484d, #c62828) !important;
    border-color: #b71c1c !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(198, 40, 40, 0.32) !important;
}

.printing-suite-card .printing-choice:has(input:checked):hover,
.printing-suite-card .printing-choice.is-selected:hover {
    color: #fff !important;
    transform: none;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on:has(input:checked):hover,
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on.is-selected:hover {
    background: linear-gradient(165deg, #0d8f52, #05603a) !important;
    border-color: #045231 !important;
    color: #fff !important;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off:has(input:checked):hover,
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off.is-selected:hover {
    background: linear-gradient(165deg, #d32f2f, #b71c1c) !important;
    border-color: #9a1616 !important;
    color: #fff !important;
}

.printing-suite-card .printing-choice:focus-within {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}

.printing-suite-card .printing-pane .field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0 1.25rem 1.15rem;
}

.printing-suite-card .printing-pane .field > span {
    font-family: inherit !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--muted) !important;
}

.printing-suite-card .printing-pane .field input {
    min-height: 44px;
    height: 44px;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 12px;
    background: #fff;
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 500;
    color: #000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.15s ease;
}

.printing-suite-card .printing-pane .field input:hover {
    border-color: rgba(0, 0, 0, 0.28);
    background: #fff;
}

.printing-suite-card .printing-pane .field input:focus {
    outline: none;
    border-color: #111;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.07);
}

.printing-suite-card .printing-pane-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem 1rem;
    margin: 0 1.25rem 1.15rem;
}

.printing-suite-card .printing-pane-fields .field {
    margin: 0;
}

.printing-suite-card .printing-popup-actions,
.form-suite .printing-suite-card .printing-popup-actions:not([hidden]) {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    margin: 0 !important;
    padding: 1rem 1.25rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    background:
        linear-gradient(180deg, #f3f3f3 0%, #ebebeb 100%);
}

.printing-suite-card .printing-popup-actions .btn,
.printing-suite-card .printing-popup-actions .btn-primary,
.printing-suite-card .printing-popup-actions .btn-lg,
.form-suite .printing-suite-card .printing-popup-actions .btn {
    width: auto;
    max-width: none;
    min-width: 168px;
    min-height: 44px !important;
    height: 44px;
    margin: 0;
    padding: 0 1.55rem !important;
    border-radius: 12px !important;
    font-family: inherit !important;
    font-size: 0.94rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    background: linear-gradient(165deg, #2a2a2a, #0d0d0d) !important;
    border-color: #0d0d0d !important;
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2) !important;
    transition: transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.printing-suite-card .printing-popup-actions .btn:hover,
.form-suite .printing-suite-card .printing-popup-actions .btn:hover {
    background: linear-gradient(165deg, #333, #000) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24) !important;
}

@media (max-width: 640px) {
    .printing-suite-card .printing-status-field,
    .printing-suite-card .printing-option-field {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        max-width: none;
        margin: 0.85rem 0.9rem;
    }

    .printing-suite-card .printing-choice-list.is-status-toggle,
    .printing-suite-card .printing-choice-list.is-option-chips {
        width: 100%;
        justify-content: stretch;
    }

    .printing-suite-card .printing-choice-list.is-status-toggle .printing-choice {
        flex: 1 1 0;
    }

    .printing-suite-card .printing-pane-fields {
        grid-template-columns: 1fr;
        margin: 0 0.9rem 0.9rem;
    }

    .printing-suite-card .printing-pane .field {
        margin-left: 0.9rem;
        margin-right: 0.9rem;
    }

    .printing-suite-card .printing-popup-actions .btn,
    .printing-suite-card .printing-popup-actions .btn-primary,
    .printing-suite-card .printing-popup-actions .btn-lg {
        max-width: none;
    }
}

@media (max-width: 980px) {
    .form-suite .karvi-seo-grid,
    .seo-panel .karvi-seo-grid,
    .form-suite .karvi-seo-fields,
    .seo-panel .karvi-seo-fields,
    .time-choose-grid {
        grid-template-columns: 1fr;
    }

    .printing-suite-card .printing-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-suite .payment-section .printing-grid.pay-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-suite .payment-section .pay-field-sm,
    .form-suite .payment-section .pay-field-md,
    .form-suite .payment-section .pay-field-lg,
    .form-suite .payment-section .pay-field-full {
        grid-column: span 1;
    }

    .form-suite .payment-section .pay-field-full {
        grid-column: 1 / -1;
    }

    .form-suite .payment-section .pay-modes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .form-suite .payment-section .pay-grid-compact {
        max-width: none;
    }

    .form-suite .time-day-fields {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 560px) {
    .form-suite .time-day-fields {
        grid-template-columns: 1fr;
    }

    .form-suite .payment-section .printing-grid.pay-grid,
    .form-suite .payment-section .pay-modes-grid {
        grid-template-columns: 1fr;
    }

    .form-suite .payment-section .pay-field-sm,
    .form-suite .payment-section .pay-field-md,
    .form-suite .payment-section .pay-field-lg,
    .form-suite .payment-section .pay-field-full,
    .form-suite .payment-section .pay-field-mode {
        grid-column: span 1;
    }

    .printing-suite-card .printing-menu {
        grid-template-columns: 1fr;
    }
}

/* ========== EDIT SHELL ? left sidebar + content (Karvi-style) ========== */
body.has-edit-shell {
    overflow: hidden;
    height: 100vh;
}

body.has-edit-shell .app-wrap {
    height: 100vh;
    min-height: 100vh;
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.edit-shell {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #f3f3f3;
}

.edit-sidebar {
    flex: 0 0 248px;
    width: 248px;
    max-width: 248px;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 0.85rem 0.7rem;
    background: #ececec;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    box-sizing: border-box;
}

.edit-sidebar-brand {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #000;
    padding: 0.35rem 0.65rem 0.55rem;
}

.edit-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.edit-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.62rem 0.85rem;
    border-radius: 10px;
    background: #000;
    color: #fff;
    text-decoration: none !important;
    border: 1.5px solid #000;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.edit-sidebar-link:hover {
    background: #1a1a1a;
    color: #fff;
    transform: translateY(-1px);
}

.edit-sidebar-link.is-active {
    background: #fff;
    color: #000;
    border-color: #000;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

.edit-sidebar-ico {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    color: inherit;
}

.edit-sidebar-ico .dash-ico,
.edit-sidebar-ico svg {
    width: 18px;
    height: 18px;
}

.edit-sidebar-label {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.edit-shell-content {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #f5f5f5;
}

.edit-shell-content > .settings-panel,
.edit-shell-content > .lux-page,
.edit-shell-content > .form-suite {
    min-height: 100%;
}

body.has-edit-shell .edit-shell-content > .settings-panel.lux-page,
body.has-edit-shell .edit-shell-content > .form-suite.lux-page {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.has-edit-shell .edit-shell-content .edit-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
}

@media (max-width: 900px) {
    .edit-sidebar {
        flex-basis: 210px;
        width: 210px;
        max-width: 210px;
        padding: 0.7rem 0.5rem;
    }

    .edit-sidebar-label {
        font-size: 0.72rem;
    }
}

@media (max-width: 720px) {
    .edit-shell {
        flex-direction: column;
    }

    .edit-sidebar {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        overflow-x: auto;
        overflow-y: hidden;
    }

    .edit-sidebar-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.45rem;
        padding-bottom: 0.2rem;
    }

    .edit-sidebar-link {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.55rem 0.75rem;
    }

    .edit-sidebar-brand {
        display: none;
    }
}

/* ========== SEO SUITE ? polished full-width card ========== */
.seo-panel.form-suite,
.seo-panel.form-suite .seo-suite-card,
.seo-panel.form-suite .seo-suite-form {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}

.seo-panel .seo-suite-card {
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f5f5 !important;
    padding: 0.85rem 1rem 1.25rem !important;
}

.seo-suite-form {
    gap: 0 !important;
    width: 100% !important;
    max-width: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.seo-suite-shell {
    width: 100% !important;
    max-width: none !important;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(0, 0, 0, 0.03), transparent 50%),
        #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 18px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}

.seo-suite-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    padding: 1rem 1.25rem 0.9rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
    background: linear-gradient(180deg, #fbfbfb 0%, #fff 100%);
}

.seo-suite-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    padding-left: 0.75rem;
    position: relative;
}

.seo-suite-head-text::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    bottom: 0.2rem;
    width: 3px;
    border-radius: 3px;
    background: #111;
}

.seo-suite-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #888;
}

.seo-suite-title {
    margin: 0;
    font-family: inherit !important;
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    color: #0d0d0d !important;
    line-height: 1.2;
}

.seo-suite-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.85rem 0.95rem;
    padding: 1.15rem 1.25rem 1.2rem;
    width: 100%;
    box-sizing: border-box;
    background:
        radial-gradient(120% 70% at 50% 0%, #fafafa 0%, #fff 55%);
}

.seo-suite-grid .karvi-field {
    grid-column: span 12;
    gap: 0.3rem !important;
}

.seo-suite-grid .seo-field-url {
    grid-column: span 4;
}

.seo-suite-grid .seo-field-title {
    grid-column: span 8;
}

.seo-suite-grid .seo-field-third {
    grid-column: span 4;
}

.seo-suite-grid .seo-field-half {
    grid-column: span 6;
}

.seo-suite-grid .seo-field-full {
    grid-column: span 12;
}

.seo-suite-grid .seo-field-main {
    grid-column: span 7;
}

.seo-suite-grid .seo-field-points {
    grid-column: span 5;
}

.seo-suite-grid .seo-field-keywords {
    grid-column: span 5;
}

.seo-suite-grid .seo-field-desc {
    grid-column: span 7;
}

.seo-panel .seo-suite-form .karvi-field > span {
    font-family: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--muted) !important;
    line-height: 1.25;
}

.seo-panel .seo-suite-form .karvi-field > span em {
    margin-left: 0.35rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    color: #999;
}

.seo-panel .seo-suite-form .karvi-field input,
.seo-panel .seo-suite-form .karvi-field textarea {
    min-height: 42px !important;
    height: 42px;
    padding: 0.4rem 0.85rem !important;
    border: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 11px !important;
    background: #fff !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 500 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.seo-panel .seo-suite-form .karvi-field input:hover,
.seo-panel .seo-suite-form .karvi-field textarea:hover {
    border-color: rgba(0, 0, 0, 0.26) !important;
}

.seo-panel .seo-suite-form .karvi-field input:focus,
.seo-panel .seo-suite-form .karvi-field textarea:focus {
    border-color: #111 !important;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
    outline: none;
}

.seo-panel .seo-suite-form .karvi-field textarea {
    height: auto !important;
    min-height: 88px !important;
    resize: vertical;
    line-height: 1.45;
    padding-top: 0.65rem !important;
    padding-bottom: 0.65rem !important;
}

.seo-panel .seo-suite-form .seo-field-desc textarea,
.seo-panel .seo-suite-form .seo-field-full textarea {
    min-height: 72px !important;
}

.seo-panel .seo-suite-form textarea.seo-content2 {
    overflow: hidden !important;
    resize: none !important;
    field-sizing: content;
    min-height: 120px !important;
}

.seo-panel .seo-save-bar,
.seo-panel .seo-suite-shell .seo-save-bar {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 0.65rem;
    margin: 0 !important;
    padding: 0.9rem 1.25rem !important;
    border-top: 1px solid rgba(0, 0, 0, 0.07) !important;
    background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%) !important;
}

.seo-panel .seo-save-bar .btn {
    min-width: 180px;
    min-height: 42px !important;
    height: 42px;
    padding: 0 1.4rem !important;
    border-radius: 11px !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

@media (max-width: 900px) {
    .seo-suite-grid .seo-field-url,
    .seo-suite-grid .seo-field-title,
    .seo-suite-grid .seo-field-third,
    .seo-suite-grid .seo-field-half,
    .seo-suite-grid .seo-field-main,
    .seo-suite-grid .seo-field-points,
    .seo-suite-grid .seo-field-keywords,
    .seo-suite-grid .seo-field-desc {
        grid-column: span 12;
    }

    .seo-panel .seo-save-bar .btn {
        width: 100%;
        min-width: 0;
    }
}

/* ========== MENU HUB ? polished tiles ========== */
body.edit-suite .menu-hub-panel.lux-page {
    padding: 0 !important;
    background: #f3f3f3 !important;
    width: 100% !important;
    max-width: none !important;
}

body.edit-suite .menu-hub-panel > .edit-topbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
    background: #fff !important;
    box-shadow: none !important;
    padding: 0.7rem clamp(1.1rem, 3vw, 2rem) !important;
}

.menu-hub-shell {
    padding: 1.25rem clamp(1.1rem, 3vw, 2rem) 2rem;
    box-sizing: border-box;
}

.menu-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    width: 100%;
}

.menu-hub-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    min-height: 76px;
    padding: 0.95rem 1.05rem;
    text-decoration: none !important;
    color: inherit;
    background: #fff;
    border: 1.5px solid rgba(0, 0, 0, 0.1);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease,
        background 0.18s ease;
}

.menu-hub-card:hover {
    border-color: #000;
    background: #fff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.menu-hub-card:active {
    transform: translateY(0);
}

.menu-hub-ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #f2f2f2;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #000;
    flex-shrink: 0;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.menu-hub-card:hover .menu-hub-ico {
    background: #000;
    border-color: #000;
    color: #fff;
}

.menu-hub-ico svg,
.menu-hub-ico .dash-ico {
    width: 18px;
    height: 18px;
}

.menu-hub-copy {
    display: flex;
    flex-direction: column;
    gap: 0.18rem;
    min-width: 0;
}

.menu-hub-card-title {
    font-family: "Manrope", system-ui, sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #000;
    line-height: 1.2;
}

.menu-hub-card-desc {
    font-size: 0.78rem;
    font-weight: 500;
    color: #666;
    line-height: 1.3;
}

.menu-hub-go {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    color: #888;
    background: #f0f0f0;
    border: 1px solid transparent;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.menu-hub-card:hover .menu-hub-go {
    background: #000;
    border-color: #000;
    color: #fff;
    transform: translateX(3px);
}

@media (max-width: 720px) {
    .menu-hub-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   Panel default typography ? one font / no clash text
   ========================================================= */
.app-body,
.login-body,
.edit-suite,
.edit-shell,
.panel,
.settings-panel,
.lux-page,
.dash-main,
.panel-modal,
.panel-modal-card,
.home-shell,
.add-resto-panel,
.website-panel {
    font-family: var(--font);
}

button,
.btn,
.btn-primary,
.btn-ghost,
.btn-outline,
.btn-sm,
.btn-lg,
.btn-save,
.nav-btn,
.dash-ghost-btn,
.dash-primary-btn,
.dash-card,
.menu-hub-card,
.edit-topbar-btn,
.edit-topbar-link,
.login-submit,
.shortcuts-save,
.time-update-save,
.topping-btn,
.addon-btn,
.size-btn,
.price-action-btn,
.order-action-btn,
.more-time-submit,
.add-resto-save,
.add-resto-cancel,
.update-item-save,
.website-list-btn,
.notice-popup-ok,
.category-items-btn,
.category-save-btn,
input[type="submit"],
input[type="button"] {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

h1, h2, h3, h4,
.panel-head h1,
.panel-head-compact h1,
.list-head h2,
.panel-title,
.settings-title,
.page-title,
.resto-name,
.category-head h2,
.menu-section-title,
.dash-section-title,
.dash-card-title,
.more-time-title,
.add-resto-head h1,
.website-panel-head h1,
.update-item-head,
.order-invoice-page-title {
    font-family: var(--font) !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
}

label > span,
.field > span,
.field span,
.home-filter span,
.orders-filter-field > span,
.lux-eyebrow,
.eyebrow,
.login-kicker,
.time-day-fields label span,
.printing-pane .field > span,
.panel-modal-form .field > span,
.more-time-field > span,
.add-resto-field > span,
.update-item-field > span,
.category-field > span {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

input,
select,
textarea,
.custom-select-trigger,
.time-picker-trigger,
.url-edit-input,
.url-wrap input,
.add-resto-field input,
.update-item-field input,
.update-item-field select {
    font-family: var(--font) !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Keep invoice sheet on same UI font */
.rechnung-sheet,
.rechnung-sheet * {
    font-family: var(--font) !important;
}

.rechnung-toolbar .btn,
.rechnung-toolbar button {
    font-family: var(--font) !important;
    font-weight: 600 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* =========================================================
   Payment + Timing pages ? force full content width
   ========================================================= */
body.has-edit-shell .edit-shell-content:has(.payment-panel),
body.has-edit-shell .edit-shell-content:has(.time-panel) {
    width: 100% !important;
    max-width: none !important;
}

.payment-panel.form-suite,
.time-panel.form-suite {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.payment-panel.form-suite .payment-suite-card,
.payment-panel.form-suite .karvi-seo-card,
.time-panel.form-suite .karvi-seo-card,
.edit-suite .payment-panel .karvi-seo-card,
.edit-suite .time-panel .karvi-seo-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #f5f5f5 !important;
    padding: 0.85rem 1rem 1.25rem !important;
    box-sizing: border-box !important;
}

.payment-panel.form-suite .payment-form,
.edit-suite .payment-panel .payment-form,
.time-panel.form-suite .karvi-seo-form,
.time-panel.form-suite .time-schedule-form,
.edit-suite .time-panel .karvi-seo-form {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.payment-panel.form-suite .payment-section,
.payment-panel.form-suite .lux-pay-card,
.edit-suite .payment-panel .lux-pay-card {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
}

.payment-panel.form-suite .payment-section .printing-grid.pay-grid,
.payment-panel.form-suite .payment-section .pay-modes-grid,
.payment-panel.form-suite .payment-section .pay-grid-compact {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.time-panel.form-suite .karvi-seo-block,
.time-panel.form-suite .time-schedule-block,
.edit-suite .time-panel .karvi-seo-block {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.time-panel.form-suite .time-schedule-body,
.time-panel.form-suite .time-day-block,
.time-panel.form-suite .time-day-fields,
.time-panel.form-suite .time-day-fields .karvi-field,
.time-panel.form-suite .time-day-fields .time-picker,
.time-panel.form-suite .time-picker-trigger {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

.time-panel.form-suite .time-picker-dropdown {
    max-width: none !important;
    width: 100% !important;
}
/* Printing suite redesign — menu cards + detail panes */
.printing-suite-card .printing-suite-head-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.printing-suite-card .printing-suite-eyebrow {
    margin: 0;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #888;
}

.printing-suite-card .printing-suite-sub {
    margin: 0.15rem 0 0;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 500;
    color: #777;
    line-height: 1.35;
}

.printing-suite-card .printing-page-toolbar {
    align-items: flex-start !important;
    margin: 0 0 1.15rem !important;
    padding: 0.15rem 0.1rem 0;
}

.printing-suite-card .printing-page-title {
    margin: 0 !important;
    font-family: inherit !important;
    font-size: 1.35rem !important;
    font-weight: 750 !important;
    letter-spacing: -0.03em !important;
    text-transform: none !important;
    color: #0a0a0a !important;
    line-height: 1.2;
}

.printing-suite-card .printing-menu,
.printing-suite-card .printing-group-menu {
    gap: 0.75rem !important;
}

.printing-suite-card .printing-menu-btn,
.printing-suite-card .print-menu-btn {
    position: relative;
    min-height: 88px !important;
    padding: 1rem 2.35rem 1rem 1rem !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(0, 0, 0, 0.03), transparent 55%),
        #fff !important;
    color: #111 !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 8px 20px rgba(0, 0, 0, 0.04) !important;
    text-align: left;
}

.printing-suite-card .printing-menu-btn:hover,
.printing-suite-card .print-menu-btn:hover,
.printing-suite-card .printing-menu-btn:focus-visible {
    border-color: rgba(0, 0, 0, 0.55) !important;
    background:
        radial-gradient(120% 120% at 0% 0%, rgba(0, 0, 0, 0.05), transparent 55%),
        #111 !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.16) !important;
    outline: none;
}

.printing-suite-card .printing-menu-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.4rem;
    flex: 1 1 auto;
    min-width: 0;
}

.printing-suite-card .printing-menu-label,
.printing-suite-card .print-menu-btn .printing-menu-label {
    flex: 0 1 auto !important;
    margin: 0;
    font-family: inherit !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    text-transform: none !important;
    line-height: 1.25;
}

.printing-suite-card .print-menu-ico,
.printing-suite-card .pay-menu-ico {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #f3f3f3 !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #111 !important;
}

.printing-suite-card .printing-menu-btn:hover .print-menu-ico,
.printing-suite-card .printing-menu-btn:hover .pay-menu-ico,
.printing-suite-card .printing-menu-btn:focus-visible .print-menu-ico {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    color: #fff !important;
    transform: scale(1.04);
}

.printing-suite-card .printing-menu-status,
.printing-suite-card .print-menu-btn .printing-menu-status {
    margin: 0 !important;
    max-width: 100% !important;
    padding: 0.22rem 0.55rem !important;
    border-radius: 999px;
    font-family: inherit !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.printing-suite-card .printing-menu-status.is-inactive,
.printing-suite-card .printing-menu-status.is-empty {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #b91c1c !important;
}

.printing-suite-card .printing-menu-btn:hover .printing-menu-status.is-inactive,
.printing-suite-card .printing-menu-btn:hover .printing-menu-status.is-empty,
.printing-suite-card .printing-menu-btn:focus-visible .printing-menu-status.is-inactive,
.printing-suite-card .printing-menu-btn:focus-visible .printing-menu-status.is-empty {
    background: rgba(254, 226, 226, 0.95) !important;
    border-color: rgba(254, 202, 202, 0.95) !important;
    color: #b91c1c !important;
}

.printing-suite-card .print-menu-btn::after,
.printing-suite-card .printing-menu-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    opacity: 0.35;
    transform: translateY(-50%) rotate(-45deg);
}

.printing-suite-card .printing-menu-btn:hover::after,
.printing-suite-card .printing-menu-btn:focus-visible::after {
    opacity: 0.9;
    transform: translateY(-50%) rotate(-45deg) translate(1px, 1px);
}

.printing-suite-card .printing-detail-shell {
    margin-top: 1.05rem !important;
    border-radius: 18px !important;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(0, 0, 0, 0.03), transparent 50%),
        #fff !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 14px 40px rgba(0, 0, 0, 0.06) !important;
}

.printing-suite-card .printing-detail-shell::before {
    content: none !important;
}

.printing-suite-card .printing-pane {
    padding: 0 0 0.35rem;
}

.printing-suite-card .printing-pane-title {
    padding: 1.05rem 1.25rem 0.95rem 1.45rem !important;
    background: linear-gradient(180deg, #fbfbfb 0%, #fff 100%) !important;
    font-size: 1.12rem !important;
    letter-spacing: -0.02em !important;
}

.printing-suite-card .printing-pane-title::before {
    left: 1.1rem !important;
    width: 3px !important;
    height: 1.15rem !important;
    box-shadow: none !important;
}

.printing-suite-card .printing-status-field,
.printing-suite-card .printing-option-field {
    margin: 1.15rem 1.25rem !important;
    padding: 0.95rem 1.05rem !important;
    border-radius: 14px !important;
    background: #f7f7f7 !important;
    box-shadow: none !important;
}

.printing-suite-card .printing-status-field:hover,
.printing-suite-card .printing-option-field:hover {
    background: #f3f3f3 !important;
    box-shadow: none !important;
}

.printing-suite-card .printing-status-label {
    font-size: 0.92rem !important;
}

.printing-suite-card .printing-status-label::after {
    font-size: 0.74rem;
}

.printing-suite-card .printing-choice-list.is-status-toggle {
    padding: 4px !important;
    border-radius: 12px !important;
}

.printing-suite-card .printing-choice {
    min-width: 92px;
    min-height: 36px !important;
    border-radius: 10px !important;
}

.printing-suite-card .printing-choice-list.is-option-chips .printing-choice {
    min-height: 36px !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

.printing-suite-card .printing-choice:has(input:checked),
.printing-suite-card .printing-choice.is-selected {
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16) !important;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on:has(input:checked),
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-on.is-selected {
    box-shadow: 0 6px 14px rgba(6, 118, 71, 0.28) !important;
}

.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off:has(input:checked),
.printing-suite-card .printing-choice-list.is-status-toggle .printing-choice.is-off.is-selected {
    box-shadow: 0 6px 14px rgba(198, 40, 40, 0.28) !important;
}

.printing-suite-card .printing-pane .field {
    margin: 0 1.25rem 1.05rem !important;
}

.printing-suite-card .printing-pane .field > span {
    font-size: 0.85rem !important;
}

.printing-suite-card .printing-pane .field input {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 11px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

.printing-suite-card .printing-pane .field input:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06) !important;
}

.printing-suite-card .printing-popup-actions,
.form-suite .printing-suite-card .printing-popup-actions:not([hidden]) {
    padding: 0.9rem 1.25rem !important;
    background: linear-gradient(180deg, #f7f7f7 0%, #efefef 100%) !important;
}

.printing-suite-card .printing-popup-actions .btn,
.printing-suite-card .printing-popup-actions .btn-primary,
.printing-suite-card .printing-popup-actions .btn-lg,
.form-suite .printing-suite-card .printing-popup-actions .btn {
    min-width: 180px !important;
    border-radius: 11px !important;
    background: #111 !important;
    border-color: #111 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.printing-suite-card .printing-popup-actions .btn:hover,
.form-suite .printing-suite-card .printing-popup-actions .btn:hover {
    background: #000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14) !important;
}

@media (max-width: 980px) {
    .printing-suite-card .printing-menu,
    .printing-suite-card .printing-group-menu {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .printing-suite-card .printing-menu,
    .printing-suite-card .printing-group-menu {
        grid-template-columns: 1fr !important;
    }
}

.printing-page-root.is-printing-detail .printing-suite-sub,
.printing-page-root.is-printing-group .printing-suite-sub {
    display: none !important;
}

/* Hub flow icons — force pure black */
.hub-panel .hub-flow-ico,
.hub-flow-ico {
    color: #000 !important;
    border-color: rgba(0, 0, 0, 0.22) !important;
}

.hub-panel .hub-flow-ico svg,
.hub-panel .hub-flow-ico .dash-ico,
.hub-flow-ico svg,
.hub-flow-ico .dash-ico {
    color: #000 !important;
    stroke: #000 !important;
    fill: none !important;
}

.hub-panel .hub-flow-ico svg *,
.hub-panel .hub-flow-ico .dash-ico *,
.hub-flow-ico svg *,
.hub-flow-ico .dash-ico * {
    stroke: #000 !important;
    color: #000 !important;
}

.hub-panel .hub-flow-ico svg [fill="currentColor"],
.hub-panel .hub-flow-ico .dash-ico [fill="currentColor"],
.hub-flow-ico svg [fill="currentColor"],
.hub-flow-ico .dash-ico [fill="currentColor"] {
    fill: #000 !important;
    stroke: none !important;
}

.hub-panel .hub-flow-step strong,
.hub-flow-step strong {
    color: #000 !important;
}

.hub-panel .hub-flow-step:hover .hub-flow-ico svg,
.hub-panel .hub-flow-step:hover .hub-flow-ico .dash-ico,
.hub-flow-step:hover .hub-flow-ico svg,
.hub-flow-step:hover .hub-flow-ico .dash-ico {
    color: #fff !important;
    stroke: #fff !important;
}

.hub-panel .hub-flow-step:hover .hub-flow-ico svg *,
.hub-panel .hub-flow-step:hover .hub-flow-ico .dash-ico *,
.hub-flow-step:hover .hub-flow-ico svg *,
.hub-flow-step:hover .hub-flow-ico .dash-ico * {
    stroke: #fff !important;
    color: #fff !important;
}

.hub-panel .hub-flow-step:hover .hub-flow-ico svg [fill="currentColor"],
.hub-panel .hub-flow-step:hover .hub-flow-ico .dash-ico [fill="currentColor"],
.hub-flow-step:hover .hub-flow-ico svg [fill="currentColor"],
.hub-flow-step:hover .hub-flow-ico .dash-ico [fill="currentColor"] {
    fill: #fff !important;
    stroke: none !important;
}

/* =========================================================
   ONE FONT LOCK — Manrope everywhere (no mixed typefaces)
   ========================================================= */
html,
body,
body *,
body *::before,
body *::after {
    font-family: "Manrope", system-ui, -apple-system, sans-serif !important;
}

/* Search lock — keep filters reliable */
.hub-inline-search {
    margin: 0 0 0.85rem;
}

.hub-inline-search input[type="search"] {
    width: 100%;
    min-height: 42px;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 11px;
    background: #fff;
    font-family: inherit !important;
    font-size: 0.92rem;
    font-weight: 500;
    color: #111;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.hub-inline-search input[type="search"]:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

tr[hidden],
.postal-row[hidden],
.order-row[hidden],
.price-row[hidden],
.hub-feat[hidden],
.menu-hub-card[hidden],
.hub-tile[hidden],
.dash-card[hidden] {
    display: none !important;
}