@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,600&display=swap');

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: #0b0f17;
      color: #94a3b8;
      overflow-x: hidden;
    }
    body.light-theme {
      color-scheme: light;
      filter: invert(1) hue-rotate(180deg);
    }
    body.light-theme img,
    body.light-theme video,
    body.light-theme canvas {
      filter: invert(1) hue-rotate(180deg);
    }
    .custom-scroll::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    .custom-scroll::-webkit-scrollbar-track {
      background: #0d131f;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
      background: #1e293b;
      border-radius: 4px;
    }
    .card-dark {
      background-color: #121824;
      border: 1px solid #1e293b;
      border-radius: 12px;
    }
    .sidebar-active {
      background-color: #00baa5 !important;
      color: #061e1b !important;
      font-weight: 700;
      border-radius: 8px;
    }
    .sidebar-active-amber {
      background-color: #f59e0b !important;
      color: #061e1b !important;
      font-weight: 700;
      border-radius: 8px;
    }
    .sidebar-active-purple {
      background-color: #a855f7 !important;
      color: #ffffff !important;
      font-weight: 700;
      border-radius: 8px;
    }
    .table-card-active {
      background-color: #059669;
      border: 1px solid #10b981;
      box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
    }
    .table-card-active:hover {
      box-shadow: 0 0 25px rgba(16, 185, 129, 0.45);
      transform: translateY(-2px);
    }
    .table-card-active.floor-card-status-free {
      background-color: #059669;
      border-color: #10b981;
    }
    .table-card-active.floor-card-status-occupied {
      background-color: #1d4ed8;
      border-color: #60a5fa;
      box-shadow: 0 0 15px rgba(96, 165, 250, .3);
    }
    .table-card-active.floor-card-status-occupied:hover {
      box-shadow: 0 0 25px rgba(96, 165, 250, .5);
    }
    .table-card-active.floor-card-status-reserved {
      background-color: #b45309;
      border-color: #fbbf24;
      box-shadow: 0 0 15px rgba(251, 191, 36, .25);
    }
    .table-card-active.floor-card-status-reserved:hover {
      box-shadow: 0 0 25px rgba(251, 191, 36, .4);
    }
    .table-card-active.floor-card-status-maintenance {
      background-color: #475569;
      border-color: #94a3b8;
      box-shadow: 0 0 15px rgba(148, 163, 184, .2);
    }
    .table-card-active.floor-card-status-cleaning {
      background-color: #6d28d9;
      border-color: #a78bfa;
      box-shadow: 0 0 15px rgba(167, 139, 250, .2);
    }
    .floor-status-badge {
      border-radius: 9999px;
      background: rgba(15, 23, 42, .3);
      padding: 2px 8px;
      font-size: 10px;
      font-weight: 700;
    }
    .floor-card.is-layout-editing {
      cursor: grab;
      outline: 1px dashed rgba(251, 191, 36, .75);
      outline-offset: 2px;
    }
    .floor-card.is-layout-editing:active { cursor: grabbing; }
    .floor-card.is-dragging { opacity: .45; }
    .floor-card.is-drop-target { box-shadow: 0 0 0 2px #fbbf24; }
    .promo-ticker { overflow: hidden; white-space: nowrap; }
    .promo-ticker-track { display: flex; width: max-content; }
    .promo-ticker-track.is-running { animation: promo-scroll 24s linear infinite; }
    .promo-ticker-track span { display: block; padding-right: 3rem; }
    @keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .dash-panel {
      background: #101621;
      border: 1px solid #202b3b;
      border-radius: 8px;
    }
    .dash-kpi {
      background: linear-gradient(145deg, #121a27, #101621);
      border: 1px solid #202b3b;
      border-radius: 8px;
    }
    #view-master.products-page .dash-panel { border-radius: 14px; }
    #view-master.products-page #master-search { border-radius: 10px; background: #151a23; }
    #view-master.products-page #master-head { background: #20232c; }
    #view-master.products-page #master-body tr { border-bottom: 1px solid #292d37; }
    #view-master.products-page #master-body td { padding-top: .8rem; padding-bottom: .8rem; }
    #view-master.reports-page .dash-panel { border-radius: 9px; }
    #view-master.reports-page #master-search { border-radius: 10px; background: #151a23; }
    #view-master.reports-page #master-head { background: #101621; }
    #view-master.reports-page #master-body td { padding-top: .8rem; padding-bottom: .8rem; }
    #accounting-interface .accounting-panel { border-radius: 14px; }
    #accounting-interface details summary { list-style: none; }
    #accounting-interface details summary::-webkit-details-marker { display: none; }
    .revenue-bar span { display: block; width: 100%; min-height: 2px; }
    @media (max-width: 900px) {
      #view-overview .overview-grid.grid-cols-2 { grid-template-columns: minmax(0, 1fr); }
      #view-overview .overview-grid.grid-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #view-overview .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #view-overview .best-seller-list { grid-template-columns: minmax(0, 1fr); }
      #view-overview .chart-scroll { overflow-x: auto; }
      #view-overview .chart-inner { min-width: 560px; }
    }
    @media (max-width: 600px) {
      #accounting-interface .accounting-panel > div > .grid { grid-template-columns: 42px minmax(0, 1fr) auto 48px; }
      #accounting-interface details summary { grid-template-columns: 74px minmax(0, 1fr) auto; }
      #accounting-interface details summary > span:nth-child(2) { display: none; }
    }
    @media print {
      body.accounting-print > * { visibility: hidden; }
      body.accounting-print #accounting-interface,
      body.accounting-print #accounting-interface * { visibility: visible; }
      body.accounting-print #accounting-interface { position: absolute; inset: 0; width: 100%; padding: 1rem; background: white; color: black; }
      body.accounting-print #accounting-interface .dash-panel { border: 1px solid #bbb; background: white; color: black; }
      body.accounting-print #accounting-interface button { display: none; }
    }
    body > aside.sidebar-collapsed { width: 3.5rem !important; }
    body > aside.sidebar-collapsed .nav-item,
    body > aside.sidebar-collapsed a { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
    body > aside.sidebar-collapsed .nav-item span,
    body > aside.sidebar-collapsed a span,
    body > aside.sidebar-collapsed .p-2 > div > span,
    body > aside.sidebar-collapsed h1,
    body > aside.sidebar-collapsed .border-b p,
    body > aside.sidebar-collapsed .border-t > div:first-child > div:last-child { display: none; }
    body > aside.sidebar-collapsed .p-2 { padding: .35rem; }
    body > aside.sidebar-collapsed #sidebar-brand { justify-content: center; padding-right: 0; padding-left: 0; }
    body > aside.sidebar-collapsed #sidebar-brand > div:first-child { display: none; }
    body > aside.sidebar-collapsed #sidebar-toggle { display: grid; width: 36px; height: 36px; place-items: center; margin: 0 auto; }
    @media (max-width: 760px) {
      body > aside { position: relative; z-index: 1; inset: auto; flex: 0 0 3.5rem; width: 3.5rem !important; height: 100vh; height: 100dvh; transition: width .22s ease, flex-basis .22s ease; }
      body > aside.sidebar-expanded-mobile { flex-basis: 14rem; width: 14rem !important; box-shadow: none; }
      body > aside .nav-item { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
      body > aside .p-2 > div > span,
      body > aside h1,
      body > aside .border-b p,
      body > aside .border-t > div:first-child > div:last-child { display: none; }
      body > aside .nav-item span,
      body > aside a span { font-size: 0; line-height: 0; }
      body > aside a { justify-content: center; padding-left: .4rem; padding-right: .4rem; }
      body > aside .p-2 { padding: .35rem; }
      body > aside .space-y-4 { gap: .5rem; }
      body > aside.sidebar-expanded-mobile .nav-item,
      body > aside.sidebar-expanded-mobile a { justify-content: flex-start; padding-left: .75rem; padding-right: .75rem; }
      body > aside.sidebar-expanded-mobile .nav-item span,
      body > aside.sidebar-expanded-mobile a span { font-size: inherit; line-height: inherit; }
      body > aside.sidebar-expanded-mobile .p-2 > div > span,
      body > aside.sidebar-expanded-mobile h1,
      body > aside.sidebar-expanded-mobile .border-b p,
      body > aside.sidebar-expanded-mobile .border-t > div:first-child > div:last-child { display: block; }
      body > aside:not(.sidebar-expanded-mobile) #sidebar-brand { justify-content: center; padding-right: 0; padding-left: 0; }
      body > aside:not(.sidebar-expanded-mobile) #sidebar-brand > div:first-child { display: none; }
      body > aside:not(.sidebar-expanded-mobile) #sidebar-toggle { display: grid; width: 36px; height: 36px; place-items: center; margin: 0 auto; }
      body > aside.sidebar-expanded-mobile #sidebar-brand { justify-content: space-between; padding-right: 1rem; padding-left: 1rem; }
      body > aside.sidebar-expanded-mobile #sidebar-brand > div:first-child { display: flex; }
      body > aside.sidebar-expanded-mobile h1,
      body > aside.sidebar-expanded-mobile .border-b p { display: block; }
      body > main { width: auto; min-width: 0; margin-left: 0; flex: 1 1 0%; }
      body > main header { padding-left: .75rem; padding-right: .75rem; }
      body > main header > div:nth-child(2) > div:first-child { display: none; }
      #view-overview .overview-grid { grid-template-columns: minmax(0, 1fr); }
      #view-overview .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      #view-overview .best-seller-list { grid-template-columns: minmax(0, 1fr); }
      #view-overview .chart-scroll { overflow-x: auto; }
      #view-overview .chart-inner { min-width: 560px; }
    }
    #action-dialog {
      width: min(92vw, 440px);
      max-height: 85vh;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 0;
      color: #e2e8f0;
      background: #121824;
    }
    #action-dialog.floor-menu-dialog { width: min(92vw, 720px); }
    #action-dialog::backdrop { background: rgba(2, 6, 23, 0.78); }
    #users-roles-dialog::backdrop { background: rgba(2, 6, 23, 0.78); }
    #action-toast {
      position: fixed;
      z-index: 60;
      right: 20px;
      bottom: 20px;
      max-width: min(420px, calc(100vw - 40px));
      border: 1px solid #334155;
      border-radius: 8px;
      padding: 10px 14px;
      color: #f8fafc;
      background: #121824;
      box-shadow: 0 12px 32px rgba(0, 0, 0, .35);
    }

    .login-body {
      min-height: 100vh;
      background: radial-gradient(ellipse at 7% 80%, rgba(91, 35, 75, .28), transparent 35%), radial-gradient(ellipse at 72% 0%, rgba(19, 117, 124, .18), transparent 30%), #17191f;
      color: #f8fafc;
    }
    .login-stage { display: flex; min-height: 100vh; justify-content: center; padding: clamp(38px, 8vh, 76px) 20px 28px; }
    .login-shell { width: min(100%, 760px); text-align: center; }
    .login-body.is-credentials .login-stage { padding-top: 28px; }
    .login-body.is-credentials .login-brand { display: none; }
    .role-picker:not(.is-visible) { display: none; }
    .role-picker.is-hidden, .login-account-picker:not(.is-visible), .login-credentials:not(.is-visible) { display: none; }
    .login-account-picker.is-visible, .login-credentials.is-visible { display: block; }
    .login-brand { display: inline-flex; align-items: center; gap: 12px; margin: 0 auto 44px; color: #e9bd50; animation: login-rise .7s both; }
    .login-brand-image { display: block; width: min(100%, 440px); max-height: 124px; object-fit: contain; }
    .login-crest { position: relative; display: flex; width: 56px; height: 104px; align-items: center; justify-content: center; border: 1.5px solid #e5b941; border-radius: 50%; box-shadow: inset 0 0 0 4px #17191f, inset 0 0 0 5px rgba(229, 185, 65, .72); font-family: 'Playfair Display', serif; font-size: 60px; line-height: 1; }
    .login-crest-star { position: absolute; top: 44px; left: 30px; width: 10px; height: 10px; fill: #e5b941; }
    .login-wordmark { text-align: left; }
    .login-wordmark > div { color: #e9bd50; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(42px, 8vw, 66px); line-height: .9; }
    .login-wordmark span { display: block; margin-top: 10px; color: #d4a93e; font-size: 9px; font-weight: 700; letter-spacing: 4px; white-space: nowrap; }
    .role-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
    .role-card { grid-column: span 2; display: flex; min-height: 180px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px solid #343640; border-radius: 16px; background: rgba(34, 36, 44, .88); color: #f8fafc; cursor: pointer; opacity: 0; animation: login-rise .55s calc(.12s + var(--card-index) * .09s) forwards; transition: transform .22s ease, border-color .22s ease, background-color .22s ease, box-shadow .22s ease; }
    .role-card:nth-child(4) { grid-column: 2 / span 2; }
    .role-card:nth-child(5) { grid-column: 4 / span 2; }
    .role-card:hover, .role-card:focus-visible { transform: translateY(-5px); border-color: rgba(255, 255, 255, .24); outline: none; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
    .role-card.is-selected { border-color: rgba(167, 139, 250, .72); box-shadow: 0 0 0 1px rgba(167, 139, 250, .16), 0 12px 32px rgba(99, 72, 145, .13); }
    .role-icon { display: grid; width: 64px; height: 64px; place-items: center; margin-bottom: 10px; border-radius: 16px; transition: transform .28s ease; }
    .role-card:hover .role-icon { transform: translateY(-2px) rotate(-6deg); }
    .role-icon svg { width: 18px; height: 18px; }
    .role-name { font-size: 16px; font-weight: 700; }
    .role-count { font-size: 11px; color: #aab0bd; }
    .role-emerald .role-icon { background: rgba(4, 120, 87, .30); color: #34d399; }
    .role-amber .role-icon { background: rgba(161, 98, 7, .30); color: #fbbf24; }
    .role-sky .role-icon { background: rgba(3, 105, 161, .28); color: #38bdf8; }
    .role-indigo .role-icon { background: rgba(67, 56, 202, .28); color: #818cf8; }
    .role-violet .role-icon { background: rgba(109, 40, 217, .28); color: #c084fc; }
    .login-back-row { display: flex; justify-content: flex-start; margin-bottom: 16px; }
    .login-text-back { display: inline-flex; align-items: center; gap: 7px; border: 0; background: transparent; padding: 6px 0; color: #cbd5e1; cursor: pointer; font-size: 13px; }
    .login-text-back:hover { color: #fff; }
    .login-text-back svg { width: 17px; height: 17px; }
    .login-welcome { margin: 0 auto 22px; text-align: center; }
    .login-welcome h1 { margin: 0; color: #f8fafc; font-size: 23px; font-weight: 700; }
    .login-welcome p { margin: 5px 0 0; color: #aab0bd; font-size: 14px; }
    .account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 144px)); justify-content: center; gap: 12px; max-width: 480px; margin: 0 auto; }
    .account-card { display: flex; width: 100%; min-width: 0; min-height: 134px; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border: 1px solid #343640; border-radius: 14px; background: rgba(34, 36, 44, .88); padding: 10px; color: #f8fafc; cursor: pointer; text-align: center; transition: border-color .2s ease, background-color .2s ease, transform .2s ease, box-shadow .2s ease; }
    .account-card[hidden], .login-form [hidden], .login-password-link[hidden], .login-pin-profile[hidden] { display: none !important; }
    .account-card:hover, .account-card:focus-visible, .account-card.is-selected { transform: translateY(-2px); border-color: rgba(167, 139, 250, .72); outline: none; background: #252630; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
    .account-avatar { display: grid; width: 64px; height: 64px; flex: none; place-items: center; overflow: hidden; border: 1px solid rgba(192, 132, 252, .28); border-radius: 50%; background: rgba(109, 40, 217, .24); color: #d8b4fe; object-fit: cover; }
    .account-avatar-initial { font-size: 18px; font-weight: 700; }
    .account-name, .account-code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-name { max-width: 100%; color: #f8fafc; font-size: 14px; font-weight: 700; }
    .account-code { max-width: 100%; color: #aab0bd; font-size: 11px; }
    .login-no-accounts { max-width: 460px; margin: 0 auto; border: 1px solid #343640; border-radius: 12px; background: rgba(34, 36, 44, .7); padding: 14px; color: #aab0bd; font-size: 12px; text-align: center; }
    .login-password-link { display: inline-block; border: 0; background: transparent; padding: 8px 0; color: #8296b7; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }
    .login-password-link:hover { color: #cbd5e1; }
    .login-error { margin: 0 auto 18px; max-width: 480px; border: 1px solid rgba(244, 63, 94, .35); border-radius: 8px; background: rgba(127, 29, 29, .22); padding: 10px 12px; text-align: left; color: #fda4af; font-size: 11px; }
    .login-credentials { max-height: 0; overflow: hidden; margin-top: 0; opacity: 0; transform: translateY(10px); text-align: center; transition: max-height .38s ease, opacity .25s ease, transform .25s ease, margin .25s ease; }
    .login-credentials.is-visible { max-height: 900px; margin-top: 0; opacity: 1; transform: translateY(0); }
    .login-credentials-card { max-width: 380px; margin: 0 auto; }
    .login-pin-profile { display: grid; justify-items: center; margin: 28px auto 22px; }
    .login-pin-avatar { display: grid; width: 100px; height: 100px; place-items: center; overflow: hidden; border: 2px solid #8b5cf6; border-radius: 50%; background: #08080b; color: #fff; font-size: 28px; font-weight: 700; object-fit: cover; }
    .login-pin-avatar-initial { background: rgba(109, 40, 217, .8); }
    .login-pin-profile h1 { margin: 12px 0 0; color: #f8fafc; font-size: 17px; font-weight: 700; }
    .login-pin-profile p { margin: 3px 0 0; color: #aab0bd; font-size: 14px; }
    .login-credentials-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
    .login-back { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid #393b44; border-radius: 9px; color: #cbd5e1; transition: background .2s ease, transform .2s ease; }
    .login-back:hover { transform: translateX(-2px); background: #24262e; }
    .login-back svg { width: 15px; height: 15px; }
    .login-eyebrow { color: #8b91a0; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; }
    .login-credentials h1 { margin: 2px 0 0; color: #fff; font-size: 17px; font-weight: 700; }
    .login-form { display: flex; flex-direction: column; align-items: stretch; gap: 12px; max-width: 320px; margin: 0 auto; border: 0; background: transparent; padding: 0; }
    .login-form label { display: grid; gap: 6px; color: #aab0bd; font-size: 11px; text-align: left; }
    .login-form label[hidden] { display: none; }
    .login-form input:not([type="hidden"]) { width: 100%; min-width: 0; border: 1px solid #41434d; border-radius: 7px; background: #191b22; padding: 11px 12px; color: #fff; font-size: 13px; outline: none; }
    .login-form input:focus { border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, .12); }
    .login-username-field[hidden] { display: none; }
    .login-pin-entry { display: grid; justify-items: center; gap: 20px; }
    .login-pin-dots { display: flex; justify-content: center; gap: 15px; }
    .login-pin-dots span { width: 16px; height: 16px; border: 2px solid #343640; border-radius: 50%; transition: background .15s ease, border-color .15s ease; }
    .login-pin-dots span.is-filled { border-color: #a78bfa; background: #a78bfa; }
    .login-pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 12px; width: min(100%, 320px); }
    .login-pin-pad button { display: grid; min-height: 64px; place-items: center; border: 1px solid #343640; border-radius: 14px; background: #202127; color: #f8fafc; cursor: pointer; font-size: 21px; font-weight: 700; transition: border-color .18s ease, background .18s ease, transform .18s ease; }
    .login-pin-pad button:hover { transform: translateY(-1px); border-color: #555866; background: #292b33; }
    .login-pin-pad button svg { width: 18px; height: 18px; }
    .login-pin-error { margin: -8px 0 0; color: #fda4af; font-size: 11px; }
    .login-credential-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .login-submit { display: inline-flex; min-width: 140px; height: 42px; align-items: center; justify-content: center; gap: 8px; border-radius: 9px; background: #6d5ce7; padding: 0 16px; color: white; font-size: 13px; font-weight: 700; transition: background .2s ease, transform .2s ease; }
    .login-submit:hover { transform: translateY(-1px); background: #7969f0; }
    .login-submit svg { width: 13px; height: 13px; }
    .login-footer { margin-top: 24px; color: #717581; font-size: 9px; }
    .login-setup-link { display: inline-block; margin-top: 12px; color: #777b88; font-size: 9px; text-decoration: none; }
    .login-setup-link:hover { color: #e9bd50; }
    @keyframes login-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

    .settings-panel { border: 1px solid #30323b; border-radius: 15px; background: #202127; }
    .settings-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid #353741; scrollbar-width: thin; }
    .settings-tab { position: relative; display: inline-flex; min-height: 42px; flex: none; align-items: center; gap: 8px; border: 0; background: transparent; padding: 0 12px; color: #aab0bd; font-size: 11px; transition: color .2s ease; }
    .settings-tab svg { width: 14px; height: 14px; }
    .settings-tab:hover, .settings-tab.is-active { color: #a78bfa; }
    .settings-tab.is-active::after { position: absolute; right: 8px; bottom: -1px; left: 8px; height: 2px; background: #8b5cf6; content: ''; animation: tab-glide .22s ease both; }
    @keyframes tab-glide { from { transform: scaleX(.35); opacity: .4; } to { transform: scaleX(1); opacity: 1; } }
    .settings-section-title { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; color: #f8fafc; font-size: 12px; font-weight: 800; text-transform: uppercase; }
    .settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px 12px; }
    .settings-field { display: grid; gap: 6px; color: #aab0bd; font-size: 10px; }
    .settings-field input, .settings-field textarea, .settings-field select { width: 100%; min-width: 0; border: 1px solid #383a44; border-radius: 8px; background: #292a32; padding: 10px 12px; color: #f8fafc; font-size: 11px; outline: none; transition: border .18s ease, box-shadow .18s ease; }
    .settings-field textarea { min-height: 74px; resize: vertical; }
    .settings-field input:focus, .settings-field textarea:focus, .settings-field select:focus { border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139, 92, 246, .12); }
    .settings-logo-row { display: flex; align-items: center; gap: 12px; }
    .settings-logo-preview { display: grid; width: 96px; height: 66px; place-items: center; overflow: hidden; border: 1px solid #393b44; border-radius: 9px; background: #191b22; color: #d9af45; font-family: 'Playfair Display', Georgia, serif; font-size: 18px; }
    .settings-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
    .settings-save-note { min-height: 14px; color: #7dd3a7; font-size: 10px; }
    .printer-row { border: 1px solid #30323b; border-radius: 15px; background: #202127; padding: 14px 16px; transition: border-color .2s ease, transform .2s ease; }
    .printer-row:hover { transform: translateY(-1px); border-color: #4a4c58; }
    .station-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; background: #292a32; padding: 7px 9px; color: #f8fafc; font-size: 10px; font-weight: 700; }
    .station-chip small { color: #8990a0; font-size: 8px; }
    .icon-action { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 8px; color: #aab0bd; transition: color .18s ease, background .18s ease, transform .18s ease; }
    .icon-action:hover { transform: translateY(-1px); background: #2b2d35; color: #fff; }
    .icon-action svg { width: 14px; height: 14px; }
    .icon-action.is-danger:hover { color: #fb7185; }
    @media (max-width: 620px) {
      .login-stage { padding-top: 34px; }
      .login-brand { margin-bottom: 30px; }
      .login-crest { width: 44px; height: 82px; font-size: 48px; }
      .login-crest-star { top: 35px; left: 24px; width: 8px; height: 8px; }
      .login-wordmark > div { font-size: clamp(36px, 11vw, 52px); }
      .login-wordmark span { margin-top: 7px; font-size: 7px; letter-spacing: 2.7px; }
      .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
      .role-card { grid-column: auto; min-height: 142px; border-radius: 13px; }
      .role-card:nth-child(4), .role-card:nth-child(5) { grid-column: auto; }
      .role-card:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
      .role-icon { width: 50px; height: 50px; margin-bottom: 4px; }
      .login-form { grid-template-columns: 1fr; }
      .login-submit { justify-content: center; }
      .settings-fields { grid-template-columns: 1fr; }
    }