:root {
color-scheme:dark;
--black:#0b0c0e;
--bg:#101318;
--panel:#17191d;
--card:#1d2025;
--panel2:#23272e;
--field:#111317;
--line:#2b2e34;
--text:#f4efe6;
--muted:#b7b0a5;
--gold:#d4a64a;
--gold-dark:#9c742d;
--gold-light:#f0c766;
--green:#5dba8a;
--red:#e56a64;
--radius:12px;
font-family:'Segoe UI',Arial,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
font-size:15px;
font-synthesis:none;
text-rendering:optimizeLegibility
}
* {
box-sizing:border-box
}
body {
margin:0;
background:var(--bg);
color:var(--text)
}
[hidden] {
display:none!important
}
button,input,select {
font:inherit
}
button,a,input,select {
touch-action:manipulation
}
button {
cursor:pointer;
border:1px solid var(--line);
color:var(--text);
background:var(--panel2);
border-radius:10px;
padding:12px 16px;
min-height:44px
}
button:hover {
border-color:var(--gold)
}
button:disabled {
opacity:.5;
cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {
outline:3px solid var(--gold);
outline-offset:3px
}
a {
color:var(--gold)
}
h1,h2,h3,p {
margin:0
}
h1 {
font-size:clamp(28px,3vw,39px);
font-weight:700;
letter-spacing:-1.1px;
line-height:1.2
}
h2 {
font-size:22px;
font-weight:700;
letter-spacing:-.4px
}
h3 {
font-size:16px;
font-weight:600
}
p {
line-height:1.6
}
small,.muted {
color:var(--muted)
}
.eyebrow {
font-size:11px;
letter-spacing:2px;
color:var(--gold);
font-weight:650;
margin-bottom:12px
}
.primary {
background:var(--gold);
color:var(--black);
border-color:var(--gold);
font-weight:650
}
.primary:hover {
background:var(--gold-light)
}
.full {
width:100%;
display:flex;
justify-content:space-between;
align-items:center
}
.text-button {
background:none;
border:0;
padding:8px 0;
color:var(--gold);
text-align:left
}
.icon-button {
background:none;
border:0;
padding:8px 10px;
font-size:13px
}
.pill {
display:inline-block;
border:1px solid #28543f;
background:#142c21;
color:var(--green);
border-radius:50px;
padding:5px 10px;
font-size:11px;
white-space:nowrap
}
.demo-pill {
background:#332916;
border-color:var(--gold-dark);
color:var(--gold)
}
.connection {
position:sticky;
top:0;
z-index:50;
background:#613b19;
color:#fff5d6;
padding:12px 20px;
text-align:center;
font-size:13px
}
.form-error {
color:var(--red);
font-size:13px;
min-height:20px;
margin:10px 0
}
.form-error:empty {
min-height:0;
margin:0
}
label {
display:grid;
gap:8px;
color:var(--text);
font-size:13px
}
input,select {
width:100%;
min-height:46px;
background:var(--field);
border:1px solid var(--line);
border-radius:9px;
color:var(--text);
padding:10px 12px;
min-width:0
}
input::placeholder {
color:#89847d
}
input[type=date] {
max-width:180px
}
label.checkbox {
display:flex;
align-items:center;
gap:9px
}
.checkbox input {
width:17px;
min-height:17px;
accent-color:var(--gold)
}
form {
display:grid;
gap:18px
}
.login-screen {
min-height:100dvh;
display:grid;
grid-template-columns:1.1fr 1fr
}
.login-art {
padding:8vh 8vw;
display:flex;
flex-direction:column;
justify-content:center;
background:radial-gradient(ellipse at 25% 15%,#302717 0, var(--black) 65%);
border-right:1px solid var(--line)
}
.login-art img {
width:210px;
height:210px;
object-fit:contain;
margin-bottom:35px
}
.login-art h1 {
font-family:inherit;
font-size:clamp(25px,2.8vw,40px);
line-height:1.4;
letter-spacing:-.5px;
margin:4px 0 22px
}
.login-art>p:not(.eyebrow) {
color:var(--muted)
}
.edition {
font-size:10px;
letter-spacing:2px;
color:var(--muted);
margin-top:70px
}
.login-panel {
display:grid;
place-items:center;
padding:45px 32px
}
.login-inner {
max-width:360px;
width:100%
}
.brand-small {
display:none;
font-family:inherit;
font-size:28px;
margin-bottom:35px
}
.brand-small span {
color:var(--gold)
}
.login-inner h2 {
font-size:29px;
margin:0 0 10px
}
.login-inner form {
margin-top:30px
}
.login-foot {
font-size:12px;
color:var(--muted);
margin-top:25px
}
.local-note {
font-size:11px;
color:var(--muted);
margin-top:12px
}
.demo-card {
background:var(--panel);
border:1px dashed var(--gold-dark);
padding:15px;
border-radius:10px;
margin-top:25px;
font-size:12px
}
.demo-card p {
margin-top:7px
}
.demo-card code {
color:var(--gold)
}
.app {
min-height:100dvh;
display:grid;
grid-template-columns:238px minmax(0,1fr)
}
.sidebar {
position:sticky;
top:0;
height:100dvh;
padding:28px 17px;
background:var(--black);
border-right:1px solid var(--line);
display:flex;
flex-direction:column
}
.brand {
display:flex;
align-items:center;
text-decoration:none;
gap:8px;
color:var(--text);
font-family:inherit;
font-size:14px;
white-space:nowrap
}
.brand img {
width:52px;
height:52px
}
.brand small {
display:block;
font-family:Segoe UI,Arial,sans-serif;
font-size:8px;
letter-spacing:1.7px;
margin-top:4px
}
.nav-label {
font-size:9px;
color:var(--muted);
letter-spacing:1.9px;
padding:0 16px;
margin:48px 0 14px
}
nav {
display:grid;
gap:7px
}
nav button {
background:none;
border-color:transparent;
text-align:left;
color:var(--muted);
display:flex;
align-items:center;
gap:14px;
padding:14px 17px
}
nav button span {
font-size:21px;
line-height:1
}
nav button.active {
color:var(--gold);
background:var(--panel);
border-color:var(--gold)
}
.sidebar-bottom {
margin-top:auto;
padding:20px 15px
}
.sidebar-bottom p {
font-family:inherit;
font-size:17px;
margin-top:20px
}
.sidebar-bottom small {
display:block;
margin-top:16px;
font-size:10px
}
.workspace {
min-width:0
}
.topbar {
height:83px;
padding:0 40px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
gap:12px
}
.desktop-label {
font-size:9px;
letter-spacing:2px;
color:var(--muted)
}
.topbar-right {
display:flex;
align-items:center;
gap:15px;
font-size:12px
}
.mobile-brand {
display:none
}
#content {
padding:35px 40px;
max-width:1440px;
margin:auto;
min-height:calc(100dvh - 140px)
}
.page-head {
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
margin-bottom:28px
}
.page-head p {
color:var(--muted);
font-size:13px;
margin-top:10px
}
.page-head .eyebrow {
margin:0 0 8px;
color:var(--gold);
font-size:10px
}
.head-actions {
display:flex;
align-items:center;
gap:9px
}
.card {
background:var(--card);
border:1px solid var(--line);
border-radius:var(--radius);
padding:22px;
min-width:0
}
.section-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:20px
}
.section-head small {
font-size:11px
}
.kpis {
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:16px;
margin-bottom:24px
}
.metric {
position:relative;
overflow:hidden;
min-height:170px
}
.metric p {
font-size:12px;
color:var(--muted)
}
.metric strong {
display:block;
font-size:clamp(26px,2.6vw,37px);
letter-spacing:-1px;
font-weight:700;
margin:18px 0 10px;
font-variant-numeric:tabular-nums
}
.metric small {
font-size:11px
}
.metric.featured {
background:var(--card);
color:var(--text);
border-color:var(--line);
border-top:3px solid var(--gold)
}
.metric.featured p,.metric.featured small {
color:var(--muted)
}
.metric-tag {
float:right;
font-size:18px
}
.dashboard-grid {
display:grid;
grid-template-columns:1.65fr 1fr;
gap:22px
}
.chart {
display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));
gap:12px;
margin-top:30px;
align-items:end
}
.chart-col {
text-align:center;
min-width:0
}
.chart-plot {
height:120px;
display:flex;
justify-content:center;
align-items:flex-end
}
.chart svg {
height:100%;
width:30px;
overflow:visible
}
.chart rect {
fill:var(--gold-dark)
}
.chart-col:last-child rect {
fill:var(--gold)
}
.chart small {
font-size:10px;
display:block;
margin-top:12px
}
.chart-value {
font-size:10px;
display:block;
margin-bottom:12px;
white-space:nowrap;
color:var(--text)
}
.chart-note {
font-size:11px;
color:var(--muted);
margin-top:22px
}
.row {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px 0;
border-bottom:1px solid var(--line);
min-width:0
}
.row:last-child {
border-bottom:0
}
.row strong {
font-size:13px;
font-weight:700
}
.row p,.row small {
font-size:11px;
color:var(--muted)
}
.row .amount {
white-space:nowrap;
font-variant-numeric:tabular-nums;
text-align:right
}
.row-button {
width:100%;
border-radius:0;
background:none;
border-width:0 0 1px;
min-height:74px;
text-align:left
}
.row-button:hover {
background:var(--panel2)
}
.avatar {
display:grid;
place-items:center;
background:#332916;
color:var(--gold);
width:38px;
height:38px;
flex-shrink:0;
border-radius:12px;
font-family:inherit
}
.identity {
display:flex;
align-items:center;
gap:12px;
min-width:0
}
.identity>div {
min-width:0
}
.identity strong {
display:block;
overflow-wrap:anywhere
}
.status {
font-size:10px;
border-radius:20px;
padding:4px 8px;
background:#332916;
color:var(--gold-light);
white-space:nowrap
}
.status.pago {
background:#142c21;
color:#83d5ac
}
.status.cancelado,.status.inativo {
background:#3a1b1d;
color:#ffc3bf
}
.recent {
margin-top:22px
}
.empty {
color:var(--muted);
font-size:13px;
text-align:center;
padding:28px 12px
}
.toolbar {
display:flex;
align-items:center;
gap:12px;
margin-bottom:18px
}
.toolbar input {
max-width:380px
}
.toolbar select {
max-width:180px
}
.count {
font-size:11px;
color:var(--muted);
margin-left:auto
}
.comanda-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:15px
}
.account-card {
text-align:left;
display:block;
padding:20px
}
.account-card .account-top {
display:flex;
justify-content:space-between;
gap:10px;
margin-bottom:22px
}
.account-card h3 {
overflow-wrap:anywhere
}
.account-card p {
font-size:11px;
color:var(--muted);
margin-top:6px
}
.account-card .account-total {
display:flex;
align-items:end;
justify-content:space-between;
margin-top:26px
}
.account-card .account-total strong {
font-size:23px;
font-weight:700
}
.account-card .account-total span {
color:var(--gold)
}
.notice {
border:1px solid #574529;
border-radius:12px;
background:#25201a;
padding:15px 18px;
color:var(--text);
font-size:12px;
line-height:1.7;
margin-bottom:22px
}
.team-grid {
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px
}
.team-card .identity {
margin-bottom:24px
}
.team-card .row {
padding:12px 0
}
.team-card .actions {
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:20px
}
.team-card .actions button {
font-size:12px;
padding:9px 12px
}
.team-card .role {
font-size:11px;
color:var(--gold);
margin-top:5px
}
.more-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:18px
}
.menu-tile {
width:100%;
text-align:left;
background:var(--panel);
padding:24px
}
.menu-tile h3 {
margin-bottom:9px
}
.menu-tile p {
font-size:12px;
color:var(--muted)
}
.menu-tile span {
float:right;
color:var(--gold)
}
.detail-summary {
background:var(--panel2);
padding:18px;
border-radius:12px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-bottom:15px
}
.detail-summary strong {
font-size:23px;
font-weight:700
}
.detail-summary small {
display:block
}
.detail-section {
margin-top:24px
}
.detail-section h3 {
margin-bottom:8px
}
.detail-section .row {
align-items:flex-start
}
.detail-section .row>div {
min-width:0;
overflow-wrap:anywhere
}
.money-list {
display:grid;
gap:12px;
margin:24px 0
}
.money-list>div {
display:flex;
justify-content:space-between;
gap:15px
}
.money-list .balance {
padding-top:15px;
border-top:1px solid var(--line);
color:var(--gold);
font-size:18px
}
.page-foot {
padding:15px 40px 25px;
display:flex;
justify-content:space-between;
gap:15px;
font-size:9px;
letter-spacing:1.3px;
color:var(--muted)
}
.page-foot span {
letter-spacing:0
}
dialog {
color:var(--text);
background:var(--panel);
border:1px solid var(--line);
border-radius:20px;
padding:26px;
width:calc(100% - 28px);
max-width:580px;
max-height:88dvh;
overflow-y:auto;
box-shadow:0 25px 90px #0008
}
dialog::backdrop {
background:#050609bb;
backdrop-filter:blur(5px)
}
.modal-head {
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
margin-bottom:22px
}
.modal-head h2 {
font-size:21px;
overflow-wrap:anywhere
}
.modal-actions {
display:flex;
justify-content:flex-end;
gap:10px;
margin-top:20px
}
.toast {
position:fixed;
z-index:100;
bottom:30px;
left:50%;
transform:translateX(-50%);
border:1px solid #28543f;
border-radius:12px;
padding:15px 22px;
background:#142c21;
color:#d7f4e4;
max-width:calc(100% - 32px);
box-shadow:0 5px 25px #0009;
font-size:13px
}
.activity-list {
padding:0;
list-style:none
}
.activity-list .row {
align-items:flex-start
}
.activity-list p {
overflow-wrap:anywhere
}
.loading {
display:flex;
gap:12px;
justify-content:center;
align-items:center;
min-height:250px;
color:var(--muted);
font-size:13px
}
.loading:before {
content:'';
width:17px;
height:17px;
border:2px solid var(--line);
border-top-color:var(--gold);
border-radius:50%;
animation:spin 1s linear infinite
}
@keyframes spin {
to {
transform:rotate(360deg)
}
}
@media(min-width:1600px) {
#content {
padding-top:50px
}
.topbar {
padding-right:65px
}
.kpis {
gap:22px
}
.metric {
min-height:190px
}
}
@media(max-width:1150px) {
.app {
grid-template-columns:200px minmax(0,1fr)
}
.sidebar {
padding:24px 10px
}
.brand {
font-size:12px
}
.brand img {
width:42px;
height:42px
}
.brand small {
font-size:7px
}
.topbar {
padding:0 25px
}
#content {
padding:28px 25px
}
.comanda-grid,.team-grid {
grid-template-columns:repeat(2,minmax(0,1fr))
}
.page-foot {
padding:18px 25px
}
.kpis {
gap:12px
}
.card {
padding:18px
}
.chart {
gap:6px
}
}
@media(max-width:760px) {
.login-screen {
display:block
}
.login-art {
display:none
}
.login-panel {
padding:40px 27px;
min-height:100dvh
}
.brand-small {
display:block
}
.app {
display:block
}
.sidebar {
position:fixed;
top:auto;
bottom:0;
left:0;
right:0;
height:auto;
z-index:40;
padding:8px 12px max(9px,env(safe-area-inset-bottom));
border-right:0;
border-top:1px solid var(--line);
background:#0b0c0ef7;
backdrop-filter:blur(18px)
}
.sidebar>.brand,.nav-label,.sidebar-bottom {
display:none
}
nav {
display:grid;
grid-template-columns:repeat(4,1fr);
gap:4px
}
nav button {
flex-direction:column;
gap:5px;
justify-content:center;
padding:7px 3px;
font-size:10px;
min-height:55px
}
nav button span {
font-size:20px
}
.topbar {
height:68px;
padding:0 20px
}
.mobile-brand {
display:block;
font-family:inherit;
font-size:13px
}
.mobile-brand b {
color:var(--gold)
}
.desktop-label,#owner-name {
display:none
}
.topbar-right {
gap:5px
}
.topbar .pill {
font-size:9px;
padding:4px 8px
}
.topbar .icon-button {
font-size:11px
}
#content {
padding:28px 20px 14px;
min-height:calc(100dvh - 220px)
}
.page-head {
align-items:flex-start;
flex-direction:column;
margin-bottom:23px;
gap:17px
}
.page-head h1 {
font-size:31px
}
.page-head p {
font-size:12px;
margin-top:8px
}
.head-actions {
width:100%;
justify-content:space-between
}
.head-actions input {
max-width:180px;
min-height:40px;
font-size:12px
}
.head-actions button {
min-height:40px;
padding:8px 12px;
font-size:12px
}
.kpis {
grid-template-columns:1fr 1fr;
gap:12px;
margin-bottom:17px
}
.metric.featured {
grid-column:1/-1;
min-height:166px;
padding:24px
}
.metric {
min-height:143px;
padding:18px
}
.metric strong {
font-size:28px;
margin:15px 0 9px
}
.metric.featured strong {
font-size:42px
}
.metric small {
font-size:10px
}
.metric p {
font-size:11px
}
.dashboard-grid {
grid-template-columns:1fr;
gap:17px
}
.chart {
gap:6px
}
.chart svg {
width:29px
}
.chart-plot {
height:106px
}
.chart-value {
font-size:9px
}
.chart small {
font-size:9px
}
.chart-note {
font-size:10px
}
.section-head h2 {
font-size:18px
}
.section-head .text-button {
font-size:12px
}
.card {
border-radius:15px
}
.recent {
margin-top:17px
}
.page-foot {
padding:20px 20px 105px;
display:block;
font-size:8px
}
.page-foot span {
display:block;
margin-top:7px
}
.comanda-grid,.team-grid,.more-grid {
grid-template-columns:1fr
}
.toolbar {
flex-wrap:wrap;
gap:10px
}
.toolbar input {
max-width:none;
flex:1 1 100%
}
.toolbar select {
max-width:none;
flex:1
}
.toolbar .count {
flex:1;
text-align:right
}
.account-card {
padding:20px
}
.account-card .account-top {
margin-bottom:16px
}
.account-card .account-total {
margin-top:18px
}
.toast {
bottom:100px;
width:max-content;
max-width:calc(100% - 30px)
}
dialog {
padding:20px;
max-height:85dvh
}
.more-grid .card {
padding:22px
}
.notice {
font-size:11px
}
.row {
gap:9px
}
.row .amount strong {
font-size:12px
}
}
@media(prefers-reduced-motion:reduce) {
* {
animation:none!important;
scroll-behavior:auto!important
}
}
/* Identidade do caixa: donlounge/gui/tema.py e atendimento móvel. */
html {
background:var(--bg);
-webkit-text-size-adjust:100%
}
body {
min-width:320px;
line-height:1.45
}
button {
min-height:48px;
font-weight:600
}
input,select {
font-size:16px;
min-height:48px
}
h1,h2,h3 {
letter-spacing:-.025em
}
h1 {
font-weight:750
}
h2 {
font-size:21px
}
a {
color:var(--gold-light)
}
.primary:active {
background:var(--gold-dark)
}
.icon {
width:22px;
height:22px;
flex-shrink:0;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}
.skip-link {
position:fixed;
left:16px;
top:12px;
z-index:100;
padding:12px 18px;
background:var(--gold);
color:var(--black);
transform:translateY(-180%);
border-radius:8px
}
.skip-link:focus {
transform:translateY(0)
}
.app {
grid-template-columns:232px minmax(0,1fr);
grid-template-rows:84px 1fr;
grid-template-areas:'header header' 'sidebar workspace'
}
.topbar {
grid-area:header;
position:sticky;
top:0;
z-index:40;
height:84px;
padding:12px 28px;
background:var(--black)
}
.brand {
border:0;
background:none;
padding:0;
text-align:left;
gap:14px;
min-width:0;
font-size:21px;
font-weight:800;
letter-spacing:.025em;
color:var(--gold-light)
}
.brand img {
width:50px;
height:50px;
object-fit:contain;
flex-shrink:0
}
.brand small {
color:var(--muted);
font-size:10px;
font-weight:500;
letter-spacing:.09em;
white-space:normal
}
.brand:hover {
background:none
}
.brand-copy {
min-width:0
}
.brand .brand-context-short {
display:none
}
.topbar-right {
flex-shrink:0
}
#owner-name {
max-width:220px;
overflow-wrap:anywhere;
color:var(--muted)
}
.sidebar {
grid-area:sidebar;
top:84px;
height:calc(100dvh - 84px);
padding:24px 10px 16px
}
.nav-label {
margin:0 0 12px;
padding:0 13px;
font-size:11px;
font-weight:700;
letter-spacing:.08em
}
nav {
gap:4px
}
nav button {
border:0;
border-left:3px solid transparent;
border-radius:0;
padding:13px 16px;
font-weight:500;
min-height:50px
}
nav button.active {
border-color:var(--gold);
color:var(--gold-light);
font-weight:700
}
nav button:hover {
background:var(--panel)
}
.sidebar-bottom {
padding:20px 13px
}
.sidebar-bottom p {
font-size:13px;
font-weight:600;
color:var(--text);
line-height:1.6
}
.sidebar-bottom small {
line-height:1.6
}
.workspace {
grid-area:workspace
}
#store-status {
margin:22px 28px 0
}
#content {
padding:26px 28px 34px;
min-height:calc(100dvh - 250px)
}
.page-head {
margin-bottom:24px
}
.page-head .eyebrow {
letter-spacing:.1em
}
.card {
box-shadow:none
}
.metric {
min-height:152px;
border-top:3px solid var(--line)
}
.metric strong,.account-total strong {
color:var(--gold-light);
font-weight:750
}
.metric strong {
font-size:clamp(25px,2.6vw,36px)
}
.metric-tag {
color:var(--gold)
}
.section-head h2 {
color:var(--gold-light);
font-size:19px
}
.account-card {
border-top:3px solid var(--gold)
}
.avatar {
border-radius:10px;
font-weight:750;
background:var(--panel2)
}
.row strong {
font-size:14px
}
.row p,.row small {
font-size:12px
}
.status {
font-weight:600
}
.menu-tile {
background:var(--card)
}
.menu-tile h3 {
color:var(--gold-light)
}
.card-body>*+* {
margin-top:15px
}
#pair-code:empty {
display:none
}
#pair-code h2 {
font-variant-numeric:tabular-nums;
letter-spacing:.1em;
color:var(--gold-light)
}
.detail-summary strong {
color:var(--gold-light)
}
.page-foot {
padding:0 28px 24px;
letter-spacing:.08em
}
#setup-screen {
min-height:100dvh;
background:var(--bg)
}
#setup-screen .login-inner {
max-width:440px
}
.setup-brand {
display:flex;
align-items:center;
gap:14px;
margin-bottom:32px
}
.setup-brand img {
width:64px;
height:64px
}
.setup-brand strong {
font-size:21px;
color:var(--gold-light)
}
.setup-brand small {
display:block;
margin-top:4px;
font-size:11px;
letter-spacing:.1em
}
.login-art {
padding:8vh clamp(32px,6vw,100px)
}
.login-art img {
width:176px;
height:176px;
margin-bottom:30px
}
.login-art p.brand-title {
color:var(--gold-light);
font-size:30px;
letter-spacing:.025em;
font-weight:800
}
.login-art .brand-subtitle {
color:var(--muted);
font-size:11px;
letter-spacing:.1em;
margin-top:6px
}
.login-art h1 {
font-size:clamp(28px,3vw,42px);
font-weight:750;
line-height:1.22;
margin:46px 0 18px
}
.login-panel {
background:var(--bg)
}
.login-inner {
max-width:390px
}
.login-inner h2 {
font-weight:750
}
.brand-small {
align-items:center;
gap:14px;
font-size:23px;
font-weight:800;
color:var(--gold-light)
}
.brand-small img {
width:70px;
height:70px;
object-fit:contain;
flex-shrink:0
}
.brand-small small {
display:block;
color:var(--muted);
font-size:10px;
font-weight:500;
letter-spacing:.08em;
margin-top:5px
}
.login-foot {
border-top:1px solid var(--line);
padding-top:20px
}
.chart rect {
fill:var(--gold-dark)
}
@media(min-width:1600px) {
.topbar {
padding-right:40px
}
#content {
padding-top:32px
}
}
@media(max-width:1150px) and (min-width:761px) {
.app {
grid-template-columns:200px minmax(0,1fr)
}
.brand {
font-size:19px
}
.brand small {
font-size:9px
}
.topbar {
padding:12px 22px
}
.topbar-right {
gap:8px
}
#store-status {
margin:20px 24px 0
}
#content {
padding:26px 24px
}
}
@media(max-width:760px) {
.app {
display:block
}
.topbar {
height:auto;
min-height:76px;
padding:calc(10px + env(safe-area-inset-top)) 16px 10px
}
.brand {
gap:9px;
font-size:15px;
letter-spacing:.015em
}
.brand img {
width:40px;
height:40px
}
.brand small {
font-size:9px;
letter-spacing:.07em;
margin-top:3px
}
.brand .brand-context-long {
display:none
}
.brand .brand-context-short {
display:block
}
.topbar-right {
gap:2px
}
.topbar .icon-button {
font-size:12px;
padding:8px;
min-width:44px
}
.topbar .demo-pill {
max-width:56px;
overflow:hidden;
text-overflow:ellipsis;
font-size:9px
}
.sidebar {
top:auto;
height:auto;
padding:7px 10px max(8px,env(safe-area-inset-bottom))
}
nav button {
border-left:0;
border-top:2px solid transparent;
border-radius:8px;
padding:9px 2px;
font-size:11px;
gap:4px;
min-height:57px
}
nav button.active {
border-top-color:var(--gold);
background:var(--panel)
}
nav .icon {
width:21px;
height:21px
}
#store-status {
margin:16px 16px 0;
padding:12px 14px;
font-size:12px
}
#content {
padding:24px 16px;
min-height:calc(100dvh - 260px)
}
.page-head h1 {
font-size:29px
}
.page-head p {
font-size:13px
}
.page-head .eyebrow {
font-size:10px
}
.head-actions {
flex-wrap:wrap;
gap:10px
}
.head-actions input {
max-width:190px
}
.head-actions input,.head-actions button {
min-height:44px
}
.head-actions input {
font-size:16px
}
.card {
border-radius:14px
}
.metric {
min-height:143px
}
.metric.featured {
min-height:160px;
padding:22px
}
.metric.featured strong {
font-size:38px
}
.metric strong {
font-size:27px
}
.metric small {
font-size:11px
}
.section-head {
gap:10px
}
.section-head h2 {
font-size:19px
}
.chart-value {
font-size:10px
}
.row .amount strong {
font-size:13px
}
.account-card {
padding:20px
}
.card-body p {
font-size:14px
}
.page-foot {
padding:4px 16px 110px;
font-size:9px
}
.login-panel {
padding:36px 22px;
min-height:100dvh
}
.brand-small {
display:flex;
margin-bottom:38px
}
.login-inner h2 {
font-size:29px
}
#setup-screen .setup-brand {
margin-bottom:30px
}
}
@media(max-width:360px) {
.brand {
font-size:13px
}
.brand img {
width:34px;
height:34px
}
.topbar {
padding-left:12px;
padding-right:10px
}
.metric strong {
font-size:24px
}
.metric.featured strong {
font-size:34px
}
.chart {
gap:4px
}
.chart-value {
font-size:9px
}
}