:root { --bg: #F3F5F9; --ink: #1C1C1E; --ink-2: #5C6270; --ink-3: #3A3F4B; --blue: #0A5FD6; --blue-2: #2F7BF0; --accent-rgb: 10,95,214; --green: #157A41; --green-dot: #30B566; --amber: #9A5206; --red: #B3261E; --bill: var(--blue); --title: var(--ink); --label: var(--ink-2); --price: var(--ink); --c0: #FFFFFF; --hi: rgba(255,255,255,.92); --hi-2: rgba(255,255,255,.85); --ring: inset 0 0 0 1px rgba(255,255,255,.7); --ring-soft: rgba(255,255,255,.6); --c1: #FCFDFE; --c2: #EBEEF4; --c3: #F6F8FB; --c4: #FEFEFF; --c5: #E8ECF3; --raised: linear-gradient(145deg, var(--c1), var(--c2)); --raised-hi: linear-gradient(145deg, var(--c0), var(--c3)); --raised-btn: linear-gradient(145deg, var(--c4), var(--c5)); --pressed: #E7EAF1; --track: #E1E5EE; --skel: #EFF2F7; --blue-grad: linear-gradient(145deg, var(--blue-2), var(--blue)); --shadow-rgb: 150,165,190; --glass-rgb: 248,250,253; --page-desk: #E6EAF2; --glow-1: var(--hi); --glow-2: rgba(150,190,255,.40); --glow-3: rgba(255,190,160,.32); --chart-a: #0A5FD6; --chart-b: #B02A8F; --fs: 1.14; --sh-lg: 8px 8px 18px rgba(var(--shadow-rgb),.45), -8px -8px 18px var(--hi); --sh: 7px 7px 15px rgba(var(--shadow-rgb),.5), -7px -7px 15px var(--hi); --sh-md: 5px 5px 11px rgba(var(--shadow-rgb),.5), -5px -5px 11px var(--hi); --sh-sm: 4px 4px 9px rgba(var(--shadow-rgb),.5), -4px -4px 9px var(--hi); --sh-in: inset 5px 5px 10px rgba(var(--shadow-rgb),.5), inset -5px -5px 10px var(--hi-2); --sh-in-md: inset 4px 4px 8px rgba(var(--shadow-rgb),.5), inset -4px -4px 8px var(--hi-2); --sh-in-sm: inset 3px 3px 6px rgba(var(--shadow-rgb),.5), inset -3px -3px 6px var(--hi-2); --glow-a: .32; --sh-blue: 10px 10px 20px rgba(var(--accent-rgb), var(--glow-a)); --sh-seg: 3px 3px 8px rgba(var(--shadow-rgb),.45), -2px -2px 6px var(--hi-2); --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', system-ui, sans-serif; --tabbar-h: 88px; --gutter: 24px; --sidebar-w: 240px; } html[data-fs="small"] { --fs: .92; } html[data-fs="normal"] { --fs: 1; } html[data-fs="large"] { --fs: 1.14; } html[data-fs="xl"] { --fs: 1.28; } @media (max-width: 640px) { html[data-fs="small"] { --fs: .84; } html[data-fs="normal"] { --fs: .88; } html[data-fs="large"] { --fs: .95; } html[data-fs="xl"] { --fs: 1.08; } .rv-title, .rv-title.sm { font-size: calc(28px * min(var(--fs), 1.05)); } .rv-btn { min-height: 48px; } .rv-btn.sm { min-height: 42px; } .rv-tile .name { font-size: calc(18px * var(--fs)); } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { background: var(--bg); } body { margin: 0; font-family: var(--font); color: var(--ink); font-size: calc(16px * var(--fs)); line-height: 1.35; -webkit-font-smoothing: antialiased; text-size-adjust: 100%; } button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; } button { cursor: pointer; } :focus-visible { outline: 3px solid rgba(var(--accent-rgb),.55); outline-offset: 2px; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rv-screen { position: relative; min-height: 100vh; min-height: 100dvh; width: 100%; max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; padding-bottom: calc(var(--tabbar-h) + 24px + env(safe-area-inset-bottom)); background: radial-gradient(280px 240px at 8% 2%, var(--glow-1), transparent 70%), radial-gradient(300px 260px at 105% 20%, var(--glow-2), transparent 70%), radial-gradient(300px 260px at -10% 75%, var(--glow-3), transparent 70%), var(--bg); } .rv-screen.no-tabs { padding-bottom: 32px; } @media (min-width: 481px) and (max-width: 899px) { body { background: var(--page-desk); } .rv-screen { box-shadow: 0 0 60px rgba(90,105,135,.25); } } .rv-head { padding: 30px var(--gutter) 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; } .rv-eyebrow { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--label); } .rv-title { margin: 2px 0 0; overflow-wrap: anywhere; font-size: calc(36px * min(var(--fs), 1.12)); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--title); } .rv-title.sm { font-size: calc(34px * min(var(--fs), 1.12)); } .rv-section { margin: 20px var(--gutter) 0; } .rv-section > h2 { margin: 0 0 10px 4px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .06em; } .rv-muted { color: var(--ink-2); font-weight: 500; } .rv-stack { display: flex; flex-direction: column; gap: 14px; } .rv-card { border-radius: 26px; background: var(--raised); box-shadow: var(--sh-lg); padding: 16px; } .rv-card.pressed { background: var(--pressed); box-shadow: var(--sh-in); } .rv-card h3 { margin: 0; font-size: calc(17px * var(--fs)); font-weight: 700; letter-spacing: -.02em; } .rv-stats { display: flex; padding: 14px 8px; } .rv-stat { flex: 1; text-align: center; } .rv-stat b { display: block; font-size: calc(24px * var(--fs)); font-weight: 800; letter-spacing: -.02em; } .rv-stat span { display: block; margin-top: 1px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rv-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .rv-tile { height: 92px; padding: 12px; border: 0; border-radius: 24px; text-align: left; display: flex; flex-direction: column; justify-content: space-between; background: var(--pressed); box-shadow: var(--sh-in); } .rv-tile.free { background: var(--raised); box-shadow: var(--sh); } .rv-tile:active { background: var(--pressed); box-shadow: var(--sh-in); } .rv-tile .name { font-size: calc(20px * var(--fs)); font-weight: 800; letter-spacing: -.02em; } .rv-tile .state { display: block; font-size: calc(12px * var(--fs)); font-weight: 800; } .rv-tile .meta { display: block; margin-top: 1px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .is-free { color: var(--green); } .is-ordered { color: var(--amber); } .is-bill { color: var(--bill); } .is-late { color: var(--red); } .rv-btn { min-height: 52px; padding: 0 24px; border: 0; border-radius: 26px; font-size: calc(16px * var(--fs)); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; background: var(--blue-grad); color: #fff; box-shadow: var(--sh-blue); } .rv-btn:active { transform: translateY(1px); filter: brightness(.96); } .rv-btn.block { width: 100%; } .rv-btn.soft { background: var(--raised-btn); color: var(--link, var(--blue)); box-shadow: var(--sh-sm); } .rv-btn.soft:active { background: var(--pressed); box-shadow: var(--sh-in-md); transform: none; } .rv-btn.danger { color: var(--red); } .rv-btn.sm { min-height: 48px; padding: 0 20px; font-size: calc(15px * var(--fs)); } .rv-btn[disabled] { opacity: .5; pointer-events: none; } .rv-icon-btn { width: 48px; height: 48px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--raised-btn); color: var(--link, var(--blue)); box-shadow: var(--sh-sm); } .rv-avatar { width: 46px; height: 46px; border-radius: 50%; border: 0; font-weight: 800; font-size: calc(15px * var(--fs)); color: var(--link, var(--blue)); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; background: var(--raised); box-shadow: 6px 6px 14px rgba(var(--shadow-rgb),.5), -6px -6px 14px var(--hi); } .rv-fab { position: fixed; right: max(var(--gutter), calc(50% - 240px + var(--gutter))); bottom: calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border: 0; border-radius: 50%; color: #fff; background: var(--blue-grad); display: flex; align-items: center; justify-content: center; box-shadow: 8px 8px 18px rgba(var(--accent-rgb), calc(var(--glow-a) + .03)), -4px -4px 12px rgba(255,255,255,.8); } .rv-pill { height: 30px; padding: 0 12px; border-radius: 15px; display: inline-flex; align-items: center; gap: 7px; background: var(--pressed); box-shadow: var(--sh-in-sm); font-size: calc(12px * var(--fs)); font-weight: 800; } .rv-pill.raised { background: var(--raised); box-shadow: var(--sh-sm); height: 32px; font-size: calc(13px * var(--fs)); } .rv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); } .rv-chips { display: flex; gap: 10px; overflow-x: auto; padding: 4px var(--gutter) 10px; margin: 0 calc(var(--gutter) * -1); scrollbar-width: none; } .rv-chips::-webkit-scrollbar { display: none; } .rv-chip { flex: none; min-height: 44px; padding: 0 18px; border: 0; border-radius: 22px; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink-3); background: var(--raised); box-shadow: var(--sh-md); } .rv-chip[aria-pressed="true"] { background: var(--pressed); color: var(--link, var(--blue)); box-shadow: var(--sh-in-md); } .rv-seg { display: flex; padding: 4px; border-radius: 26px; background: var(--track); box-shadow: inset 4px 4px 9px rgba(var(--shadow-rgb),.5), inset -4px -4px 9px var(--hi-2); } .rv-seg button { flex: 1; min-height: 44px; border: 0; border-radius: 22px; background: transparent; color: var(--ink-2); font-size: calc(14px * var(--fs)); font-weight: 600; } .rv-seg button[aria-selected="true"] { background: var(--raised-hi); color: var(--ink); font-weight: 700; box-shadow: var(--sh-seg); } .rv-field { display: block; } .rv-field > span { display: block; margin: 0 0 6px 6px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); } .rv-input { width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: 26px; background: var(--pressed); box-shadow: var(--sh-in-md); font-size: calc(16px * var(--fs)); font-weight: 600; outline-offset: 2px; } .rv-input::placeholder { color: #8A90A0; font-weight: 500; } .rv-check { display: flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 600; color: var(--ink-3); } .rv-check input { appearance: none; flex: none; width: 28px; height: 28px; margin: 0; border-radius: 9px; background: var(--pressed); box-shadow: var(--sh-in-sm); display: grid; place-content: center; } .rv-check input::after { content: ''; width: 14px; height: 8px; border-left: 3px solid #fff; border-bottom: 3px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .12s; } .rv-check input:checked { background: var(--blue-grad); box-shadow: none; } .rv-check input:checked::after { transform: rotate(-45deg) scale(1); } .rv-form-error { min-height: 20px; margin: 0; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--red); text-align: center; } .rv-diet { width: 16px; height: 16px; border-radius: 4px; background: #fff; border: 2px solid var(--green); display: inline-flex; align-items: center; justify-content: center; } .rv-diet::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); } .rv-diet.non { border-color: var(--red); } .rv-diet.non::after { background: var(--red); } .rv-stepper { display: inline-flex; align-items: center; border-radius: 24px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .rv-stepper button { width: 48px; height: 48px; border: 0; background: transparent; color: var(--link, var(--blue)); display: inline-flex; align-items: center; justify-content: center; } .rv-stepper b { min-width: 14px; text-align: center; font-weight: 800; font-size: calc(16px * var(--fs)); } .rv-tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 480px; z-index: 20; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding: 8px 10px calc(22px + env(safe-area-inset-bottom)); display: flex; background: rgba(var(--glass-rgb),.62); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-top: .5px solid var(--hi-2); box-shadow: 0 -1px 0 rgba(120,130,150,.15); } .rv-tabbar a, .rv-tabbar button { flex: 1; min-width: 48px; border: 0; background: transparent; color: var(--ink-2); text-decoration: none; font-size: calc(10.5px * var(--fs)); font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; } .rv-tabbar [aria-current="page"] { color: var(--link, var(--blue)); font-weight: 700; } .rv-sidebar { display: none; } .rv-order-layout { display: block; } .rv-order-left { display: block; } .rv-order-right { display: none; } .rv-glass { background: rgba(var(--glass-rgb),.62); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); } .rv-icon { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .rv-scrim { position: fixed; inset: 0; z-index: 40; background: rgba(28,32,44,.32); opacity: 0; pointer-events: none; transition: opacity .2s; } .rv-scrim.open { opacity: 1; pointer-events: auto; } .rv-sheet { position: fixed; left: 50%; bottom: 0; z-index: 41; width: 100%; max-width: 480px; max-height: 86dvh; overflow: auto; transform: translate(-50%, 105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); padding: 12px var(--gutter) calc(24px + env(safe-area-inset-bottom)); border-radius: 32px 32px 0 0; background: rgba(var(--glass-rgb),.9); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 -12px 40px rgba(60,75,105,.25); } .rv-sheet.open { transform: translate(-50%, 0); } .rv-sheet::before { content: ''; display: block; width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: #B9C0CF; } .rv-sheet h2 { margin: 0 0 12px; font-size: calc(22px * var(--fs)); font-weight: 800; letter-spacing: -.02em; } .rv-toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + 16px); z-index: 60; max-width: calc(100% - 48px); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .22s; padding: 14px 20px; border-radius: 24px; font-weight: 700; font-size: calc(15px * var(--fs)); background: rgba(28,32,44,.92); color: #fff; display: flex; align-items: center; gap: 14px; } .rv-toast.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; } .rv-toast button { border: 0; background: transparent; color: #8DB8FF; font-weight: 800; min-height: 32px; } .rv-toast.error { background: color-mix(in srgb, var(--red) 95%, transparent); } .rv-banner { position: sticky; top: 0; z-index: 30; display: none; padding: 10px var(--gutter); text-align: center; font-size: calc(13px * var(--fs)); font-weight: 800; color: #fff; background: var(--amber); } .rv-banner.show { display: block; } .rv-skeleton { border-radius: 24px; background: linear-gradient(90deg, var(--track) 25%, var(--skel) 50%, var(--track) 75%); background-size: 200% 100%; animation: rv-shimmer 1.4s infinite; } @keyframes rv-shimmer { to { background-position: -200% 0; } } .rv-progress { display: flex; gap: 8px; height: 12px; align-items: center; } .rv-progress i { flex: 1; height: 8px; border-radius: 4px; background: var(--pressed); box-shadow: var(--sh-in-sm); transition: flex .2s; } .rv-progress i.on { flex: 2.4; background: var(--blue-grad); box-shadow: none; } .rv-progress i.done { background: var(--green-dot); box-shadow: none; } .rv-pin-dots { display: flex; justify-content: center; gap: 18px; margin: 8px 0 20px; } .rv-pin-dots i { width: 16px; height: 16px; border-radius: 50%; background: var(--pressed); box-shadow: var(--sh-in-sm); } .rv-pin-dots i.on { background: var(--blue-grad); box-shadow: none; } .rv-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 300px; margin: 0 auto; } .rv-pad button { height: 64px; border: 0; border-radius: 32px; font-size: calc(26px * var(--fs)); font-weight: 700; background: var(--raised); box-shadow: var(--sh-md); display: flex; align-items: center; justify-content: center; } .rv-pad button:active { background: var(--pressed); box-shadow: var(--sh-in-md); } .rv-pad .quiet { background: transparent; box-shadow: none; font-size: calc(15px * var(--fs)); color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } .rv-seg.scroll { overflow-x: auto; scrollbar-width: none; } .rv-seg.scroll::-webkit-scrollbar { display: none; } .rv-seg.scroll button { flex: 1 0 auto; padding: 0 16px; white-space: nowrap; } .rv-search { position: relative; } .rv-search > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--ink-2); pointer-events: none; } .rv-search .rv-input { padding-left: 48px; } .rv-item { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 26px; background: var(--raised); box-shadow: var(--sh-md); } .rv-item.soldout { opacity: .55; } .rv-thumb { position: relative; flex: none; width: 76px; height: 76px; border-radius: 20px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .rv-thumb .rv-diet { position: absolute; top: 7px; left: 7px; } .rv-item .body { flex: 1; min-width: 0; } .rv-item .nm { font-size: calc(17px * var(--fs)); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; } .rv-item .ds { margin-top: 2px; font-size: calc(12px * var(--fs)); font-weight: 500; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-item .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .rv-item .pr { font-size: calc(17px * var(--fs)); font-weight: 800; letter-spacing: -.02em; } .rv-cartbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; z-index: 20; width: 100%; max-width: 480px; padding: 12px var(--gutter) calc(14px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 14px; background: rgba(var(--glass-rgb),.72); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); border-top: .5px solid var(--hi-2); box-shadow: 0 -1px 0 rgba(120,130,150,.15); } .rv-cartbar .sum { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; text-align: left; padding: 0; } .rv-cartbar .sum .c { display: block; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rv-cartbar .sum .t { display: block; font-size: calc(24px * var(--fs)); font-weight: 800; letter-spacing: -.02em; } .rv-cartbar .rv-btn { flex: 0 0 auto; } .rv-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(var(--shadow-rgb),.25); } .rv-line:last-child { border-bottom: 0; } .rv-line .nm { flex: 1; min-width: 0; font-weight: 700; } .rv-line .sub { font-size: calc(12px * var(--fs)); color: var(--ink-2); font-weight: 600; } .rv-line .lt { min-width: 52px; text-align: right; font-weight: 800; } .rv-linkbtn { border: 0; background: transparent; padding: 4px 0; min-height: 32px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); } .rv-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .05em; color: #fff; background: var(--amber); vertical-align: middle; } .rv-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px 16px; border-radius: 22px; color: inherit; text-decoration: none; background: var(--raised); box-shadow: var(--sh-md); } .rv-row .l { flex: 1; min-width: 0; } .rv-row .l b { font-size: calc(17px * var(--fs)); letter-spacing: -.02em; } .rv-row .r { text-align: right; } .rv-row .r b { display: block; font-weight: 800; } .rv-ticket { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 28px; background: var(--raised); box-shadow: var(--sh-lg); } .rv-ticket .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; } .rv-ticket .tbl { font-size: calc(28px * var(--fs)); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--title); } .rv-ticket .meta { margin-top: 1px; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rv-timer { height: 40px; padding: 0 16px; border-radius: 20px; display: flex; align-items: center; background: var(--pressed); box-shadow: var(--sh-in-sm); font-size: calc(18px * var(--fs)); font-weight: 800; font-variant-numeric: tabular-nums; } .rv-ticket .li { display: flex; gap: 10px; font-size: calc(17px * var(--fs)); font-weight: 600; line-height: 1.25; } .rv-ticket .li .q { flex: none; width: 34px; color: var(--link, var(--blue)); font-weight: 800; } .rv-ticket .li .n { display: block; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rv-ticket .note { padding: 10px 14px; border-radius: 18px; background: var(--pressed); box-shadow: var(--sh-in-sm); font-size: calc(15px * var(--fs)); font-weight: 600; } .rv-ticket.is-extra-ticket { outline: 2px solid color-mix(in srgb, var(--amber) 45%, transparent); outline-offset: -2px; } .rv-empty { text-align: center; padding: 36px 16px; color: var(--ink-2); font-weight: 600; } .rv-screen.has-cartbar { padding-bottom: 150px; } .rv-btn.danger-solid { background: linear-gradient(145deg, color-mix(in srgb, var(--red) 82%, #fff), var(--red)); box-shadow: 0 10px 20px color-mix(in srgb, var(--red) 30%, transparent); } .rv-confirm { max-width: 420px; border-radius: 32px; bottom: 16px; } .rv-tile.ordered { background: var(--tile-ordered, var(--pressed)); } .rv-tile.bill { background: var(--tile-bill, var(--pressed)); } .rv-tile.late { background: var(--tile-late, var(--pressed)); } html[data-theme="aurora"] { --bg: #F4F4FB; --ink: #1F2756; --ink-2: #4C5799; --ink-3: #2E3878; --title: #2A2F9E; --label: #5446CC; --price: #3A4FD6; --blue: #3A54E0; --blue-2: #7A5CFF; --accent-rgb: 58,84,224; --bill: #4437D6; --green: #0A6B43; --green-dot: #2FB36A; --amber: #8A4E00; --red: #BD1B43; --c0: #FFFFFF; --c1: #FBFBFE; --c2: #ECEDF8; --c3: #F5F5FC; --c4: #FDFDFF; --c5: #E9EAF6; --pressed: #E9EAF6; --track: #E3E4F2; --skel: #EFF0F9; --shadow-rgb: 130,128,175; --glow-a: .16; --glass-rgb: 247,247,252; --page-desk: #E4E5F2; --hi: rgba(255,255,255,.92); --hi-2: rgba(255,255,255,.85); --glow-1: rgba(245,246,255,.7); --glow-2: rgba(176,150,255,.2); --glow-3: rgba(130,200,255,.16); --tile-ordered: #F6E4C8; --tile-bill: #D8D8FA; --tile-late: #F8D5DE; --chart-a: #3A54E0; --chart-b: #B02A8F; } html[data-theme="saffron"] { --bg: #FBF7F3; --ink: #3D2218; --ink-2: #7A4A33; --ink-3: #55301F; --title: #A33A12; --label: #A8481C; --price: #B3262F; --blue: #C42150; --blue-2: #EA6A0E; --accent-rgb: 196,33,80; --bill: #2B54C8; --green: #146B3A; --green-dot: #2FB36A; --amber: #82490A; --red: #B5183A; --c0: #FFFFFF; --c1: #FFFDFB; --c2: #F4EBE3; --c3: #FAF4EE; --c4: #FFFEFC; --c5: #F1E7DE; --pressed: #F1E8E0; --track: #ECE2D8; --skel: #F6EFE8; --shadow-rgb: 175,140,115; --glow-a: .16; --glass-rgb: 253,249,245; --page-desk: #EFE6DD; --hi: rgba(255,255,255,.92); --hi-2: rgba(255,255,255,.85); --glow-1: rgba(255,214,170,.34); --glow-2: rgba(255,170,190,.2); --glow-3: rgba(255,226,150,.18); --tile-ordered: #F7DEB6; --tile-bill: #D5DEF6; --tile-late: #F6CFD5; --chart-a: #2B54C8; --chart-b: #B02A8F; } html[data-theme="mint"] { --bg: #F3F9F7; --ink: #0E3330; --ink-2: #33635E; --ink-3: #1F4C48; --title: #0A6B62; --label: #0C7168; --price: #076F88; --blue: #076F88; --blue-2: #0C9886; --accent-rgb: 7,111,136; --bill: #3347D2; --green: #1E6B1E; --green-dot: #2FB36A; --amber: #8F5200; --red: #B01C1C; --c0: #FFFFFF; --c1: #FBFEFD; --c2: #E8F2EE; --c3: #F4FAF8; --c4: #FDFFFE; --c5: #E4EFEB; --pressed: #E4EFEB; --track: #DCE9E4; --skel: #EDF5F2; --shadow-rgb: 110,155,145; --glow-a: .16; --glass-rgb: 246,251,249; --page-desk: #E2EDE9; --hi: rgba(255,255,255,.92); --hi-2: rgba(255,255,255,.85); --glow-1: rgba(240,251,247,.7); --glow-2: rgba(150,235,210,.22); --glow-3: rgba(255,240,170,.16); --tile-ordered: #F3E2BC; --tile-bill: #D3DCF4; --tile-late: #F4D0D0; --chart-a: #2B54C8; --chart-b: #B02A8F; } .rv-item .pr, .rv-cartbar .sum .t, .rv-row .r b, .rv-line .lt, .rv-ticket .tbl { color: var(--price); } .rv-ticket .tbl { color: var(--title); } .rv-stat b { color: var(--price); } :root { --hero-1: #14275A; --hero-2: #2753BD; --hero-rgb: 20,39,90; --stat-num: #1B3E92; } html[data-theme="aurora"] { --hero-1: #262A7E; --hero-2: #5A4EDB; --hero-rgb: 38,42,126; --stat-num: #3A3FB5; } html[data-theme="saffron"] { --hero-1: #632619; --hero-2: #B1432A; --hero-rgb: 99,38,25; --stat-num: #9A3A1C; } html[data-theme="mint"] { --hero-1: #0A4744; --hero-2: #0F7A76; --hero-rgb: 10,71,68; --stat-num: #0B6B66; } .rv-hero { position: relative; overflow: hidden; padding: 20px 20px 18px; border-radius: 28px; color: #fff; background: radial-gradient(220px 160px at 100% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(180px 140px at 0% 110%, rgba(255,255,255,.10), transparent 70%), linear-gradient(145deg, var(--hero-1), var(--hero-2)); box-shadow: 0 16px 32px rgba(var(--hero-rgb), .32), inset 0 1px 0 rgba(255,255,255,.22); } .rv-hero::after { content: ''; position: absolute; right: -46px; top: -46px; width: 150px; height: 150px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); pointer-events: none; } .rv-hero .k { font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.74); } .rv-hero .big { margin: 8px 0 12px; font-size: calc(42px * min(var(--fs), 1.15)); font-weight: 800; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 12px rgba(0,0,0,.18); } .rv-hero .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 700; color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); } .rv-stats .rv-stat + .rv-stat { border-left: 1px solid rgba(var(--shadow-rgb), .22); } .rv-stats .rv-stat b { color: var(--stat-num); } .rv-top { display: flex; flex-direction: column; gap: 12px; } .rv-top-head { all: unset; box-sizing: border-box; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rv-top-head:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 10px; } .rv-top-head .ttl { margin-top: 2px; font-size: calc(18px * min(var(--fs), 1.15)); font-weight: 800; letter-spacing: -.02em; color: var(--title); } .rv-top-head .sw { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--pressed); box-shadow: var(--sh-in-sm); font-size: calc(12.5px * var(--fs)); font-weight: 800; color: var(--label); } .rv-top-head .sw i { font-style: normal; color: var(--link, var(--blue)); } .rv-top-sum { margin-top: -4px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-3); } .rv-rank { position: relative; display: flex; align-items: center; gap: 12px; min-height: calc(56px * min(var(--fs), 1.15)); padding: 8px 14px 8px 12px; border-radius: 18px; overflow: hidden; background: var(--pressed); box-shadow: var(--sh-in-sm); } .rv-rank .f { position: absolute; inset: 0 auto 0 0; border-radius: 18px; background: linear-gradient(90deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .30)); } .rv-rank.first .f { background: linear-gradient(90deg, rgba(var(--accent-rgb), .30), rgba(var(--accent-rgb), .52)); } .rv-rank > *:not(.f) { position: relative; } .rv-rank .n { flex: none; width: 1.4em; font-size: calc(15px * var(--fs)); font-weight: 800; color: var(--label); font-variant-numeric: tabular-nums; } .rv-rank .nm { font-size: calc(16px * var(--fs)); font-weight: 700; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-rank .sub { margin-top: 1px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .rv-rank .q { margin-left: auto; text-align: right; line-height: 1.05; } .rv-rank .q b { display: block; font-size: calc(22px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--price); font-variant-numeric: tabular-nums; } .rv-rank .q span { font-size: calc(11px * var(--fs)); font-weight: 800; color: var(--label); text-transform: uppercase; letter-spacing: .06em; } @media (min-width: 900px) { html, body { height: 100%; overflow: hidden; } body { display: flex; flex-direction: row; align-items: stretch; height: 100vh; background: var(--page-desk); } .rv-sidebar { display: flex !important; flex-direction: column; width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100vh; flex: none; overflow-y: auto; overflow-x: hidden; padding: 24px 14px calc(20px + env(safe-area-inset-bottom)); background: rgb(var(--glass-rgb)); border-right: 2px solid rgba(150,165,190,.20); box-shadow: 3px 0 24px rgba(150,165,190,.18); gap: 2px; z-index: 50; } .rv-sidebar-brand { display: flex; align-items: center; gap: 10px; padding: 0 10px 18px; border-bottom: 1px solid rgba(var(--shadow-rgb), .15); margin-bottom: 6px; } .rv-sidebar-brand .logo { width: 34px; height: 34px; border-radius: 11px; flex: none; background: var(--blue-grad); display: flex; align-items: center; justify-content: center; box-shadow: var(--sh-sm); } .rv-sidebar-brand .logo img { width: 100%; height: 100%; border-radius: inherit; display: block; } .rv-sidebar-brand .logo svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .rv-sidebar-brand .brand-name { font-weight: 800; font-size: calc(15px * var(--fs)); letter-spacing: -.02em; color: var(--title); line-height: 1.2; } .rv-sidebar-brand .brand-sub { font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--label); margin-top: 1px; } .rv-sidebar a, .rv-sidebar button.rv-sidebar-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); text-decoration: none; border: 0; background: transparent; width: 100%; text-align: left; transition: background .14s, color .14s, box-shadow .14s; cursor: pointer; } .rv-sidebar a:hover, .rv-sidebar button.rv-sidebar-item:hover { background: var(--raised-btn); color: var(--ink); box-shadow: var(--sh-sm); } .rv-sidebar a[aria-current="page"], .rv-sidebar button.rv-sidebar-item[aria-current="page"] { background: var(--raised-hi); color: var(--link, var(--blue)); font-weight: 700; box-shadow: var(--sh-md); } .rv-sidebar a .rv-icon, .rv-sidebar button.rv-sidebar-item .rv-icon { flex: none; } .rv-sidebar-spacer { flex: 1; min-height: 16px; } .rv-sidebar-footer { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid rgba(var(--shadow-rgb), .15); margin-top: 6px; } .rv-sidebar-footer .rv-avatar { width: 36px; height: 36px; font-size: calc(12px * var(--fs)); flex: none; } .rv-sidebar-footer .info { flex: 1; min-width: 0; } .rv-sidebar-footer .info .name { font-weight: 700; font-size: calc(12.5px * var(--fs)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-sidebar-footer .info .role { font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--label); } .rv-tabbar { display: none !important; } .rv-page-wrap { flex: 1; min-width: 0; height: 100%; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; background: var(--bg); } .rv-screen { max-width: 100%; min-height: 0; flex: 1; margin: 0; box-shadow: none; padding-bottom: 56px; background: radial-gradient(600px 500px at 90% 0%, var(--glow-2), transparent 65%), radial-gradient(400px 400px at 0% 90%, var(--glow-3), transparent 65%), var(--bg); } .rv-screen.no-tabs { padding-bottom: 56px; } .rv-screen.has-cartbar { padding-bottom: 56px; } .rv-head { padding: 36px 40px 0; } .rv-section { margin: 24px 40px 0; } .rv-fab { position: fixed; right: 40px; bottom: 36px; z-index: 30; } .rv-toast { left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); bottom: 32px; } .rv-sheet { left: calc(var(--sidebar-w) + (100vw - var(--sidebar-w)) / 2); max-width: 540px; border-radius: 28px 28px 0 0; } .rv-tiles { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 16px; } #orders-root > .rv-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .rv-kitchen-board { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; } #menu-root > .rv-stack { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .rv-cartbar { display: none !important; } .rv-order-layout { flex: 1; min-width: 0; height: 100%; overflow: hidden; display: flex; flex-direction: row; align-items: stretch; background: var(--bg); } .rv-order-layout .rv-order-left { flex: 1; min-width: 0; overflow-y: auto; height: 100%; } .rv-order-layout .rv-order-left .rv-screen { max-width: 100%; box-shadow: none; margin: 0; min-height: 100%; } .rv-order-right { width: 320px; flex: none; height: 100%; overflow-y: auto; border-left: 1px solid rgba(var(--shadow-rgb), .18); background: rgba(var(--glass-rgb), .85); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: -2px 0 16px rgba(var(--shadow-rgb), .10); padding: 28px 20px 32px; display: flex; flex-direction: column; gap: 16px; } .rv-order-right h2 { margin: 0 0 4px; font-size: calc(18px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--title); } .rv-order-right .rv-order-right-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--ink-2); font-weight: 600; text-align: center; } .rv-order-right .rv-order-right-empty svg { width: 44px; height: 44px; opacity: .35; } .rv-order-right-lines { flex: 1; overflow-y: auto; } .rv-order-right-actions { flex: none; display: flex; flex-direction: column; gap: 10px; } .rv-screen.no-tabs { max-width: 800px; } .rv-screen.rv-narrow { max-width: 480px; margin: 0 auto; } } @media (min-width: 1280px) { :root { --sidebar-w: 260px; } .rv-head { padding: 40px 48px 0; } .rv-section { margin: 28px 48px 0; } .rv-fab { right: 48px; bottom: 40px; } .rv-tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } #orders-root .rv-stack { grid-template-columns: repeat(3, 1fr); } #menu-root .rv-stack { grid-template-columns: repeat(3, 1fr); } .rv-order-right { width: 380px; } } .rv-menu { border-radius: 24px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; } .rv-menu > a, .rv-menu > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 10px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .rv-menu > * + * { border-top: 1px solid rgba(var(--shadow-rgb), .18); } .rv-menu > a:active, .rv-menu > button:active { background: var(--pressed); } .rv-menu > a:focus-visible, .rv-menu > button:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .rv-menu .ico { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); } .rv-menu .ico svg { width: 20px; height: 20px; } .rv-menu .tx { flex: 1; min-width: 0; } .rv-menu .tx b { display: block; font-size: calc(16px * var(--fs)); font-weight: 700; color: var(--ink); letter-spacing: -.01em; } .rv-menu .tx small { display: block; margin-top: 1px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .rv-menu .chev { flex: none; font-size: calc(24px * var(--fs)); line-height: 1; color: var(--label); opacity: .7; } .rv-menu .danger .ico { background: linear-gradient(145deg, #E2675F, #C0332B); } .rv-menu .danger .tx b { color: var(--red); } .rv-wait { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; text-decoration: none; color: inherit; background: var(--raised); box-shadow: var(--sh-md), inset 4px 0 0 var(--amber); } .rv-wait .badge, .rv-bills .badge { flex: none; min-width: 44px; height: 44px; padding: 0 6px; border-radius: 14px; display: grid; place-items: center; font-size: calc(14px * var(--fs)); font-weight: 800; letter-spacing: -.01em; color: var(--link, var(--blue)); background: var(--pressed); box-shadow: var(--sh-in-sm); } .rv-wait .badge { color: var(--amber); } .rv-bills .badge.open { color: var(--amber); } .rv-wait .tx { flex: 1; min-width: 0; } .rv-wait .tx b, .rv-bills .tx b { display: block; font-size: calc(16px * var(--fs)); font-weight: 700; letter-spacing: -.01em; } .rv-wait .tx small, .rv-bills .tx small { display: block; margin-top: 1px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .rv-wait .go { flex: none; padding: 9px 14px; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .28); } .rv-bills > a { gap: 12px; text-decoration: none; color: inherit; } .rv-bills .tx { flex: 1; min-width: 0; } .rv-bills .am { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .rv-bills .am b { font-size: calc(17px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--price); font-variant-numeric: tabular-nums; } .rv-bills .st { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .rv-bills .st.paid { color: var(--green); } .rv-bills .st.open { color: var(--amber); } .rv-hero .big { margin: 6px 0 14px; } .rv-hero .spark { display: flex; align-items: flex-end; gap: 8px; height: 76px; } .rv-hero .spark .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; } .rv-hero .spark .col i { display: block; width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: rgba(255,255,255,.28); } .rv-hero .spark .col i.now { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.35); } .rv-hero .spark .col span { font-size: calc(10.5px * var(--fs)); font-weight: 700; color: rgba(255,255,255,.7); line-height: 1; } .rv-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .rv-quick .q { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; border-radius: 20px; text-decoration: none; background: var(--raised); box-shadow: var(--sh-md); font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--ink); -webkit-tap-highlight-color: transparent; } .rv-quick .q:active { background: var(--pressed); box-shadow: var(--sh-in-sm); } .rv-quick .ic { width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .25); } .rv-quick .ic svg { width: 22px; height: 22px; } .rv-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rv-kpi { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 22px; text-decoration: none; color: inherit; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; } .rv-kpi:active { background: var(--pressed); } .rv-kpi .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 8px; } .rv-kpi .ic svg { width: 18px; height: 18px; } .rv-kpi b { font-size: calc(26px * var(--fs)); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; color: var(--stat-num, var(--ink)); font-variant-numeric: tabular-nums; } .rv-kpi .lb { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rv-kpi.t-blue .ic { color: #1F5FD0; background: rgba(47,123,240,.16); } .rv-kpi.t-green .ic { color: #137A48; background: rgba(47,179,106,.18); } .rv-kpi.t-violet .ic { color: #5B44C8; background: rgba(122,92,255,.16); } .rv-kpi.t-amber .ic { color: #8F5200; background: rgba(240,170,50,.22); } .rv-donut { display: flex; align-items: center; gap: 18px; } .rv-donut .ring { position: relative; flex: none; width: 128px; height: 128px; } .rv-donut .ring svg { width: 100%; height: 100%; display: block; } .rv-donut .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .rv-donut .mid span { font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); } .rv-donut .mid b { font-size: calc(17px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--price); } .rv-donut .legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .rv-donut .dlg { display: flex; align-items: center; gap: 10px; } .rv-donut .dlg i { flex: none; width: 12px; height: 12px; border-radius: 50%; } .rv-donut .dlg b { display: block; font-size: calc(15px * var(--fs)); font-weight: 700; } .rv-donut .dlg span { display: block; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-3); } @media (min-width: 900px) { #dash-root > .rv-stack { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; grid-template-areas: "hero quick" "kpis kpis" "alerts alerts" "top split" "top gst"; } #dash-root .rv-hero { grid-area: hero; padding: 26px 28px; } #dash-root .rv-hero .big { font-size: calc(54px * min(var(--fs), 1.1)); margin: 8px 0 18px; } #dash-root .rv-hero .spark { height: 120px; gap: 12px; } #dash-root .rv-hero .spark .col i { max-width: 46px; } #dash-root .rv-quick { grid-area: quick; grid-template-columns: 1fr 1fr; align-self: stretch; } #dash-root .rv-quick .q { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 14px 18px; font-size: calc(15px * var(--fs)); border-radius: 24px; } #dash-root .rv-quick .ic { width: 48px; height: 48px; border-radius: 16px; } #dash-root .rv-kpis { grid-area: kpis; grid-template-columns: repeat(4, 1fr); gap: 20px; } #dash-root .rv-kpi { padding: 18px 20px; } #dash-root .rv-kpi b { font-size: calc(30px * min(var(--fs), 1.1)); } #dash-root .dash-alerts { grid-area: alerts; } #dash-root .dash-alerts .rv-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } #dash-root .rv-top { grid-area: top; } #dash-root .dash-split { grid-area: split; } #dash-root .dash-gst { grid-area: gst; } .rv-bills { display: grid; grid-template-columns: 1fr 1fr; } .rv-bills > * + * { border-top: 0; } .rv-bills > a { border-top: 1px solid rgba(var(--shadow-rgb), .18); } } @media (min-width: 1280px) { #dash-root > .rv-stack { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } .rv-bills { grid-template-columns: 1fr 1fr 1fr; } } .mg { max-width: 1180px; } .mg-tabs { display: flex; gap: 8px; overflow-x: auto; padding: 4px 20px 10px; margin-top: 8px; scrollbar-width: none; position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 70%, transparent); } .mg-tabs::-webkit-scrollbar { display: none; } .mg-tabs button { flex: none; min-height: 42px; padding: 0 18px; border: 0; border-radius: 999px; font: inherit; font-size: calc(14.5px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm, 0 4px 10px rgba(var(--shadow-rgb), .18)); cursor: pointer; } .mg-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .3); } .mg-body { margin-top: 10px; } .mg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .mg-head h2 { margin: 0; font-size: calc(22px * min(var(--fs), 1.15)); font-weight: 800; letter-spacing: -.02em; color: var(--title); } .mg-head p { margin: 2px 0 0; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .mg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .mg-search { display: flex; align-items: center; gap: 8px; min-width: 220px; } .mg-search .rv-input { min-height: 44px; } .mg-status { min-width: 220px; } .mg-split { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; } .mg-side { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 22px; background: var(--raised); box-shadow: var(--sh-md); position: sticky; top: 64px; } .mg-side button { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; color: var(--ink); background: transparent; cursor: pointer; text-align: left; } .mg-side button small { font-size: calc(12px * var(--fs)); font-weight: 800; color: var(--label); } .mg-side button[aria-selected="true"] { color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); } .mg-side button[aria-selected="true"] small { color: rgba(255,255,255,.85); } .mg-table { border-radius: 22px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; } .mg-row { display: grid; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; } .mg-row + .mg-row { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .mg-row.off { opacity: .6; } .mg-th { min-height: 44px; padding-top: 6px; padding-bottom: 6px; font-size: calc(12px * var(--fs)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--label); background: rgba(var(--shadow-rgb), .08); } .mg-items { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, .9fr) 72px 72px auto; } .mg-cats { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; } .mg-tbl { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.4fr) minmax(0, .8fr) 72px auto; } .mg-disc { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.1fr) minmax(0, 1fr) 72px auto; } .mg-row .c-name { display: flex; align-items: center; gap: 10px; min-width: 0; } .mg-row .c-name b { display: block; font-weight: 700; } .mg-row .c-name small { display: block; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-3); } .mg-row .c-name .rv-input { min-height: 44px; } .mg-row .c-cat, .mg-row .c-price { min-width: 0; font-weight: 600; color: var(--ink-2); } .mg-row .c-price { font-weight: 800; color: var(--price); } .mg-row .rv-input { min-height: 44px; padding-top: 0; padding-bottom: 0; } .mg-row .c-sw { display: flex; justify-content: center; } .mg-row .c-act { display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .mg-ib { width: 44px; height: 44px; font-weight: 800; font-size: 18px; } .mg-add { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; padding: 12px; border-radius: 22px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .mg-add .rv-input { flex: 1 1 160px; min-height: 46px; width: auto; } .mg-card { display: flex; align-items: center; gap: 14px; } .mg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .mg-chips span { padding: 4px 10px; border-radius: 999px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--label); background: var(--pressed); } .mg-narrow { max-width: 560px; } .mg-sw { position: relative; display: inline-block; width: 50px; height: 30px; cursor: pointer; } .mg-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .mg-sw i { position: absolute; inset: 0; border-radius: 999px; background: var(--track); box-shadow: var(--sh-in-sm); transition: background .18s; pointer-events: none; } .mg-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: transform .18s; } .mg-sw input:checked + i { background: linear-gradient(145deg, var(--blue-2), var(--blue)); } .mg-sw input:checked + i::after { transform: translateX(20px); } .mg-sw input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; } @media (max-width: 899px) { .mg-tabs { padding-left: 16px; padding-right: 16px; } .mg-split { grid-template-columns: 1fr; } .mg-side { flex-direction: row; overflow-x: auto; position: static; padding: 8px; } .mg-side button { flex: none; } .mg-th { display: none; } .mg-row { grid-template-columns: 1fr 1fr; gap: 8px 14px; padding: 14px 16px; } .mg-row .c-name { grid-column: 1 / -1; } .mg-row .c-act { grid-column: 1 / -1; justify-content: flex-end; } .mg-row .c-sw { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 4px; } .mg-row .c-cat::before, .mg-row .c-price::before, .mg-row .c-sw::before { content: attr(data-l); display: block; font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-bottom: 3px; } .mg-row .c-cat:empty::before { display: none; } .mg-search, .mg-status { min-width: 0; width: 100%; } .mg-search .rv-input { width: 100%; } } .mg-tabs { flex: none; } @media (min-width: 900px) { .rv-screen.no-tabs.mg { max-width: 1240px; width: 100%; } .mg-tabs { padding-left: 32px; padding-right: 32px; } .mg-items { grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, .9fr) 64px 64px auto; } } @media (max-width: 899px) { .mg-head { margin-bottom: 10px; } .mg-head h2 { font-size: calc(20px * min(var(--fs), 1.1)); } .mg-actions { width: 100%; } .mg-actions > .rv-btn { flex: 1 1 100%; } .mg-table { border-radius: 20px; } .mg-row { padding: 12px 14px; min-height: 0; gap: 8px 12px; } .mg-row.mg-items { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; } .mg-row.mg-items .c-name { flex: 1 1 0; min-width: 0; grid-column: auto; } .mg-row.mg-items .c-price { order: 2; flex: none; font-size: calc(17px * var(--fs)); } .mg-row.mg-items .c-price::before, .mg-row.mg-items .c-cat::before { display: none; } .mg-row.mg-items .c-cat { order: 3; flex: 1 1 100%; margin: -2px 0 2px 26px; font-size: calc(12.5px * var(--fs)); color: var(--ink-3); } .mg-row.mg-items .c-sw { order: 4; flex-direction: row; align-items: center; gap: 8px; } .mg-row.mg-items .c-sw::before { margin: 0; font-size: calc(11.5px * var(--fs)); } .mg-row.mg-items .c-act { order: 5; flex: 1 1 auto; grid-column: auto; margin-left: auto; } .mg-row.mg-items .c-act .rv-btn { min-height: 40px; padding: 0 14px; } .mg-row.mg-items .mg-ib { width: 40px; height: 40px; } .mg-row.mg-cats { grid-template-columns: 1fr auto; } .mg-row.mg-cats .c-name { grid-column: 1 / -1; } .mg-row.mg-cats .c-cat { grid-column: 1; align-self: center; font-size: calc(13px * var(--fs)); color: var(--ink-3); } .mg-row.mg-cats .c-cat::before { display: none; } .mg-row.mg-cats .c-act { grid-column: 2; } .mg-row.mg-cats .mg-ib { width: 40px; height: 40px; } .mg-add > .rv-btn { flex: 1 1 100%; } .mg-card { flex-wrap: wrap; } .mg-card .mg-actions { width: auto; margin-left: auto; } .mg-card .mg-actions > .rv-btn { flex: none; } .mg-narrow { max-width: none; } } @media (max-width: 899px) { .mg-row.mg-th { display: none; } } @media (max-width: 899px) { .mg-row.mg-tbl .c-act, .mg-row.mg-disc .c-act { grid-column: 2; align-self: end; } .mg-row.mg-tbl .c-sw, .mg-row.mg-disc .c-sw { grid-column: 1; align-self: end; } .mg-row.mg-tbl .mg-ib, .mg-row.mg-disc .mg-ib { width: 40px; height: 40px; } } .au-range { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .au-dates { display: flex; gap: 10px; } .au-dates label { display: flex; flex-direction: column; gap: 4px; } .au-dates label span { font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--label); margin-left: 6px; } .au-dates .rv-input { min-height: 44px; width: 160px; padding-top: 0; padding-bottom: 0; } .au-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .au-kpi { padding: 14px 16px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); } .au-kpi b { display: block; font-size: calc(24px * min(var(--fs), 1.1)); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--stat-num, var(--ink)); font-variant-numeric: tabular-nums; } .au-kpi span { display: block; margin-top: 3px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .au-kpi.risk { box-shadow: var(--sh-md), inset 4px 0 0 var(--red); } .au-kpi.watch { box-shadow: var(--sh-md), inset 4px 0 0 var(--amber); } .au-filters { display: flex; flex-direction: column; gap: 10px; } .au-fl2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .au-fl2 .mg-search { flex: 1 1 260px; } .au-sel { min-height: 44px; width: auto; min-width: 180px; padding-top: 0; padding-bottom: 0; } .au-list { border-radius: 22px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; } .au-item + .au-item { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .au-item.open { background: rgba(var(--shadow-rgb), .05); } .au-row { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 86px minmax(0, 1.1fr) minmax(0, 1.5fr) minmax(0, 1.4fr) 28px; align-items: center; gap: 14px; padding: 12px 16px; min-height: 60px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .au-row.au-bill { grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1.4fr) minmax(0, 1.2fr) 130px 28px; } .au-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .au-row b { display: block; font-weight: 700; } .au-row small { display: block; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-3); } .au-row .c-when b { font-variant-numeric: tabular-nums; } .au-row .c-info { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; } .au-row .c-pay { font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); } .au-row .c-amt { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .au-row .c-amt b { font-size: calc(16px * var(--fs)); color: var(--price); font-variant-numeric: tabular-nums; } .au-row .c-chev { color: var(--link, var(--blue)); text-align: center; } .au-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: calc(12.5px * var(--fs)); font-weight: 800; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .12); } .au-tag.watch { color: var(--amber); background: rgba(240,170,50,.2); } .au-tag.risk { color: var(--red); background: rgba(224,70,70,.14); } .au-row .c-what small { margin-top: 3px; } .au-detail { padding: 4px 16px 16px; } .au-kvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 18px; } .au-kv span { display: block; font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--label); } .au-kv b { display: block; font-weight: 700; word-break: break-word; } .au-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .au-wide { grid-column: 1 / -1; } .au-detail .rv-eyebrow { margin: 4px 0 6px; } .au-line { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid rgba(var(--shadow-rgb), .14); } .au-line:last-child { border-bottom: 0; } .au-line b { flex: none; font-variant-numeric: tabular-nums; } .au-line small { display: block; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-3); } .au-line em { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; color: var(--amber); background: rgba(240,170,50,.2); } .au-line em.x { color: var(--red); background: rgba(224,70,70,.14); } .au-line.gone { opacity: .6; text-decoration: line-through; } .au-line.gone small, .au-line.gone em { text-decoration: none; } .au-sum { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(var(--shadow-rgb), .4); display: grid; gap: 6px; } .au-sum .au-kv { display: flex; justify-content: space-between; gap: 12px; } .au-sum .au-kv span { text-transform: none; letter-spacing: 0; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .au-tl { position: relative; padding-left: 18px; display: flex; flex-direction: column; gap: 12px; } .au-tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: rgba(var(--shadow-rgb), .25); } .au-ev { position: relative; } .au-ev i { position: absolute; left: -18px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--bg); } .au-ev.watch i { background: var(--amber); } .au-ev.risk i { background: var(--red); } .au-ev b { font-weight: 700; } .au-ev small { display: block; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .au-sub { margin-top: 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px 14px; } @media (max-width: 899px) { .au-dates { width: 100%; } .au-dates label { flex: 1; } .au-dates .rv-input { width: 100%; } .au-kpis { grid-template-columns: 1fr 1fr; } .au-row, .au-row.au-bill { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 14px; } .au-row .c-when { grid-column: 1; grid-row: 1; display: flex; gap: 8px; align-items: baseline; } .au-row .c-when small { display: inline; } .au-row .c-chev { grid-column: 2; grid-row: 1; } .au-row .c-what, .au-row .c-who { grid-column: 1 / -1; } .au-row .c-info { grid-column: 1 / -1; white-space: normal; } .au-row .c-pay { grid-column: 1; } .au-row .c-amt { grid-column: 2; flex-direction: row; align-items: center; gap: 8px; } .au-cols { grid-template-columns: 1fr; } .au-sel { width: 100%; } } @media (min-width: 900px) { .rv-screen.no-tabs.mg { max-width: none; width: 100%; } .rv-screen.no-tabs.mg .rv-head, .rv-screen.no-tabs.mg .mg-body { margin-left: 0; margin-right: 0; } .rv-screen.no-tabs.mg .rv-head { padding-left: 32px; padding-right: 32px; } .rv-screen.no-tabs.mg .mg-body { padding-left: 32px; padding-right: 32px; margin-left: 0; margin-right: 0; } .au-row { grid-template-columns: 90px minmax(160px, 1fr) minmax(200px, 1.3fr) minmax(0, 2.2fr) 28px; } .au-row.au-bill { grid-template-columns: 100px minmax(160px, 1.1fr) minmax(0, 1.6fr) minmax(140px, 1fr) 140px 28px; } } .lg-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .lg-bg i { position: absolute; border-radius: 50%; background: linear-gradient(145deg, rgba(var(--accent-rgb), .16), rgba(var(--accent-rgb), .04)); box-shadow: var(--ring), inset 10px 14px 34px var(--ring-soft), 0 30px 70px rgba(var(--accent-rgb), .12); } .lg-bg .o1 { width: 360px; height: 360px; left: -140px; top: -150px; } .lg-bg .o2 { width: 190px; height: 190px; right: -70px; top: 24%; background: linear-gradient(145deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .06)); } .lg-bg .o3 { width: 300px; height: 300px; right: -120px; bottom: -130px; } .lg-bg .o4 { width: 150px; height: 150px; left: -50px; bottom: 9%; background: linear-gradient(145deg, rgba(var(--accent-rgb), .14), rgba(var(--accent-rgb), .03)); } .lg { position: relative; z-index: 1; background: transparent !important; box-shadow: none !important; padding-top: 28px; } .lg-top { text-align: center; padding: 18px 20px 4px; } .lg-mark { width: 112px; height: 112px; margin: 0 auto 18px; border-radius: 34px; display: grid; place-items: center; background: linear-gradient(150deg, var(--c0), var(--c2)); box-shadow: var(--sh-lg, 0 24px 50px rgba(var(--shadow-rgb), .3)), var(--ring), inset 8px 10px 22px var(--ring-soft); } .lg-mark img { width: 100%; height: 100%; border-radius: inherit; display: block; } .lg-mark svg { width: 84px; height: 84px; filter: drop-shadow(0 8px 12px rgba(var(--accent-rgb), .35)); } .lg-title { margin: 0; font-size: calc(34px * min(var(--fs), 1.1)); font-weight: 800; letter-spacing: -.03em; color: var(--title); } .lg-sub { margin: 6px 0 0; font-size: calc(13.5px * var(--fs)); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--label); } .lg-form, .lg-card { display: flex; flex-direction: column; gap: 14px; padding: 0 4px; } .lg-card { padding: 22px 16px; border-radius: 30px; background: var(--raised); box-shadow: var(--sh-md); } .lg-field { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0 18px; border-radius: 22px; background: linear-gradient(145deg, var(--c1), var(--c0)); box-shadow: var(--sh-md), var(--ring); color: var(--label); } .lg-field:focus-within { box-shadow: var(--sh-md), 0 0 0 2px rgba(var(--accent-rgb), .55); } .lg-field svg.rv-icon { flex: none; width: 22px; height: 22px; } .lg-field input { all: unset; box-sizing: border-box; flex: 1; min-width: 0; min-height: 56px; font-size: calc(16.5px * var(--fs)); font-weight: 600; color: var(--ink); } .lg-field input::placeholder { color: var(--ink-3); font-weight: 500; opacity: .85; } .lg-field .eye { all: unset; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--label); } .lg-field .eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lg-field .eye .slash { opacity: 1; } .lg-field .eye.on .slash { opacity: 0; } .lg-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lg-check { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: calc(14.5px * var(--fs)); font-weight: 600; color: var(--ink); cursor: pointer; } .lg-check input { position: absolute; opacity: 0; width: 0; height: 0; } .lg-check i { flex: none; width: 24px; height: 24px; border-radius: 8px; background: var(--pressed); box-shadow: var(--sh-in-sm); display: grid; place-items: center; } .lg-check input:checked + i { background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 4px 10px rgba(var(--accent-rgb), .3); } .lg-check input:checked + i::after { content: '✓'; color: #fff; font-size: 15px; font-weight: 800; line-height: 1; } .lg-check input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; } .lg-link { all: unset; cursor: pointer; font-size: calc(14.5px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); min-height: 44px; display: inline-flex; align-items: center; } .lg-link.center { align-self: center; font-size: calc(13.5px * var(--fs)); color: var(--label); } .lg-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; } .lg-note { margin: -4px 4px 0; padding: 10px 14px; border-radius: 16px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .lg-note[hidden] { display: none; } .lg-go { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; padding: 0 12px 0 28px; border-radius: 999px; cursor: pointer; font-size: calc(18px * var(--fs)); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue-2), var(--blue)); box-shadow: 0 16px 30px rgba(var(--accent-rgb), .38), inset 0 0 0 1px rgba(255,255,255,.25), inset 0 8px 16px rgba(255,255,255,.18); } .lg-go span { flex: 1; text-align: center; margin-left: 34px; } .lg-go i { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 22px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); } .lg-go:active { transform: translateY(1px); } .lg-go:disabled { opacity: .7; cursor: default; } .lg-go:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .5); outline-offset: 3px; } .lg-or { display: flex; align-items: center; gap: 14px; margin-top: 4px; } .lg-or::before, .lg-or::after { content: ''; flex: 1; height: 1px; background: rgba(var(--shadow-rgb), .35); } .lg-or span { font-size: calc(11.5px * var(--fs)); font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--label); } .lg-social { display: flex; justify-content: center; } .lg-g { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 180px; min-height: 58px; padding: 0 28px; border-radius: 22px; text-decoration: none; font-size: calc(16px * var(--fs)); font-weight: 700; color: var(--ink); background: linear-gradient(145deg, var(--c1), var(--c0)); box-shadow: var(--sh-md), var(--ring); -webkit-tap-highlight-color: transparent; } .lg-g:active { box-shadow: var(--sh-in-sm); } .lg-g:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .lg-g svg { width: 26px; height: 26px; } .lg-foot { margin: 22px 0 6px; text-align: center; font-size: calc(11.5px * var(--fs)); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--label); opacity: .85; } .lg-foot b { margin: 0 6px; color: var(--link, var(--blue)); } .lg { padding-top: 6px; } .lg-top { padding-top: 8px; } .lg-mark { width: 96px; height: 96px; border-radius: 30px; margin-bottom: 12px; } .lg-mark svg { width: 72px; height: 72px; } .lg-title { font-size: calc(30px * min(var(--fs), 1.1)); } .lg-form { gap: 12px; } .lg-field { min-height: 56px; } .lg-field input { min-height: 52px; } .lg-go { min-height: 58px; } .lg-check, .lg-link { white-space: nowrap; } .lg-g { min-height: 54px; } .lg-foot { margin-top: 10px; } html:has(main.lg), html:has(main.lg) body { height: 100%; overflow: hidden; } main.lg { height: 100dvh; min-height: 0 !important; padding: 0 !important; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.6dvh, 16px); overflow: hidden; } main.lg .rv-section { margin: 0 !important; padding: 0 20px; } .lg-top { padding: 0 20px; } .lg-mark { width: clamp(64px, 11dvh, 96px); height: clamp(64px, 11dvh, 96px); border-radius: clamp(20px, 3.6dvh, 30px); margin-bottom: clamp(6px, 1.4dvh, 12px); } .lg-mark svg { width: 74%; height: 74%; } .lg-title { font-size: calc(clamp(24px, 3.9dvh, 30px) * min(var(--fs), 1.1)); } .lg-sub { margin-top: 4px; font-size: calc(clamp(11px, 1.6dvh, 13px) * var(--fs)); } .lg-form { gap: clamp(8px, 1.5dvh, 12px); padding: 0; } .lg-field { min-height: clamp(48px, 6.6dvh, 56px); } .lg-field input { min-height: clamp(44px, 6.2dvh, 52px); } .lg-go { min-height: clamp(50px, 6.8dvh, 58px); } .lg-go i { width: clamp(36px, 5dvh, 44px); height: clamp(36px, 5dvh, 44px); } .lg-g { min-height: clamp(46px, 6.2dvh, 54px); } .lg-check, .lg-link { min-height: 36px; } .lg-row { margin-top: -2px; } .lg-foot { margin: 0 0 clamp(4px, 1dvh, 10px); } .lg-form .rv-form-error { margin: 0; min-height: 0; } .lg-form .rv-form-error:empty { display: none; } @media (max-height: 640px) { .lg-foot, .lg-sub { display: none; } } .lg-form .rv-form-error { font-size: calc(12.5px * var(--fs)); line-height: 1.3; } @media (max-height: 600px) { .lg-mark { display: none; } .lg-title { margin-top: 4px; } } .au .mg-tabs { position: static; background: none; padding: 0 32px 4px; margin-top: 4px; } .au .mg-tabs { display: inline-flex; gap: 4px; padding: 5px; margin: 6px 20px 0; border-radius: 999px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .au .mg-tabs button { min-height: 40px; padding: 0 22px; box-shadow: none; background: transparent; color: var(--ink-2); } .au .mg-tabs button[aria-selected="true"] { color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .3); } .au-range { align-items: center; } .au-date { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-md); color: var(--link, var(--blue)); } .au-date svg { flex: none; width: 20px; height: 20px; } .au-dates .au-date .rv-input { all: unset; min-height: 48px; width: 130px; font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--ink); } .au-presets { display: inline-flex; gap: 4px; padding: 5px; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); } .au-presets button { all: unset; box-sizing: border-box; min-height: 40px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 13px; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink-2); cursor: pointer; } .au-presets button[aria-pressed="true"] { color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .14); } .au-presets button:focus-visible { outline: 2px solid var(--blue); } .au-export { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 18px; border-radius: 14px; font-size: calc(14.5px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); cursor: pointer; box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); } .au-export svg { width: 18px; height: 18px; } .au-export:hover { background: rgba(var(--accent-rgb), .08); } .au-export:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .au-kpis { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; } .au-kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: 22px; } .au-kpi .ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 10px; } .au-kpi .ic svg { width: 22px; height: 22px; } .au-kpi .ic.blue { color: #2F6FE0; background: rgba(47,123,240,.14); } .au-kpi .ic.red { color: #C93A4A; background: rgba(224,70,90,.14); } .au-kpi .ic.violet { color: #6B4FD8; background: rgba(122,92,255,.15); } .au-kpi .ic.amber { color: #B07210; background: rgba(240,170,50,.2); } .au-kpi .ic.green { color: #1F8A52; background: rgba(47,179,106,.17); } .au-kpi .ic.teal { color: #0E8C84; background: rgba(20,184,166,.16); } .au-kpi b { font-size: calc(28px * min(var(--fs), 1.1)); } .au-kpi .lb { margin-top: 2px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); } .au-kpi > span:not(.ic):not(.lb) { display: none; } .au-head { display: grid; grid-template-columns: 100px minmax(180px, 1.1fr) minmax(200px, 1.5fr) minmax(0, 1.1fr) 130px 28px; gap: 14px; padding: 12px 18px; background: rgba(var(--shadow-rgb), .08); font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--label); } .au-list.b .au-head, .au-list.b .au-row { grid-template-columns: 110px minmax(180px, 1.2fr) minmax(0, 1.4fr) minmax(140px, 1.1fr) 140px 28px; } .au-list.b .au-head span:nth-child(5) { text-align: right; } .au-row { grid-template-columns: 100px minmax(180px, 1.1fr) minmax(200px, 1.5fr) minmax(0, 1.1fr) 130px 28px; padding: 14px 18px; min-height: 64px; } .au-row.au-bill { grid-template-columns: 110px minmax(180px, 1.2fr) minmax(0, 1.4fr) minmax(140px, 1.1fr) 140px 28px; } .au-row .c-ip { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; } .au-row .c-who { display: flex; align-items: center; gap: 12px; min-width: 0; } .au-row .c-who .nm { min-width: 0; } .au-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: calc(13px * var(--fs)); font-weight: 800; color: var(--label); background: var(--pressed); box-shadow: var(--sh-in-sm); } .au-av.o, .au-av.m { color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .14); box-shadow: none; } .au-item:hover > .au-row { background: rgba(var(--accent-rgb), .04); } .au-detail { padding: 2px 18px 18px; } .au-kvs.strip { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding: 14px 16px; border-radius: 16px; background: rgba(var(--accent-rgb), .07); } .au-kv.hasic { display: flex; align-items: flex-start; gap: 10px; } .au-kv .kic { flex: none; width: 24px; height: 24px; color: var(--label); } .au-kv .kic svg { width: 22px; height: 22px; } @media (max-width: 899px) { .au .mg-tabs { display: flex; margin: 4px 16px 0; } .au .mg-tabs button { flex: 1; padding: 0 8px; } .au-range { gap: 10px; } .au-dates { gap: 8px; } .au-dates .au-date { padding: 0 10px; } .au-dates .au-date .rv-input { width: 100%; font-size: calc(14px * var(--fs)); } .au-presets { width: 100%; justify-content: space-between; } .au-presets button { flex: 1; justify-content: center; padding: 0 6px; } .au-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .au-kpi { padding: 14px; } .au-kpi .ic { width: 36px; height: 36px; margin-bottom: 6px; } .au-kpi b { font-size: calc(24px * min(var(--fs), 1.1)); } .au-head { display: none; } .au-row, .au-row.au-bill, .au-list.b .au-row { grid-template-columns: 1fr auto; padding: 14px; gap: 6px 12px; } .au-row .c-ip { display: none; } .au-row .c-info { grid-column: 1 / -1; } .au-row .c-info:empty { display: none; } .au-row .c-who { grid-column: 1 / -1; order: 0; } .au-row .c-what { grid-column: 1 / -1; } .au-fl2 .au-export { flex: 1; justify-content: center; } .au-kvs.strip { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .au-kpis { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(136px, 1fr); overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; } } @media (max-width: 899px) { .au-kpis { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 142px; overflow-x: auto; scroll-snap-type: x proximity; margin: 0 -16px; padding: 2px 16px 10px; scrollbar-width: none; } .au-kpis::-webkit-scrollbar { display: none; } .au-kpi { scroll-snap-align: start; } } @media (max-width: 899px) { .au-kvs.strip { grid-template-columns: 1fr; gap: 10px; } } @media (max-width: 899px) { .au-kpis { grid-auto-columns: 158px; gap: 8px; padding-bottom: 6px; } .au-kpi { display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 0; align-items: center; padding: 9px 12px; border-radius: 16px; box-shadow: var(--sh-sm, 0 3px 8px rgba(var(--shadow-rgb), .18)); } .au-kpi .ic { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: 10px; margin: 0; } .au-kpi .ic svg { width: 17px; height: 17px; } .au-kpi b { font-size: calc(19px * min(var(--fs), 1.1)); line-height: 1.1; } .au-kpi .lb { margin: 0; font-size: calc(11.5px * var(--fs)); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .au-kpi.risk { box-shadow: var(--sh-sm, 0 3px 8px rgba(var(--shadow-rgb), .18)), inset 3px 0 0 var(--red); } .au-kpi.watch { box-shadow: var(--sh-sm, 0 3px 8px rgba(var(--shadow-rgb), .18)), inset 3px 0 0 var(--amber); } } @media (max-width: 899px) { .au .mg-tabs button { min-height: 34px; font-size: calc(13.5px * var(--fs)); } .au .mg-tabs { padding: 4px; } .au-range { margin-bottom: 8px; gap: 8px; } .au-date { min-height: 42px; border-radius: 13px; } .au-dates .au-date .rv-input { min-height: 40px; font-size: calc(13.5px * var(--fs)); } .au-dates label span { font-size: calc(10.5px * var(--fs)); } .au-presets { padding: 3px; border-radius: 14px; } .au-presets button { min-height: 34px; font-size: calc(13px * var(--fs)); border-radius: 11px; } .au-filters { gap: 8px; } .au-filters .rv-chip { min-height: 36px; padding: 0 14px; font-size: calc(13px * var(--fs)); } .au-sel, .au-fl2 .mg-search .rv-input { min-height: 40px; font-size: calc(14px * var(--fs)); } .au-export { min-height: 40px; font-size: calc(13.5px * var(--fs)); } .au-row, .au-row.au-bill, .au-list.b .au-row { padding: 11px 14px; gap: 4px 12px; } .au-av { width: 32px; height: 32px; font-size: calc(11.5px * var(--fs)); } .au-row .c-when b { font-size: calc(14.5px * var(--fs)); } .au-row .c-who b { font-size: calc(14.5px * var(--fs)); } .au-tag { font-size: calc(11.5px * var(--fs)); padding: 3px 9px; } } html[data-theme$="night"] { color-scheme: dark; } html[data-theme$="night"] { --bg: #07080C; --ink: #F2F3F7; --ink-2: #A6ABBB; --ink-3: #C9CCD8; --title: #F6F7FB; --label: #B4A79B; --price: #FFD2A8; --blue: #D9461A; --blue-2: #EA6A14; --accent-rgb: 234,106,20; --link: #FF9A55; --bill: #7FB0FF; --green: #3DDC97; --green-dot: #34C77B; --amber: #FFB547; --red: #FF7A7A; --c0: #171B24; --c1: #0F1218; --c2: #0B0D12; --c3: #131720; --c4: #151922; --c5: #0D1016; --pressed: #06070A; --track: #05060A; --skel: #12151C; --shadow-rgb: 0,0,0; --glow-a: .28; --glass-rgb: 10,12,17; --page-desk: #040507; --hi: rgba(255,255,255,.05); --hi-2: rgba(255,255,255,.04); --ring: inset 0 0 0 1px rgba(255,255,255,.08); --ring-soft: rgba(255,255,255,.04); --glow-1: rgba(255,122,40,.10); --glow-2: rgba(244,63,94,.12); --glow-3: rgba(30,190,170,.06); --tile-ordered: #2A1D08; --tile-bill: #14213F; --tile-late: #3A1519; --chart-a: #5AA0FF; --chart-b: #FF6FB0; --hero-1: #1C0D07; --hero-2: #5A2108; --hero-rgb: 120,45,10; --stat-num: #FFB27A; --sh-lg: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.55); --sh: 0 0 0 1px rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.5); --sh-md: 0 0 0 1px rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.45); --sh-sm: 0 0 0 1px rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.4); --sh-in: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 8px rgba(0,0,0,.6); --sh-in-md: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 6px rgba(0,0,0,.55); --sh-in-sm: inset 0 0 0 1px rgba(255,255,255,.06), inset 0 2px 5px rgba(0,0,0,.5); --sh-seg: 0 0 0 1px rgba(255,255,255,.1), 0 3px 8px rgba(0,0,0,.4); } html[data-theme$="night"] body { background: radial-gradient(900px 520px at 85% 105%, var(--bg-glow-b, rgba(244,63,94,.14)), transparent 60%), radial-gradient(700px 380px at 10% -5%, var(--bg-glow-a, rgba(255,122,40,.10)), transparent 60%), var(--bg); } html[data-theme$="night"] .rv-title, html[data-theme$="night"] .lg-title { background: linear-gradient(95deg, var(--tg1, #FFE0B8) 0%, var(--tg2, #FF9A55) 52%, var(--tg3, #FF6F91) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } html[data-theme$="night"] .rv-card, html[data-theme$="night"] .rv-menu, html[data-theme$="night"] .au-list, html[data-theme$="night"] .mg-table, html[data-theme$="night"] .au-kpi, html[data-theme$="night"] .rv-kpi, html[data-theme$="night"] .rv-quick .q { background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,0) 40%), var(--c1); } html[data-theme$="night"] .rv-btn, html[data-theme$="night"] .rv-fab, html[data-theme$="night"] .lg-go { box-shadow: 0 10px 26px rgba(var(--accent-rgb), .32), inset 0 1px 0 rgba(255,255,255,.22); } html[data-theme$="night"] .rv-hero { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.5); } html[data-theme$="night"] .rv-tag, html[data-theme$="night"] .rv-banner { color: #1B1405; } html[data-theme$="night"] .rv-diet { background: var(--c0); } html[data-theme$="night"] .rv-sheet::before { background: #3A4357; } html[data-theme$="night"] .rv-input::placeholder, html[data-theme$="night"] .lg-field input::placeholder { color: #7C879C; } html[data-theme$="night"] .rv-sidebar { border-right-color: rgba(255,255,255,.06); box-shadow: 3px 0 24px rgba(0,0,0,.35); } html[data-theme$="night"] .rv-toast { background: rgba(40,48,66,.96); } html[data-theme$="night"] .rv-kpi.t-blue .ic, html[data-theme$="night"] .au-kpi .ic.blue { color: #7FB0FF; background: rgba(90,160,255,.16); } html[data-theme$="night"] .rv-kpi.t-green .ic, html[data-theme$="night"] .au-kpi .ic.green { color: #5FD39A; background: rgba(52,199,123,.16); } html[data-theme$="night"] .rv-kpi.t-violet .ic, html[data-theme$="night"] .au-kpi .ic.violet { color: #B6A4FF; background: rgba(140,110,255,.2); } html[data-theme$="night"] .rv-kpi.t-amber .ic, html[data-theme$="night"] .au-kpi .ic.amber { color: #F2B65C; background: rgba(242,182,92,.17); } html[data-theme$="night"] .au-kpi .ic.red { color: #FF8F9C; background: rgba(255,100,120,.16); } html[data-theme$="night"] .au-kpi .ic.teal { color: #4FD6CB; background: rgba(40,190,170,.16); } html[data-theme$="night"] .au-tag { color: var(--link); background: rgba(var(--accent-rgb), .16); } html[data-theme$="night"] .au-tag.watch { color: #F2B65C; background: rgba(242,182,92,.17); } html[data-theme$="night"] .au-tag.risk { color: #FF8F9C; background: rgba(255,100,120,.16); } html[data-theme$="night"] .au-line em { color: #F2B65C; background: rgba(242,182,92,.17); } html[data-theme$="night"] .au-line em.x { color: #FF8F9C; background: rgba(255,100,120,.16); } html[data-theme$="night"] .au-ev i { box-shadow: 0 0 0 3px var(--bg); } html[data-theme$="night"] .mg-sw i::after { background: #E6EBF5; } html[data-theme$="night"] .lg-bg i { background: linear-gradient(145deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05)); } html[data-theme$="night"] .rv-skeleton { opacity: .8; } html[data-theme$="night"] .rv-seg button[aria-selected="true"], html[data-theme$="night"] .rv-chip[aria-pressed="true"] { color: var(--link); } html[data-theme$="night"] .mg-tabs button[aria-selected="true"], html[data-theme$="night"] .au .mg-tabs button[aria-selected="true"], html[data-theme$="night"] .mg-side button[aria-selected="true"] { color: #fff; } html[data-theme$="night"] .au-presets button[aria-pressed="true"] { color: var(--link); } .ap-auto { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); cursor: pointer; } .ap-auto .ap-ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; font-size: 20px; color: #fff; background: linear-gradient(145deg, #3B4160, #151826); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); } .ap-auto .tx { flex: 1; min-width: 0; } .ap-auto .tx b { display: block; font-size: calc(15.5px * var(--fs)); font-weight: 700; } .ap-auto .tx small { display: block; margin-top: 2px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); line-height: 1.3; } html[data-theme="mint-night"] { --blue: #08766E; --blue-2: #0E9A8D; --accent-rgb: 14,154,141; --link: #5EEAD4; --bill: #7DB8FF; --label: #A3B8B5; --price: #B8F5EA; --title: #F6F7FB; --glow-1: rgba(20,184,166,.10); --glow-2: rgba(56,189,248,.08); --glow-3: rgba(52,211,153,.06); --hero-1: #04171A; --hero-2: #0A5A57; --hero-rgb: 10,90,87; --stat-num: #7BE8D8; --tg1: #E6FFF8; --tg2: #5EEAD4; --tg3: #7DD3FC; --bg-glow-a: rgba(20,184,166,.12); --bg-glow-b: rgba(56,189,248,.09); --chart-a: #5AA0FF; --chart-b: #FF6FB0; } html[data-theme="aurora-night"] { --blue: #5B47E0; --blue-2: #7A63F5; --accent-rgb: 122,99,245; --link: #AEA2FF; --bill: #7DB8FF; --label: #ADAAC9; --price: #D9D3FF; --title: #F6F7FB; --glow-1: rgba(122,99,245,.12); --glow-2: rgba(80,160,255,.08); --glow-3: rgba(200,100,255,.06); --hero-1: #0C0A26; --hero-2: #35299A; --hero-rgb: 53,41,154; --stat-num: #BDB2FF; --tg1: #ECE8FF; --tg2: #AEA2FF; --tg3: #7DB4FF; --bg-glow-a: rgba(122,99,245,.14); --bg-glow-b: rgba(80,160,255,.10); --chart-a: #6FA3FF; --chart-b: #FF6FB0; } html[data-theme="saffron-night"] { --blue: #C2285A; --blue-2: #E2552E; --accent-rgb: 226,85,46; --link: #FF9A7A; --bill: #7FB0FF; --label: #C9B1A8; --price: #FFD0B8; --title: #F6F7FB; --glow-1: rgba(255,106,60,.10); --glow-2: rgba(244,63,110,.12); --glow-3: rgba(255,190,80,.06); --hero-1: #240A0E; --hero-2: #701F16; --hero-rgb: 112,31,22; --stat-num: #FFB08F; --tg1: #FFE9D2; --tg2: #FF9A6A; --tg3: #FF6B8A; --bg-glow-a: rgba(255,106,60,.12); --bg-glow-b: rgba(244,63,110,.14); --chart-a: #5AA0FF; --chart-b: #FF8FB8; } .rv-menu .ico.wa { background: linear-gradient(145deg, #3AD07A, #1B9E55); } .rv-menu .ico svg { width: 20px; height: 20px; } .rv-kpi.t-blue .ic, .rv-kpi.t-green .ic, .rv-kpi.t-violet .ic, .rv-kpi.t-amber .ic { color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } html[data-theme$="night"] .rv-kpi.t-blue .ic, html[data-theme$="night"] .rv-kpi.t-green .ic, html[data-theme$="night"] .rv-kpi.t-violet .ic, html[data-theme$="night"] .rv-kpi.t-amber .ic { color: var(--link); background: rgba(var(--accent-rgb), .18); } .mg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; } .mg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .au-note { padding: 10px 14px; border-radius: 14px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .mg-cust { grid-template-columns: minmax(0, 2fr) 96px 80px 70px 110px 120px; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .mg-cust:hover:not(.mg-th) { background: rgba(var(--accent-rgb), .05); } .mg-cust .c-name { gap: 10px; } .mg-cust .c-price { color: var(--price); } .mg-tier { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(0, 1fr) auto; padding: 8px 0; min-height: 0; } .mg-tier + .mg-tier { border-top: 0; } @media (max-width: 899px) { .mg-two { grid-template-columns: 1fr; } .mg-row.mg-cust { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 12px 14px; } .mg-row.mg-cust .c-name { flex: 1 1 100%; } .mg-row.mg-cust .c-cat, .mg-row.mg-cust .c-price { flex: none; } .mg-row.mg-tier { grid-template-columns: 1fr 1fr; } .mg-row.mg-tier .c-name { grid-column: 1 / -1; } } .mg-row.mg-tier { grid-template-columns: 1fr 1fr auto; gap: 6px 10px; align-items: end; } .mg-row.mg-tier .c-name { grid-column: 1 / -1; } .mg-row.mg-tier .c-cat::before, .mg-row.mg-tier .c-price::before { content: attr(data-l); display: block; margin-bottom: 3px; font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--label); } .mg-row.mg-tier + .mg-row.mg-tier { border-top: 1px solid rgba(var(--shadow-rgb), .16); padding-top: 10px; } .fbk { padding: 28px 18px 40px; } .fbk-top { text-align: center; padding: 12px 0 18px; } .fbk-mark { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 20px; display: grid; place-items: center; font-size: 30px; font-weight: 800; color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 14px 28px rgba(var(--accent-rgb), .3); } .fbk-eyebrow { font-size: calc(13px * var(--fs)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--label); } .fbk-title { margin: 6px 0 0; font-size: calc(30px * min(var(--fs), 1.1)); font-weight: 800; letter-spacing: -.03em; color: var(--title); } .fbk-sub { margin: 8px 0 0; font-size: calc(15px * var(--fs)); font-weight: 600; color: var(--ink-2); line-height: 1.4; } .fbk-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 18px; border-radius: 28px; background: var(--raised); box-shadow: var(--sh-md); } .fbk-card.center { align-items: center; text-align: center; padding: 30px 20px; } .fbk-stars { display: flex; justify-content: center; gap: 6px; } .fbk-stars button { all: unset; box-sizing: border-box; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .fbk-stars button svg { width: 40px; height: 40px; fill: none; stroke: var(--label); stroke-width: 1.6; stroke-linejoin: round; transition: transform .15s, fill .15s; } .fbk-stars button.on svg, .fbk-stars button[aria-checked="true"] svg { fill: #F5B301; stroke: #E09A00; } .fbk-stars button:active svg { transform: scale(.9); } .fbk-stars button:focus-visible { outline: 2px solid var(--blue); } .fbk-stars.static { gap: 2px; } .fbk-stars.static i { font-style: normal; font-size: 26px; color: var(--track); } .fbk-stars.static i.on { color: #F5B301; } .fbk-label { text-align: center; font-size: calc(16px * var(--fs)); font-weight: 700; color: var(--ink-2); min-height: 24px; } .fbk-hint { margin: 0; text-align: center; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink-2); line-height: 1.4; } .fbk-hint.ok { color: var(--green); } .fbk-qs { display: flex; flex-direction: column; gap: 8px; } .fbk-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .fbk-q > span { font-size: calc(15px * var(--fs)); font-weight: 700; } .fbk-q .yn { display: flex; gap: 6px; flex: none; } .fbk-q .yn button { all: unset; box-sizing: border-box; min-width: 56px; min-height: 40px; padding: 0 14px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; font-size: calc(14px * var(--fs)); font-weight: 800; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); } .fbk-q .yn button[aria-pressed="true"] { color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .3); } .fbk-q .yn button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .fbk-go { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; min-height: 56px; border-radius: 999px; cursor: pointer; font-size: calc(17px * var(--fs)); font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--blue-2), var(--blue)); box-shadow: 0 12px 26px rgba(var(--accent-rgb), .34); } .fbk-go.sm { min-height: 46px; font-size: calc(15px * var(--fs)); margin-top: 10px; } .fbk-go:disabled { opacity: .6; cursor: default; } .fbk-go:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .5); outline-offset: 3px; } .fbk-var { padding: 14px; border-radius: 20px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .fbk-var p { margin: 0; font-size: calc(15px * var(--fs)); font-weight: 600; line-height: 1.45; color: var(--ink); user-select: all; } .fbk-skip { all: unset; align-self: center; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--label); } .fbk-check { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 38px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #3AD07A, #1B9E55); box-shadow: 0 14px 28px rgba(27,158,85,.35); } .fbqr-box { max-width: 280px; margin: 0 auto; padding: 14px; border-radius: 26px; background: #fff; box-shadow: var(--sh-md); } .fbqr-cap { margin: 12px 0 0; text-align: center; font-size: calc(18px * var(--fs)); font-weight: 800; letter-spacing: -.01em; } .fbv-item { padding: 14px 16px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); display: flex; flex-direction: column; gap: 8px; } .fbv-item.low { box-shadow: var(--sh-md), inset 4px 0 0 var(--red); } .fbv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .fbv-head small { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .fbv-stars { color: #F5B301; letter-spacing: 2px; font-size: calc(18px * var(--fs)); } .fbv-comment { margin: 0; font-size: calc(14.5px * var(--fs)); font-weight: 600; color: var(--ink); line-height: 1.4; } .fbv-foot { display: flex; flex-wrap: wrap; gap: 8px; } .fbv-foot:empty { display: none; } .fbv-bar { display: grid; grid-template-columns: 34px 1fr 30px; align-items: center; gap: 10px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); } .fbv-bar i { display: block; height: 8px; border-radius: 4px; background: var(--pressed); box-shadow: var(--sh-in-sm); overflow: hidden; } .fbv-bar u { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #F5B301, #FFD24D); text-decoration: none; } .fbv-bar b { text-align: right; font-variant-numeric: tabular-nums; } .fbk-go { width: 100%; } @media (max-width: 899px) { .mg .rv-head { padding-top: 14px; } .mg .rv-title.sm { font-size: calc(24px * min(var(--fs), 1.05)); } .mg-tabs { gap: 6px; padding: 2px 16px 8px; margin-top: 4px; } .mg-tabs button { min-height: 34px; padding: 0 14px; font-size: calc(13px * var(--fs)); } .mg-body { margin-top: 4px; } .mg-head { gap: 8px; margin-bottom: 8px; } .mg-head h2 { font-size: calc(18px * min(var(--fs), 1.05)); } .mg-head p { font-size: calc(12px * var(--fs)); } .mg-actions { gap: 8px; } .mg-search .rv-input { min-height: 38px; font-size: calc(14px * var(--fs)); padding-top: 0; padding-bottom: 0; } .mg-status { padding: 3px; } .mg-status button { min-height: 30px; font-size: calc(12.5px * var(--fs)); } .mg .rv-btn.sm { min-height: 38px; padding: 0 16px; font-size: calc(13.5px * var(--fs)); } .mg .rv-btn.sm svg { width: 16px; height: 16px; } .mg-side { padding: 5px; gap: 4px; border-radius: 16px; } .mg-side button { min-height: 32px; padding: 0 12px; border-radius: 10px; font-size: calc(12.5px * var(--fs)); } .mg-side button small { font-size: calc(10.5px * var(--fs)); } .mg-table { border-radius: 16px; } .mg-row { padding: 9px 12px; gap: 6px 10px; } .mg-row .rv-input { min-height: 38px; font-size: calc(14px * var(--fs)); } .mg-row .c-cat, .mg-row .c-price { font-size: calc(12px * var(--fs)); } .mg-row .c-cat::before, .mg-row .c-price::before, .mg-row .c-sw::before { font-size: calc(9.5px * var(--fs)); margin-bottom: 2px; } .mg-row.mg-items { gap: 4px 12px; } .mg-row.mg-items .c-name { gap: 8px; } .mg-row.mg-items .c-name b { font-size: calc(15px * var(--fs)); font-weight: 700; } .mg-row.mg-items .c-name small { font-size: calc(11px * var(--fs)); } .mg-row.mg-items .c-price { font-size: calc(14.5px * var(--fs)); } .mg-row.mg-items .c-cat { margin: -2px 0 0 24px; font-size: calc(11.5px * var(--fs)); } .mg-row.mg-items .c-sw { gap: 6px; } .mg-row.mg-items .c-sw::before { font-size: calc(10px * var(--fs)); letter-spacing: .04em; } .mg-row.mg-items .c-act { gap: 6px; } .mg-row.mg-items .c-act .rv-btn { min-height: 30px; padding: 0 12px; font-size: calc(12.5px * var(--fs)); box-shadow: none; background: rgba(var(--accent-rgb), .12); color: var(--link, var(--blue)); } .mg-row.mg-items .mg-ib { width: 30px; height: 30px; font-size: 14px; } .mg-row.mg-items .mg-ib svg { width: 14px; height: 14px; } .mg-ib { width: 34px; height: 34px; } .mg-ib svg { width: 15px; height: 15px; } .mg-sw { width: 38px; height: 22px; } .mg-sw i::after { top: 2px; left: 2px; width: 18px; height: 18px; } .mg-sw input:checked + i::after { transform: translateX(16px); } .mg-sw i { box-shadow: none; } .mg-add { padding: 8px; gap: 8px; border-radius: 16px; } .mg-add .rv-input { min-height: 40px; font-size: calc(14px * var(--fs)); } .mg-card { padding: 12px; } .mg-row.mg-cust { padding: 10px 12px; gap: 2px 12px; } .mg-row.mg-cust .c-name { gap: 10px; } .mg-row.mg-cust .c-name b { font-size: calc(15px * var(--fs)); } .mg-row.mg-cust .c-name small { font-size: calc(11.5px * var(--fs)); } .mg-row.mg-cust .au-av { width: 30px; height: 30px; font-size: calc(11px * var(--fs)); } .mg-row.mg-cust .c-cat, .mg-row.mg-cust .c-price { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .mg-row.mg-cust .c-price { color: var(--price); font-weight: 800; } .mg-row.mg-cust .c-cat::before, .mg-row.mg-cust .c-price::before { display: inline; margin: 0 4px 0 0; font-size: calc(10px * var(--fs)); font-weight: 700; letter-spacing: .03em; color: var(--label); text-transform: uppercase; } .mg-row.mg-cust .c-price::before { content: attr(data-l); } .mg-row.mg-cust .rv-pill { height: 20px; font-size: calc(10.5px * var(--fs)); padding: 0 8px; } .mg .au-kpi { padding: 8px 10px; } .mg .au-filters .rv-chip { min-height: 32px; padding: 0 12px; font-size: calc(12.5px * var(--fs)); } .mg .au-sel { min-height: 38px; font-size: calc(13px * var(--fs)); } .mg .au-export { min-height: 36px; padding: 0 12px; font-size: calc(12.5px * var(--fs)); } #cust-sheet h2 { font-size: calc(18px * var(--fs)); } #cust-sheet .rv-field span { font-size: calc(11.5px * var(--fs)); } #cust-sheet .rv-input { min-height: 40px; font-size: calc(14px * var(--fs)); } #cust-sheet .rv-btn { min-height: 42px; font-size: calc(14px * var(--fs)); } } @media (max-width: 899px) { .mg-row.mg-cust.mg-th { display: none; } .mg-row.mg-cust .c-cat::before, .mg-row.mg-cust .c-price::before { display: none; } .mg-row.mg-cust .c-price::after { content: ' pts'; font-weight: 600; color: var(--ink-3); } .mg-row.mg-cust [data-l="Last visit"]::before { content: 'Last visit '; display: inline; margin: 0; font-size: inherit; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--ink-3); } .mg-row.mg-cust { align-items: center; } .mg-row.mg-cust [data-l="Tier"] { order: 0; } } .mg:not(.au) .rv-head { align-items: center; padding: 14px 18px 4px; gap: 12px; } .mg:not(.au) .rv-head .rv-icon-btn { width: 40px; height: 40px; flex: none; } .mg:not(.au) .rv-head .rv-title { font-size: calc(26px * min(var(--fs), 1.05)); line-height: 1.1; } .mg:not(.au) .rv-head .rv-eyebrow { margin-top: 2px !important; font-size: calc(12px * var(--fs)); letter-spacing: .02em; } .mg:not(.au) .mg-tabs { position: sticky; top: 0; z-index: 8; display: flex; gap: 22px; overflow-x: auto; padding: 4px 18px 0; margin: 6px 0 0; background: rgba(var(--glass-rgb), .86); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(var(--shadow-rgb), .18); scrollbar-width: none; scroll-snap-type: x proximity; } .mg:not(.au) .mg-tabs::-webkit-scrollbar { display: none; } .mg:not(.au) .mg-tabs button { position: relative; flex: none; min-height: 42px; padding: 0 2px; border-radius: 0; background: none; box-shadow: none; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink-3); scroll-snap-align: start; white-space: nowrap; } .mg:not(.au) .mg-tabs button[aria-selected="true"] { color: var(--link, var(--blue)); background: none; box-shadow: none; } .mg:not(.au) .mg-tabs button[aria-selected="true"]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, var(--blue-2), var(--blue)); } @media (min-width: 900px) { .mg:not(.au) .rv-head { padding: 28px 32px 6px; } .mg:not(.au) .mg-tabs { padding: 4px 32px 0; gap: 28px; } } .cu-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .cu-top h2 { margin: 0; font-size: calc(20px * min(var(--fs), 1.08)); font-weight: 800; letter-spacing: -.02em; color: var(--title); } .cu-top p { margin: 2px 0 0; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .cu-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; } .cu-cell { padding: 12px 10px; text-align: center; min-width: 0; } .cu-cell + .cu-cell { border-left: 1px solid rgba(var(--shadow-rgb), .16); } .cu-cell b { display: block; font-size: calc(17px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; } .cu-cell span { display: block; margin-top: 2px; font-size: calc(10.5px * var(--fs)); font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--label); } .cu-bar { display: flex; gap: 8px; margin: 12px 0 8px; } .cu-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 14px; background: var(--pressed); box-shadow: var(--sh-in-sm); color: var(--label); } .cu-search svg { flex: none; width: 18px; height: 18px; } .cu-search .rv-input { all: unset; flex: 1; min-width: 0; min-height: 42px; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink); } .cu-search .rv-input::placeholder { color: var(--ink-3); opacity: .8; } .cu-sort { flex: none; width: auto; min-height: 42px; padding: 0 12px; font-size: calc(13px * var(--fs)); border-radius: 14px; } .cu-chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; } .cu-chips::-webkit-scrollbar { display: none; } .cu-chips button { all: unset; box-sizing: border-box; flex: none; min-height: 32px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: 999px; font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); cursor: pointer; } .cu-chips button[aria-pressed="true"] { color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 5px 12px rgba(var(--accent-rgb), .3); } .cu-chips button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .mg-cust { grid-template-columns: minmax(0, 2fr) 80px 96px 110px 110px 130px; align-items: center; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } .mg-cust .c-meta { display: contents; } .mg-cust .c-name { order: 1; } .mg-cust .c-tier { order: 2; } .mg-cust .c-pts { order: 3; } .mg-cust .c-visits { order: 4; } .mg-cust .c-spent { order: 5; } .mg-cust .c-last { order: 6; } .mg-cust .c-pts { text-align: right; } .mg-cust .c-pts b { font-size: calc(17px * var(--fs)); font-weight: 800; color: var(--price); font-variant-numeric: tabular-nums; } .mg-cust .c-pts small { display: none; } .mg-cust .c-tier { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 800; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } .mg-cust .c-tier.none { color: var(--ink-3); background: var(--pressed); } .mg-cust .c-visits, .mg-cust .c-spent, .mg-cust .c-last { font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .mg-cust.mg-th .c-pts, .mg-cust.mg-th .c-tier, .mg-cust.mg-th .c-visits, .mg-cust.mg-th .c-spent, .mg-cust.mg-th .c-last { padding: 0; background: none; font-size: inherit; font-weight: inherit; color: inherit; } @media (max-width: 899px) { .cu-stats { grid-template-columns: repeat(2, 1fr); } .cu-cell:nth-child(3) { border-left: 0; } .cu-cell:nth-child(n+3) { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .mg-row.mg-cust { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 12px 14px; align-items: center; } .mg-row.mg-cust.mg-th { display: none; } .mg-row.mg-cust .c-name { grid-column: 1; order: 0; gap: 10px; } .mg-row.mg-cust .c-pts { grid-column: 2; order: 0; text-align: right; line-height: 1.1; } .mg-row.mg-cust .c-pts b { font-size: calc(18px * var(--fs)); display: block; } .mg-row.mg-cust .c-pts small { display: block; font-size: calc(10px * var(--fs)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label); } .mg-row.mg-cust .c-meta { grid-column: 1 / -1; order: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding-left: 42px; } .mg-row.mg-cust .c-tier { padding: 2px 9px; font-size: calc(10.5px * var(--fs)); } .mg-row.mg-cust .c-visits, .mg-row.mg-cust .c-spent, .mg-row.mg-cust .c-last { font-size: calc(11.5px * var(--fs)); color: var(--ink-3); } .mg-row.mg-cust .c-spent { color: var(--ink-2); font-weight: 700; } .mg-row.mg-cust .c-cat::before, .mg-row.mg-cust .c-cat::after, .mg-row.mg-cust .c-price::before, .mg-row.mg-cust .c-price::after { content: none; display: none; } .cu-top h2 { font-size: calc(18px * min(var(--fs), 1.05)); } } .wa { max-width: 1240px; } @media (min-width: 900px) { .rv-screen.no-tabs.wa { max-width: 820px; width: 100%; } } .wa-bubble { padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: rgba(37, 211, 102, .13); box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .25); font-size: calc(14px * var(--fs)); font-weight: 500; line-height: 1.45; color: var(--ink); white-space: pre-wrap; word-break: break-word; } .wa-bubble[hidden] { display: none; } .wa-chip { all: unset; box-sizing: border-box; padding: 4px 10px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--label); background: var(--pressed); cursor: pointer; } .wa-chip:hover { color: var(--link, var(--blue)); } .wa-chip:focus-visible { outline: 2px solid var(--blue); } .wa-url { padding: 10px 12px; border-radius: 12px; background: var(--pressed); box-shadow: var(--sh-in-sm); font-size: calc(12px * var(--fs)); font-weight: 600; word-break: break-all; user-select: all; color: var(--ink-2); } .wa-item { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); } .wa-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .wa-head b { font-size: calc(15px * var(--fs)); font-weight: 700; } .wa .rv-textarea, .wa textarea.rv-input { resize: vertical; font: inherit; } .nav-badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #3AD07A, #1B9E55); } .wa-send { text-decoration: none; background: linear-gradient(145deg, #3AD07A, #1B9E55) !important; box-shadow: 0 8px 18px rgba(27,158,85,.32) !important; } @media (min-width: 900px) { .rv-screen.no-tabs.st { max-width: 920px; width: 100%; } } .st-badge { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-style: normal; font-size: 11px; font-weight: 800; color: #fff; background: var(--red); vertical-align: 1px; } .stk-list { display: flex; flex-direction: column; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; } .stk-row { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .stk-row + .stk-row { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .stk-row:hover { background: rgba(var(--accent-rgb), .05); } .stk-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; } .stk-row.off { opacity: .55; } .stk-row .l { flex: 1; min-width: 0; } .stk-row .l b { display: block; font-size: calc(15.5px * var(--fs)); font-weight: 700; letter-spacing: -.01em; } .stk-row .l small { display: block; margin-top: 2px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stk-row .r { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .stk-row .r b { font-size: calc(16px * var(--fs)); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--price); } .stk-row .r b.neg, .stk-hero b.neg { color: var(--red); } .stk-row .r small { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .stk-hero { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; } .stk-hero b { font-size: calc(34px * var(--fs)); font-weight: 800; letter-spacing: -.03em; color: var(--price); } .stk-hero span { font-weight: 700; color: var(--ink-2); } .stk-hero small { flex: 1 1 100%; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .stk-link { display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .stk-link .rv-input { min-height: 42px; font-size: calc(14px * var(--fs)); padding-top: 0; padding-bottom: 0; } @media (max-width: 899px) { .stk-row { padding: 10px 12px; gap: 10px; } .stk-row .l b { font-size: calc(15px * var(--fs)); } .stk-row .l small { font-size: calc(11.5px * var(--fs)); } .stk-row .r b { font-size: calc(15px * var(--fs)); } .st .cu-stats { grid-template-columns: repeat(2, 1fr) !important; } .st .cu-cell:nth-child(3) { border-left: 0; } .st .cu-cell:nth-child(n+3) { border-top: 1px solid rgba(var(--shadow-rgb), .16); } } .st .rv-head { align-items: center !important; padding-bottom: 2px; } .st .rv-head .rv-icon-btn { width: 40px; height: 40px; flex: none; } .mg.st:not(.au) .mg-tabs { position: static; display: flex; gap: 4px; margin: 10px 18px 0; padding: 4px; border-bottom: 0; overflow: visible; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); -webkit-backdrop-filter: none; backdrop-filter: none; } .mg.st:not(.au) .mg-tabs button { flex: 1; justify-content: center; min-height: 42px; padding: 0 12px; border-radius: 12px; font-size: calc(14.5px * var(--fs)); font-weight: 700; color: var(--ink-3); background: none; box-shadow: none; } .mg.st:not(.au) .mg-tabs button[aria-selected="true"] { color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); } .mg.st:not(.au) .mg-tabs button[aria-selected="true"]::after { display: none; } .st .mg-body { margin-top: 12px; } .stk-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; } .stk-stat { padding: 10px 8px; text-align: center; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); min-width: 0; } .stk-stat b { display: block; font-size: calc(18px * var(--fs)); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; color: var(--price); font-variant-numeric: tabular-nums; white-space: nowrap; } .stk-stat span { display: block; margin-top: 3px; font-size: calc(10.5px * var(--fs)); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--label); } .stk-stat.warn b { color: var(--amber); } .stk-stat.bad b { color: var(--red); } .stk-bar { display: flex; gap: 10px; align-items: center; } .stk-bar .cu-search { flex: 1; } .stk-add { all: unset; flex: none; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 15px; cursor: pointer; color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .32); } .stk-add svg { width: 22px; height: 22px; } .stk-add:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .5); outline-offset: 2px; } .stk-filters { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .stk-filters .cu-chips { flex: 1; min-width: 0; } .stk-link-btn { all: unset; flex: none; padding: 7px 14px; border-radius: 999px; cursor: pointer; font-size: calc(12.5px * var(--fs)); font-weight: 800; color: var(--link, var(--blue)); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .5); } .stk-link-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .stk-help { margin: -2px 2px 0; font-size: calc(12px * var(--fs)); font-weight: 600; line-height: 1.4; color: var(--ink-3); } .stk-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .stk-card { all: unset; box-sizing: border-box; display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 10px; border-radius: 18px; cursor: pointer; background: var(--raised); box-shadow: var(--sh-md); position: relative; overflow: hidden; -webkit-tap-highlight-color: transparent; } .stk-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--green-dot, var(--green)); } .stk-card.low::before { background: var(--amber); } .stk-card.out::before { background: var(--red); } .stk-card.off { opacity: .55; } .stk-card:hover { box-shadow: var(--sh-md), 0 0 0 1.5px rgba(var(--accent-rgb), .35); } .stk-card:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .stk-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-left: 6px; } .stk-card .l { min-width: 0; flex: 1; } .stk-card .l b { display: block; font-size: calc(16px * var(--fs)); font-weight: 700; letter-spacing: -.01em; } .stk-card .l small { display: block; margin-top: 2px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .stk-card .r { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .stk-card .r b { font-size: calc(20px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--price); font-variant-numeric: tabular-nums; line-height: 1.1; } .stk-card .r b em { font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-3); letter-spacing: 0; } .stk-card .r b.neg { color: var(--red); } .stk-card .bar { margin-left: 6px; height: 5px; border-radius: 3px; background: var(--pressed); box-shadow: var(--sh-in-sm); overflow: hidden; } .stk-card .bar i { display: block; height: 100%; border-radius: 3px; background: var(--green-dot, var(--green)); } .stk-card.low .bar i { background: var(--amber); } .stk-card.out .bar i { background: var(--red); } .stk-card .foot { display: flex; justify-content: space-between; gap: 10px; padding-left: 6px; font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--ink-3); } @media (min-width: 900px) { .rv-screen.no-tabs.st { max-width: 980px; } .mg.st:not(.au) .mg-tabs { max-width: 360px; margin-left: 32px; } .stk-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 899px) { .st .rv-head { padding: 14px 18px 0; } } @media (min-width: 900px) { .rv-screen.no-tabs.ins { max-width: none; width: 100%; } } .ins .mg-body { padding-bottom: 24px; } .ins-periods { padding: 0 0 12px; } .ins-periods button { all: unset; box-sizing: border-box; flex: none; min-height: 36px; padding: 0 16px; display: inline-flex; align-items: center; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); cursor: pointer; } .ins-periods button[aria-pressed="true"] { color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 5px 12px rgba(var(--accent-rgb), .3); } .ins-periods button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ins-top { display: grid; grid-template-columns: 1fr; gap: 14px; } .ins-two-col { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 14px; } .ins-block { margin-top: 14px; } .ins-bh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; } .ins-bh h2 { margin: 0; font-size: calc(18px * var(--fs)); font-weight: 800; letter-spacing: -.02em; color: var(--title); } .ins-card { padding: 16px 18px; } .ins .ins-two-col ~ .ins-card { margin-top: 14px; } .ins-title { margin: 0 0 10px; font-size: calc(15.5px * var(--fs)); font-weight: 800; letter-spacing: -.01em; } .ins-sub { margin: -4px 0 10px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .ins-big { font-size: calc(36px * min(var(--fs), 1.1)); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; color: var(--price); font-variant-numeric: tabular-nums; } .ins-prev { margin: 4px 0 10px; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink-3); } .ins-delta { display: inline-flex; padding: 6px 14px; border-radius: 999px; font-size: calc(13.5px * var(--fs)); font-weight: 800; color: var(--ink-2); background: var(--pressed); } .ins-delta.up { color: var(--green); background: rgba(52, 199, 123, .16); } .ins-delta.down { color: var(--red); background: rgba(224, 70, 90, .14); } .ins-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; } .ins-grid4 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .ins-mini { padding: 10px 12px; border-radius: 14px; background: var(--pressed); box-shadow: var(--sh-in-sm); min-width: 0; } .ins-mini span { display: block; font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--label); } .ins-mini b { display: block; margin-top: 2px; font-size: calc(19px * var(--fs)); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; } .ins-mini small { display: block; margin-top: 2px; font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--ink-3); } .ins-channels { display: grid; grid-template-columns: 1fr; gap: 12px; } .ins-chead { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ins-chead .ins-title { margin: 0; } .ins-chead .ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } .ins-chead .ico svg { width: 18px; height: 18px; } .ins-ch.idle .ins-mini b { color: var(--ink-3); } .ins-fee { margin-top: 10px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); } .ins-donut { display: flex; align-items: center; gap: 18px; } .ins-donut .ring { position: relative; flex: none; width: 124px; height: 124px; } .ins-donut .ring svg { width: 100%; height: 100%; display: block; } .ins-donut .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 14px; } .ins-donut .mid b { font-size: calc(15px * var(--fs)); font-weight: 800; letter-spacing: -.02em; } .ins-donut .mid span { font-size: calc(10px * var(--fs)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--label); } .ins-donut .legend { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; } .ins-donut .lg { display: flex; align-items: center; gap: 8px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .ins-donut .lg i { flex: none; width: 10px; height: 10px; border-radius: 50%; } .ins-donut .lg span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ins-donut .lg b { font-variant-numeric: tabular-nums; color: var(--ink); } .ins-hbar { margin-bottom: 10px; } .ins-hbar > div { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; font-size: calc(13px * var(--fs)); font-weight: 700; } .ins-hbar > div span { color: var(--ink-2); } .ins-hbar i { display: block; height: 8px; border-radius: 4px; background: var(--pressed); box-shadow: var(--sh-in-sm); overflow: hidden; } .ins-hbar u { display: block; height: 100%; border-radius: 4px; text-decoration: none; } .ins-table { display: flex; flex-direction: column; font-size: calc(13.5px * var(--fs)); } .ins-table .tr { display: grid; grid-template-columns: 1.3fr 1.1fr .6fr .9fr 1.1fr; gap: 10px; padding: 10px 4px; align-items: center; } .ins-table .tr + .tr { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .ins-table .th { font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--label); } .ins-table .n { text-align: right; font-variant-numeric: tabular-nums; } .ins-table .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; } .ins-chart { width: 100%; color: var(--ink); } .ins-chart svg { width: 100%; height: auto; display: block; } .ins-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 6px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); } .ins-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; } @media (min-width: 900px) { .ins-top { grid-template-columns: 1fr 1.1fr 1.3fr; align-items: stretch; } .ins-channels { grid-template-columns: repeat(3, 1fr); } .ins-two-col { grid-template-columns: 1fr 1fr; } } @media (min-width: 1280px) { .ins-channels { grid-template-columns: repeat(5, 1fr); } .ins-ch .ins-grid4 { grid-template-columns: 1fr; } } @media (max-width: 899px) { .ins-card { padding: 14px; } .ins-big { font-size: calc(30px * min(var(--fs), 1.05)); } .ins-mini b { font-size: calc(17px * var(--fs)); } .ins-table .tr { grid-template-columns: 1.2fr 1fr .5fr .9fr; } .ins-table .tr span:nth-child(5) { display: none; } .ins-donut .ring { width: 104px; height: 104px; } } .ins-top > .ins-card:first-child .ins-two { grid-template-columns: 1fr; } @media (min-width: 900px) { .ins-top { grid-template-columns: 1.15fr 1fr 1.35fr; } } @media (max-width: 899px) { .ins-ch .ins-grid4 { grid-template-columns: repeat(4, 1fr); gap: 6px; } .ins-ch .ins-mini { padding: 8px 8px; border-radius: 12px; } .ins-ch .ins-mini span { font-size: calc(10px * var(--fs)); } .ins-ch .ins-mini b { font-size: calc(13.5px * var(--fs)); } .ins-ch.ins-card { padding: 12px; } .ins-chead { margin-bottom: 8px; } .ins-channels { gap: 10px; } } .rs-wrap { display: grid; gap: 14px; } .rs-dates { display: grid; gap: 10px; } .rs-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 0 -2px; scrollbar-width: none; } .rs-strip::-webkit-scrollbar { display: none; } .rs-day { all: unset; box-sizing: border-box; cursor: pointer; flex: none; width: 64px; padding: 9px 4px 8px; border-radius: 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; background: var(--raised); box-shadow: var(--sh-sm); } .rs-day small { font-size: calc(10.5px * var(--fs)); font-weight: 700; color: var(--ink-2); letter-spacing: .02em; } .rs-day b { font-size: calc(22px * var(--fs)); font-weight: 800; letter-spacing: -.04em; line-height: 1.1; font-family: var(--display, inherit); } .rs-day em { font-style: normal; font-size: calc(10.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .rs-day[aria-pressed="true"] { color: #fff; background: var(--blue); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .3); } .rs-day[aria-pressed="true"] small, .rs-day[aria-pressed="true"] em { color: rgba(255,255,255,.85); } .rs-day .dot { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); } .rs-day[aria-pressed="true"] .dot { background: #fff; } .rs-day:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .rs-sum { display: flex; align-items: baseline; gap: 22px; padding: 14px 16px; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); } .rs-sum b { font-family: var(--display, inherit); font-weight: 800; font-size: calc(30px * var(--fs)); letter-spacing: -.05em; line-height: 1; } .rs-sum span { margin-left: 6px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rs-sum small { margin-left: auto; font-size: calc(12.5px * var(--fs)); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--label); } .rs-list { display: grid; gap: 12px; } .rs-card { display: flex; gap: 14px; padding: 14px 14px 14px 0; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); position: relative; overflow: hidden; } .rs-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #7C5CE0; } .rs-card.soon::before { background: #F0A02B; } .rs-card.late::before { background: var(--red); } .rs-card.seated::before { background: var(--green-dot); } .rs-card.cancelled, .rs-card.no_show { opacity: .6; } .rs-card.cancelled::before, .rs-card.no_show::before { background: var(--track); } .rs-card .tm { flex: none; width: 82px; padding-left: 18px; display: flex; flex-direction: column; gap: 2px; } .rs-card .tm b { font-family: var(--display, inherit); font-weight: 800; font-size: calc(17px * var(--fs)); letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; } .rs-card .tm small { font-size: calc(11px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rs-card .bd { flex: 1; min-width: 0; display: grid; gap: 8px; } .rs-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .rs-card .nm { font-family: var(--display, inherit); font-weight: 750; font-size: calc(17px * var(--fs)); letter-spacing: -.025em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-pill { flex: none; font-size: calc(11px * var(--fs)); font-weight: 750; padding: 4px 10px; border-radius: 999px; color: #5B3FC4; background: rgba(124,92,224,.14); } .rs-pill.soon { color: #A25A06; background: rgba(240,160,43,.2); } .rs-pill.late { color: var(--red); background: rgba(179,38,30,.12); } .rs-pill.seated { color: #11763F; background: rgba(37,168,98,.15); } .rs-pill.off { color: var(--ink-2); background: rgba(var(--shadow-rgb), .14); } .rs-card .meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rs-card .meta span { display: inline-flex; align-items: center; gap: 5px; } .rs-card .meta svg { width: 14px; height: 14px; } .rs-card .meta .warn { color: var(--amber); font-weight: 700; } .rs-card .nt { margin: 0; font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); padding: 7px 10px; border-radius: 10px; background: rgba(var(--shadow-rgb), .08); } .rs-card .acts { display: flex; flex-wrap: wrap; gap: 8px; } .rs-card .acts .rv-btn { min-height: 38px; padding: 0 14px; font-size: calc(13px * var(--fs)); } .rs-card .acts .wa { color: #128C7E; } .rs-empty { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 36px 16px; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-sm); } .rs-empty b { font-family: var(--display, inherit); font-size: calc(17px * var(--fs)); letter-spacing: -.02em; } .rs-empty span { font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); } .rs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: end; } .rs-party { display: grid; gap: 4px; } .rs-party > span { font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); } .rs-party .st { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 0 6px; border-radius: 14px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .rs-party .st button { all: unset; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; cursor: pointer; font-size: 22px; font-weight: 700; color: var(--link, var(--blue)); } .rs-party .st .n { font-family: var(--display, inherit); font-size: calc(20px * var(--fs)); font-weight: 800; } .rs-tables { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-height: 220px; overflow-y: auto; padding: 2px; } .rs-tb { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--raised); box-shadow: var(--sh-sm); min-width: 0; } .rs-tb b { font-family: var(--display, inherit); font-weight: 800; letter-spacing: -.03em; } .rs-tb small { font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rs-tb.small { opacity: .7; } .rs-tb.held { opacity: .45; cursor: not-allowed; } .rs-tb[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue); background: rgba(var(--accent-rgb), .1); } .rs-tb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (min-width: 900px) { .rs-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-dates { grid-template-columns: 1fr 200px; align-items: center; } } .rs-hint { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); padding: 0 2px; } .rs-hint.ok { color: #11763F; } .rs-hint.short { color: var(--amber); }
@font-face { font-family: 'Bricolage'; src: url('../fonts/bricolage-latin.woff2') format('woff2'); font-weight: 500 800; font-display: swap; } @font-face { font-family: 'InterV'; src: url('../fonts/inter-latin.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; } @font-face { font-family: 'InterV'; src: url('../fonts/inter-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } html[data-ui="v2"] { --font: 'InterV', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --display: 'Bricolage', 'InterV', system-ui, sans-serif; --r-card: 18px; --r-ctl: 14px; } html[data-ui="v2"]:not([data-theme$="night"]) { --ink: #17181C; --ink-2: #62666F; --ink-3: #3C3F47; --c0: #FFFFFF; --c1: #FFFFFF; --c2: #FFFFFF; --c3: #FBFAF8; --c4: #FFFFFF; --c5: #F4F1EC; --raised: #FFFFFF; --raised-hi: #FFFFFF; --raised-btn: #FFFFFF; --pressed: #F1EEE8; --track: #ECE8E1; --skel: #F1EEE8; --ring: none; --ring-soft: transparent; --hi: transparent; --hi-2: transparent; --shadow-rgb: 40,30,15; --sh-lg: 0 0 0 1px rgba(40,30,15,.07), 0 10px 28px rgba(40,30,15,.07); --sh: 0 0 0 1px rgba(40,30,15,.07), 0 8px 22px rgba(40,30,15,.06); --sh-md: 0 0 0 1px rgba(40,30,15,.07), 0 4px 14px rgba(40,30,15,.05); --sh-sm: 0 0 0 1px rgba(40,30,15,.08), 0 1px 3px rgba(40,30,15,.06); --sh-in: inset 0 0 0 1px rgba(40,30,15,.08); --sh-in-md: inset 0 0 0 1px rgba(40,30,15,.08); --sh-in-sm: inset 0 0 0 1px rgba(40,30,15,.08); --sh-seg: 0 0 0 1px rgba(40,30,15,.08), 0 1px 3px rgba(40,30,15,.08); --glow-a: .22; --glow-1: transparent; --glow-2: transparent; --glow-3: transparent; } html[data-ui="v2"][data-theme="classic"] { --bg: #F8F5F0; --page-desk: #EFEAE2; --glass-rgb: 248,245,240; --blue: #E5560B; --blue-2: #FF8A3D; --accent-rgb: 229,86,11; --link: #C2460A; --bill: #17181C; --title: #17181C; --label: #6B6358; --price: #17181C; --green: #11763F; --green-dot: #25A862; --amber: #A25A06; --red: #B3261E; --tile-ordered: #FDEBD3; --tile-bill: #E9E6F7; --tile-late: #FBDADA; --chart-a: #E5560B; --chart-b: #3B4CCA; --hero-1: #17181C; --hero-2: #3A2A1E; --hero-rgb: 23,24,28; --stat-num: #E5560B; } html[data-ui="v2"] body { font-family: var(--font); font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; letter-spacing: -.005em; } html[data-ui="v2"] .rv-title, html[data-ui="v2"] .rv-title.sm, html[data-ui="v2"] .lg-title { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; } html[data-ui="v2"] .rv-eyebrow { font-weight: 600; letter-spacing: .01em; } html[data-ui="v2"] .rv-section > h2 { font-size: calc(12px * var(--fs)); letter-spacing: .1em; } html[data-ui="v2"] .rv-card h3, html[data-ui="v2"] .rv-tile .name { font-family: var(--display); letter-spacing: -.02em; } html[data-ui="v2"] .rv-card, html[data-ui="v2"] .rv-menu, html[data-ui="v2"] .au-list, html[data-ui="v2"] .mg-table { border-radius: var(--r-card); } html[data-ui="v2"] .rv-card { padding: 16px; } html[data-ui="v2"] .rv-menu > * + * { border-top: 1px solid rgba(var(--shadow-rgb), .1); } html[data-ui="v2"] .rv-menu .ico { border-radius: 11px; background: color-mix(in srgb, var(--blue) 12%, transparent); color: var(--link, var(--blue)); box-shadow: none; } html[data-ui="v2"] .rv-menu .tx b { font-weight: 650; } html[data-ui="v2"] .rv-btn { border-radius: var(--r-ctl); min-height: 50px; font-weight: 650; letter-spacing: -.005em; background: var(--blue); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 16px rgba(var(--accent-rgb), .26); } html[data-ui="v2"] .rv-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.2) inset, 0 2px 6px rgba(var(--accent-rgb), .22); } html[data-ui="v2"] .rv-btn.sm { min-height: 42px; border-radius: 12px; } html[data-ui="v2"] .rv-btn.soft { background: var(--raised); color: var(--ink); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-btn.soft { background: #fff; } html[data-ui="v2"] .rv-btn.danger, html[data-ui="v2"] .rv-btn.soft.danger { color: var(--red); } html[data-ui="v2"] .rv-icon-btn { box-shadow: var(--sh-sm); background: var(--raised); } html[data-ui="v2"] .rv-input { border-radius: var(--r-ctl); background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .16); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-input { background: #FFFFFF; } html[data-ui="v2"] .rv-input:focus { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(var(--accent-rgb), .14); outline: none; } html[data-ui="v2"] .rv-seg { border-radius: 14px; box-shadow: none; background: var(--track); } html[data-ui="v2"] .rv-seg button { border-radius: 11px; } html[data-ui="v2"] .rv-seg button[aria-selected="true"] { background: var(--raised-hi); box-shadow: var(--sh-seg); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-seg button[aria-selected="true"] { background: #fff; } html[data-ui="v2"] .rv-pill { border-radius: 999px; } html[data-ui="v2"] .mg-tabs button { border-radius: 12px; box-shadow: var(--sh-sm); } html[data-ui="v2"] .mg-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: none; } html[data-ui="v2"][data-theme$="night"] .mg-tabs button[aria-selected="true"] { background: var(--blue); } html[data-ui="v2"] .rv-tabbar { box-shadow: 0 -1px 0 rgba(var(--shadow-rgb), .12); border-radius: 0; } html[data-ui="v2"] .rv-tabbar [aria-current="page"] { font-weight: 700; } html[data-ui="v2"] { --tabbar-h: 58px; } html[data-ui="v2"] .rv-tabbar { padding: 5px 8px calc(5px + env(safe-area-inset-bottom)); } html[data-ui="v2"] .rv-tabbar a, html[data-ui="v2"] .rv-tabbar button { gap: 2px; border-radius: 14px; -webkit-tap-highlight-color: transparent; } html[data-ui="v2"] .rv-tabbar .rv-icon { width: 22px; height: 22px; } html[data-ui="v2"] .rv-tabbar [aria-current="page"] { background: rgba(var(--accent-rgb), .12); } html[data-ui="v2"] .rv-hero { border-radius: 22px; background: linear-gradient(135deg, var(--hero-1), var(--hero-2)); box-shadow: 0 14px 34px rgba(var(--hero-rgb), .28); } html[data-ui="v2"] .rv-hero .big { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; } html[data-ui="v2"] .rv-stat b, html[data-ui="v2"] .au-kpi b, html[data-ui="v2"] .rv-kpi b { font-family: var(--display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html[data-ui="v2"] .rv-sidebar-brand .logo { background: none; box-shadow: none; border-radius: 10px; overflow: hidden; } html[data-ui="v2"] .rv-sidebar-brand .brand-name { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; } html[data-ui="v2"] .rv-tile { position: relative; border-radius: 16px; overflow: hidden; padding-left: 16px; } html[data-ui="v2"] .rv-tile::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--green-dot); } html[data-ui="v2"] .rv-tile.ordered::before { background: #F0A02B; } html[data-ui="v2"] .rv-tile.bill::before { background: var(--blue); } html[data-ui="v2"] .rv-tile.late::before { background: var(--red); } html[data-ui="v2"] .rv-tile.free { box-shadow: var(--sh-sm); } html[data-ui="v2"] .rv-tile.ordered, html[data-ui="v2"] .rv-tile.bill, html[data-ui="v2"] .rv-tile.late { box-shadow: var(--sh-sm); } html[data-ui="v2"] .rv-tile .name { font-weight: 800; letter-spacing: -.03em; } .rv-sub { margin: 6px 0 0; font-size: calc(13.5px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.35; } @media (max-width: 899px) { html[data-ui="v2"] .rv-screen.no-tabs, html[data-ui="v2"] .rv-screen.no-tabs.mg, html[data-ui="v2"] .rv-screen.no-tabs.wa, html[data-ui="v2"] .rv-screen.no-tabs.st, html[data-ui="v2"] .rv-screen.no-tabs.ins { max-width: 480px; margin-left: auto; margin-right: auto; width: 100%; } } @media (min-width: 900px) { html[data-ui="v2"] .rv-sidebar.sb2 { gap: 0; padding: 20px 12px calc(14px + env(safe-area-inset-bottom)); } html[data-ui="v2"] .sb2 .rv-sidebar-brand { padding: 0 8px 16px; margin-bottom: 14px; } html[data-ui="v2"] .sb2 a { gap: 11px; min-height: 36px; padding: 0 12px; border-radius: 12px; font-size: calc(13.5px * var(--fs)); font-weight: 600; } html[data-ui="v2"] .sb2 a .rv-icon { width: 19px; height: 19px; color: var(--ink-2); transition: color .14s; } html[data-ui="v2"] .sb2 a span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html[data-ui="v2"] .sb2 a:hover .rv-icon { color: var(--ink); } html[data-ui="v2"] .sb2 a[aria-current="page"] .rv-icon { color: var(--link, var(--blue)); } html[data-ui="v2"] .sb2 a[aria-current="page"] { position: relative; } html[data-ui="v2"] .sb2 a[aria-current="page"]::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--blue); } html[data-ui="v2"] .sb2 .sb-new { justify-content: center; gap: 8px; min-height: 42px; margin: 0 2px 14px; color: #fff; font-weight: 750; background: linear-gradient(135deg, #E5560B, #FF7A29); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255,255,255,.25); } html[data-ui="v2"] .sb2 .sb-new span { flex: none; } html[data-ui="v2"] .sb2 .sb-new .rv-icon { color: #fff; width: 18px; height: 18px; } html[data-ui="v2"] .sb2 .sb-new:hover { color: #fff; background: linear-gradient(135deg, #D94F08, #FF7A29); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .34); } html[data-ui="v2"] .sb2 .sb-grp { display: grid; gap: 2px; } html[data-ui="v2"] .sb2 .sb-grp + .sb-grp { margin-top: 12px; } html[data-ui="v2"] .sb2 .sb-h { padding: 0 12px 6px; font-size: calc(10.5px * var(--fs)); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--label); opacity: .85; } html[data-ui="v2"] .sb2 .sb-end { margin-top: auto !important; padding-top: 14px; } html[data-ui="v2"] .sb2 .nav-badge { margin-left: auto; min-width: 20px; height: 20px; font-size: 11px; } html[data-ui="v2"] .sb2 .rv-sidebar-footer { padding: 12px 4px 0 6px; margin-top: 10px; } html[data-ui="v2"] .sb2 .rv-sidebar-footer a.rv-avatar { min-height: 0; padding: 0; justify-content: center; border-radius: 50%; } html[data-ui="v2"] .sb2 .sb-out { all: unset; cursor: pointer; flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ink-2); } html[data-ui="v2"] .sb2 .sb-out .rv-icon { width: 18px; height: 18px; } html[data-ui="v2"] .sb2 .sb-out:hover { color: var(--red, #B3261E); background: var(--pressed); } html[data-ui="v2"] .sb2 .sb-out:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } } .rv-conn { all: unset; cursor: pointer; flex: none; align-self: center; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .02em; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); -webkit-tap-highlight-color: transparent; } .rv-conn i { width: 8px; height: 8px; border-radius: 50%; background: #1F9D5B; box-shadow: 0 0 0 3px rgba(31, 157, 91, .18); } .rv-conn.local { color: #A35F00; } .rv-conn.local i { background: #E59A1A; box-shadow: 0 0 0 3px rgba(229, 154, 26, .22); } .rv-conn.offline { color: #B3261E; } .rv-conn.offline i { background: #D92D20; box-shadow: 0 0 0 3px rgba(217, 45, 32, .2); } .rv-conn.paused { color: #5C6270; } .rv-conn.paused i { background: #9BA3B0; box-shadow: 0 0 0 3px rgba(155,163,176,.22); } .rv-conn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .rv-conn.float { position: fixed; z-index: 60; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); background: var(--raised); box-shadow: var(--sh-md); } .rv-head .rv-conn { margin-right: 4px; } #conn-sheet .cn-now { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 14px; font-weight: 650; line-height: 1.4; } #conn-sheet .cn-now i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #1F9D5B; } #conn-sheet .cn-now.local i { background: #E59A1A; } #conn-sheet .cn-now.offline i { background: #D92D20; } #conn-sheet .cn-now.paused i { background: #9BA3B0; } #conn-sheet .cn-k { margin: 14px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--label); } #conn-sheet .cn-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } #conn-sheet .cn-m { all: unset; cursor: pointer; display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: var(--raised); box-shadow: var(--sh-sm); text-align: center; } #conn-sheet .cn-m b { font-size: 14.5px; } #conn-sheet .cn-m small { font-size: 11px; font-weight: 600; color: var(--ink-2); } #conn-sheet .cn-m[aria-pressed="true"] { color: #fff; background: linear-gradient(135deg, #E5560B, #FF7A29); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .28); } #conn-sheet .cn-m[aria-pressed="true"] small { color: rgba(255, 255, 255, .85); } #conn-sheet .cn-f { display: grid; gap: 8px; } #conn-sheet .cn-out { margin: 10px 2px 0; font-size: 13px; font-weight: 650; line-height: 1.45; color: var(--ink-2); } #conn-sheet .cn-out:empty { display: none; } #conn-sheet .cn-out.ok { color: #11763F; } #conn-sheet .cn-out.bad { color: #B3261E; } #conn-sheet .cn-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } #conn-sheet .cn-found { display: grid; gap: 2px; margin: 0 0 10px; padding: 11px 14px; border-radius: 14px; background: rgba(31, 157, 91, .1); box-shadow: inset 0 0 0 1.5px rgba(31, 157, 91, .35); } #conn-sheet .cn-found b { font-size: 14px; color: #11763F; } #conn-sheet .cn-found span { font-size: 12.5px; font-weight: 650; color: var(--ink-2); } html[data-theme$="night"] #conn-sheet .cn-found b { color: #5FD39A; } #conn-sheet .cn-redo { all: unset; cursor: pointer; margin: -2px 2px 10px; font-size: 12.5px; font-weight: 750; color: var(--link, var(--blue)); } #conn-sheet .cn-dl { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 12px 14px; border-radius: 14px; text-decoration: none; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); } #conn-sheet .cn-dl .rv-icon { flex: none; width: 22px; height: 22px; color: var(--link, var(--blue)); } #conn-sheet .cn-dl span { display: grid; gap: 2px; } #conn-sheet .cn-dl b { font-size: 14px; } #conn-sheet .cn-dl small { font-size: 12px; font-weight: 600; color: var(--ink-2); } #conn-sheet .cn-find { margin: 0 0 10px; } #conn-sheet .cn-warn { margin: -4px 0 12px; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; font-weight: 650; line-height: 1.45; color: #8A3B00; background: rgba(229, 154, 26, .14); } html[data-theme$="night"] #conn-sheet .cn-warn { color: #FFC266; } #conn-sheet .cn-pause-warn { color: #4A5060; background: rgba(150,163,190,.13); } #conn-sheet .cn-pause-btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 11px; width: 100%; box-sizing: border-box; padding: 11px 14px; margin-bottom: 14px; border-radius: 14px; background: var(--raised); box-shadow: var(--sh-sm); transition: box-shadow .15s; } #conn-sheet .cn-pause-btn:hover { box-shadow: var(--sh-md); } #conn-sheet .cn-pause-btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } #conn-sheet .cn-pause-track { flex: none; position: relative; width: 42px; height: 24px; border-radius: 999px; background: #C7CDD8; transition: background .2s; } #conn-sheet .cn-pause-btn.active .cn-pause-track { background: #1F9D5B; } #conn-sheet .cn-pause-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: transform .2s cubic-bezier(.34,1.5,.64,1); } #conn-sheet .cn-pause-btn.active .cn-pause-thumb { transform: translateX(18px); } #conn-sheet .cn-pause-lbl { font-size: 13.5px; font-weight: 700; color: var(--ink-2); flex: 1; line-height: 1.3; } #conn-sheet .cn-pause-btn.active .cn-pause-lbl { color: #11763F; }
.dv { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .dv-p { position: relative; background: var(--raised); border-radius: var(--r-card, 18px); box-shadow: var(--sh-md); padding: 16px; min-width: 0; } html[data-ui="v2"]:not([data-theme$="night"]) .dv-p { background: #fff; } .dv-p .top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; } .dv-k { font-size: calc(11.5px * var(--fs)); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--label); } .dv-more { font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--link, var(--blue)); text-decoration: none; } .dv-empty { font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.4; padding: 6px 0 2px; } .dv-sum { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(17px * var(--fs)); font-variant-numeric: tabular-nums; } .dv-ticket { color: #F6F1EA; background: linear-gradient(160deg, #1B1C21 0%, #26221F 100%); box-shadow: 0 18px 40px rgba(23,24,28,.28); padding: 18px 18px 6px; overflow: hidden; } html[data-ui="v2"][data-theme$="night"] .dv-ticket { background: linear-gradient(160deg, #15110E 0%, #2A1A10 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 40px rgba(0,0,0,.55); } .dv-ticket .dv-k { color: rgba(246,241,234,.62); } .dv-ticket .amt { font-family: var(--display); font-weight: 800; font-size: calc(46px * min(var(--fs), 1.1)); letter-spacing: -.045em; line-height: 1; margin: 2px 0 14px; font-variant-numeric: tabular-nums; } .dv-delta { flex: none; font-size: calc(11.5px * var(--fs)); font-weight: 700; padding: 5px 10px; border-radius: 999px; color: #E9E2D8; background: rgba(255,255,255,.1); white-space: nowrap; } .dv-delta.up { color: #7BE3A8; background: rgba(61,220,151,.14); } .dv-delta.down { color: #FFB38A; background: rgba(255,138,61,.16); } .dv-hours .bars { display: flex; align-items: flex-end; gap: 5px; height: 84px; } .dv-hours .c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; } .dv-hours .c i { display: block; width: 100%; max-width: 22px; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.22); min-height: 2px; } .dv-hours .c i.peak { background: #FFA45C; } .dv-hours .c.now i { background: rgba(255,255,255,.55); } .dv-hours .c.now i.peak { background: #FFA45C; } .dv-hours .c span { height: 12px; font-size: calc(9.5px * var(--fs)); font-weight: 600; color: rgba(246,241,234,.5); line-height: 12px; } .dv-hours .cap { margin-top: 8px; font-size: calc(12px * var(--fs)); font-weight: 600; color: rgba(246,241,234,.62); } .dv-hours.empty .cap { margin: 0; padding: 14px 0 2px; } .dv-ticket .perf { position: relative; margin: 16px -18px 0; height: 0; border-top: 2px dashed rgba(255,255,255,.2); } .dv-ticket .perf::before, .dv-ticket .perf::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); } .dv-ticket .perf::before { left: -10px; } .dv-ticket .perf::after { right: -10px; } .dv-ticket .stats { display: grid; grid-template-columns: repeat(3, 1fr); } .dv-ticket .st { display: flex; flex-direction: column; gap: 2px; padding: 14px 4px 14px 0; color: inherit; text-decoration: none; min-width: 0; } .dv-ticket .st + .st { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.1); } .dv-ticket .st b { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(19px * var(--fs)); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv-ticket .st span { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: rgba(246,241,234,.58); } .dv-floor .row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .dv-floor .row b { font-family: var(--display); font-weight: 800; font-size: calc(34px * var(--fs)); letter-spacing: -.04em; line-height: 1; color: var(--ink); } .dv-floor .row span { font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dv-floor .row em { margin-left: auto; font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--amber); background: rgba(240,160,43,.14); padding: 4px 9px; border-radius: 999px; } .dv-floor .meter { display: flex; gap: 3px; height: 10px; margin: 14px 0 10px; } .dv-floor .meter i { border-radius: 5px; min-width: 6px; } .dv-floor i.busy { background: var(--blue); } .dv-floor i.free { background: var(--track); } .dv-floor i.bill { background: #F0A02B; } .dv-floor .key { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dv-floor .key span { display: inline-flex; align-items: center; gap: 6px; } .dv-floor .key i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .dv-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .dv-actions .a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 8px 6px; border-radius: 16px; text-decoration: none; font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-actions .a { background: #fff; } .dv-actions .a svg { width: 22px; height: 22px; color: var(--link, var(--blue)); stroke: currentColor; } .dv-actions .a.main { grid-column: 1 / -1; flex-direction: row; gap: 10px; min-height: 54px; color: #fff; font-size: calc(15px * var(--fs)); background: var(--blue); box-shadow: 0 8px 20px rgba(var(--accent-rgb), .3); } .dv-actions .a.main svg { color: #fff; } .dv-attn .list { display: grid; gap: 2px; } .dv-attn .it { display: flex; align-items: center; gap: 12px; padding: 11px 2px; text-decoration: none; color: var(--ink); font-size: calc(14px * var(--fs)); font-weight: 600; line-height: 1.3; } .dv-attn .it + .it { border-top: 1px solid rgba(var(--shadow-rgb), .1); } .dv-attn .it i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); } .dv-attn .it.amber i { background: #F0A02B; } .dv-attn .it.grey i { background: var(--ink-2); } .dv-attn .it span { flex: 1; min-width: 0; } .dv-attn .it em { font-style: normal; color: var(--ink-2); font-size: calc(18px * var(--fs)); } .dv-attn.ok { background: transparent !important; box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .14); } .dv-attn .allgood { display: flex; flex-direction: column; gap: 2px; } .dv-attn .allgood b { color: var(--green); font-size: calc(14.5px * var(--fs)); } .dv-attn .allgood span { font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .dv-week .cols { display: flex; align-items: flex-end; gap: 8px; height: 118px; } .dv-week .c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; } .dv-week .c em { font-style: normal; font-size: calc(9.5px * var(--fs)); font-weight: 700; color: var(--ink-2); height: 12px; white-space: nowrap; } .dv-week .c i { display: block; width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: var(--track); min-height: 3px; } .dv-week .c.now i { background: var(--blue); } .dv-week .c span { font-size: calc(10.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dv-week .c.now span, .dv-week .c.now em { color: var(--link, var(--blue)); } .dv-week .cap { margin-top: 10px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dv-toggle { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--track); } .dv-toggle button { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 11px; border-radius: 8px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); } .dv-toggle button[aria-pressed="true"] { background: var(--raised-hi); color: var(--ink); box-shadow: var(--sh-seg); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-toggle button[aria-pressed="true"] { background: #fff; } .dv-top .lead { font-size: calc(14px * var(--fs)); line-height: 1.35; color: var(--ink-2); font-weight: 550; margin-bottom: 12px; } .dv-top .lead b { color: var(--ink); font-weight: 700; } .dv-top .rank { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .dv-top .rank li { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; overflow: hidden; } .dv-top .rank .bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--accent-rgb), .09); border-radius: 12px; } .dv-top .rank li.first .bar { background: rgba(var(--accent-rgb), .16); } .dv-top .rank .n { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: calc(11.5px * var(--fs)); font-weight: 800; color: var(--ink-2); background: var(--track); } .dv-top .rank li.first .n { background: var(--blue); color: #fff; } .dv-top .rank .nm { position: relative; flex: 1; min-width: 0; font-size: calc(14px * var(--fs)); font-weight: 650; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dv-top .rank .nm small { display: block; font-size: calc(11.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .dv-top .rank b { position: relative; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: calc(15px * var(--fs)); font-variant-numeric: tabular-nums; } .dv-pay .split { display: flex; gap: 3px; height: 12px; margin: 4px 0 12px; } .dv-pay .split i { border-radius: 6px; min-width: 8px; } .dv-pay .legend { display: grid; gap: 8px; } .dv-pay .lg { display: flex; align-items: center; gap: 10px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dv-pay .lg i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .dv-pay .lg b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; } .dv-pay .lg em { font-style: normal; width: 38px; text-align: right; font-size: calc(12px * var(--fs)); } .dv-gst dl { margin: 0; display: grid; gap: 8px; } .dv-gst dl div { display: flex; justify-content: space-between; font-size: calc(13.5px * var(--fs)); font-weight: 600; } .dv-gst dt { color: var(--ink-2); } .dv-gst dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .dv { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; grid-template-areas: "ticket floor" "ticket actions" "week attn" "top pay" "top gst"; } .dv > .dv-ticket { grid-area: ticket; padding: 24px 26px 8px; } .dv > .dv-floor { grid-area: floor; } .dv > .dv-actions { grid-area: actions; } .dv > .dv-attn { grid-area: attn; } .dv > .dv-week { grid-area: week; } .dv > .dv-top { grid-area: top; } .dv > .dv-pay { grid-area: pay; } .dv > .dv-gst { grid-area: gst; } .dv-ticket .amt { font-size: calc(64px * min(var(--fs), 1.1)); margin-bottom: 18px; } .dv-hours .bars { height: 150px; } .dv-hours .c i { max-width: 34px; } .dv-ticket .perf { margin-left: -26px; margin-right: -26px; } .dv-ticket .st b { font-size: calc(24px * var(--fs)); } } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket { background: linear-gradient(160deg, #1B1C21 0%, #26221F 100%); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-actions .a.main { background: var(--blue); }
.dv-k { display: inline-flex; align-items: center; gap: 8px; } .dv-k svg { width: 16px; height: 16px; stroke: currentColor; fill: none; flex: none; } .dv-k.date { color: rgba(246,241,234,.78); letter-spacing: .08em; } .dv-k.date svg { color: #FF9A55; } .dv-k.warn { color: var(--amber); letter-spacing: .1em; } .dv-ticket { background: radial-gradient(120% 90% at 100% 0%, rgba(255,138,61,.16), transparent 55%), linear-gradient(160deg, #17181C 0%, #201C19 100%); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket { background: radial-gradient(120% 90% at 100% 0%, rgba(255,138,61,.16), transparent 55%), linear-gradient(160deg, #17181C 0%, #201C19 100%); } .dv-delta { color: #FF9A55; background: transparent; box-shadow: inset 0 0 0 1px rgba(255,138,61,.55); font-size: calc(12px * var(--fs)); padding: 6px 12px; } .dv-delta.up { color: #7BE3A8; box-shadow: inset 0 0 0 1px rgba(61,220,151,.5); background: transparent; } .dv-delta.down { color: #FF9A55; background: transparent; } .dv-ttl { font-family: var(--display); font-weight: 600; font-size: calc(18px * var(--fs)); color: rgba(246,241,234,.9); margin-top: 6px; letter-spacing: -.01em; } .dv-ticket .main { margin-top: 2px; } .dv-ticket .amt { margin: 0 0 6px; } .dv-hours .crv { display: block; width: 100%; height: 92px; overflow: visible; } .dv-hours .crv.ghost { opacity: .45; } .dv-hours .ax { display: flex; justify-content: space-between; margin-top: 6px; font-size: calc(9.5px * var(--fs)); font-weight: 600; color: rgba(246,241,234,.5); letter-spacing: .02em; } .dv-hours .cap { margin-top: 8px; } .dv-ticket .stats { padding-top: 2px; } .dv-ticket .st { flex-direction: row; align-items: center; gap: 10px; padding: 14px 4px 14px 0; } .dv-ticket .st + .st { padding-left: 12px; } .dv-ticket .st .ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; } .dv-ticket .st .ic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; } .dv-ticket .st .ic.o { color: #FF9A55; background: rgba(255,138,61,.16); } .dv-ticket .st .ic.g { color: #5FD39A; background: rgba(61,220,151,.14); } .dv-ticket .st .ic.v { color: #B6A4FF; background: rgba(140,110,255,.18); } .dv-ticket .st .tx { min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dv-ticket .st b { font-size: calc(17px * var(--fs)); } .dv-ticket .st small { font-size: calc(11px * var(--fs)); font-weight: 600; color: rgba(246,241,234,.58); white-space: nowrap; } .dv-floor .mrow { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; } .dv-floor .mrow .meter { flex: 1; margin: 0; } .dv-floor .pc { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .dv-actions .a.main { justify-content: center; position: relative; min-height: 56px; background: linear-gradient(90deg, #E5560B, #FF7A29); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-actions .a.main { background: linear-gradient(90deg, #E5560B, #FF7A29); } .dv-actions .a.main em { position: absolute; right: 18px; font-style: normal; font-size: calc(22px * var(--fs)); } .dv-actions .a:not(.main) { flex-direction: row; justify-content: flex-start; align-items: center; gap: 8px; min-height: 64px; padding: 8px 8px; position: relative; } .dv-actions .a .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--blue) 12%, transparent); } .dv-actions .a .ic svg { width: 18px; height: 18px; } .dv-actions .a .tx { min-width: 0; display: flex; flex-direction: column; } .dv-actions .a .tx b { font-size: calc(13px * var(--fs)); font-weight: 700; } .dv-actions .a .tx small { font-size: calc(10.5px * var(--fs)); font-weight: 550; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dv-actions .a:not(.main) em { position: absolute; top: 6px; right: 8px; font-style: normal; color: var(--ink-2); font-size: calc(14px * var(--fs)); line-height: 1; } .dv-attn:not(.ok) { background: color-mix(in srgb, #F0A02B 8%, var(--raised)) !important; box-shadow: inset 0 0 0 1px rgba(240,160,43,.28); } .dv-attn .it { gap: 12px; } .dv-attn .it .wi { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #D98A12; background: rgba(240,160,43,.16); } .dv-attn .it.blue .wi { color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 14%, transparent); } .dv-attn .it.grey .wi { color: var(--ink-2); background: var(--track); } .dv-attn .it .wi svg { width: 17px; height: 17px; } .dv-attn .it .tx { flex: 1; min-width: 0; } .dv-attn .it i { display: none; } .dv-week .plot { display: flex; gap: 8px; height: 150px; } .dv-week .ya { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 20px; font-size: calc(10px * var(--fs)); font-weight: 600; color: var(--ink-2); text-align: right; min-width: 30px; } .dv-week .cols { position: relative; flex: 1; display: flex; align-items: flex-end; gap: 8px; height: auto; padding-bottom: 20px; background: repeating-linear-gradient(to top, transparent 0, transparent calc(33.33% - 1px), rgba(var(--shadow-rgb), .1) calc(33.33% - 1px), rgba(var(--shadow-rgb), .1) 33.33%); background-clip: content-box; } .dv-week .c { position: relative; height: 100%; justify-content: flex-end; } .dv-week .c i { background: color-mix(in srgb, var(--blue) 28%, transparent); max-width: 34px; border-radius: 6px 6px 0 0; } .dv-week .c.now i { background: var(--blue); } .dv-week .c span { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: calc(9.5px * var(--fs)); } .dv-week .c em { display: none; } @media (min-width: 1024px) { .dv-ticket .main { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 24px; align-items: end; } .dv-ticket .amt { margin-bottom: 14px; } .dv-hours .crv { height: 140px; } } .dv > * { min-width: 0; } .dv-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-ticket .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .dv-ticket .st { gap: 8px; } .dv-ticket .st .ic { width: 30px; height: 30px; border-radius: 9px; } .dv-ticket .st .ic svg { width: 16px; height: 16px; } .dv-ticket .st + .st { padding-left: 10px; } .dv-ticket .st small { overflow: hidden; text-overflow: ellipsis; } .dv-actions .a:not(.main) { padding-right: 18px; } @media (max-width: 400px) { .dv-ticket .st .ic { display: none; } .dv-ticket .st + .st { padding-left: 12px; } } @media (min-width: 1024px) { .dv-ticket .main { grid-template-columns: auto minmax(0, 1fr); } .dv-ticket .amt { font-size: calc(54px * min(var(--fs), 1.1)); } } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket { color: var(--ink); background: radial-gradient(120% 90% at 100% 0%, rgba(255,138,61,.16), transparent 58%), linear-gradient(160deg, #FFFFFF 0%, #FFF6EC 100%); box-shadow: 0 0 0 1px rgba(229,86,11,.14), 0 14px 32px rgba(229,86,11,.10); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .dv-k, html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .dv-k.date { color: var(--ink-2); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .dv-k.date svg { color: var(--blue); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ttl { color: var(--ink-2); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-delta { color: #C2460A; box-shadow: inset 0 0 0 1px rgba(229,86,11,.45); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-delta.up { color: #11763F; box-shadow: inset 0 0 0 1px rgba(17,118,63,.4); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-hours .ax, html[data-ui="v2"]:not([data-theme$="night"]) .dv-hours .cap { color: var(--ink-2); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-hours .crv circle { stroke: #fff; } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .perf { border-top-color: rgba(var(--shadow-rgb), .22); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .perf::before, html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .perf::after { background: var(--bg); box-shadow: inset 0 0 0 1px rgba(229,86,11,.14); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .st + .st { border-left-color: rgba(var(--shadow-rgb), .14); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .st small { color: var(--ink-2); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .st .ic.o { color: #C2460A; background: rgba(229,86,11,.12); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .st .ic.g { color: #11763F; background: rgba(17,118,63,.12); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .st .ic.v { color: #5B45D6; background: rgba(91,69,214,.12); } .dv-ticket .st span.tx { color: #F6F1EA; } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .st span.tx { color: var(--ink); }
.fl { display: grid; gap: 14px; } .fl-sum { background: var(--raised); border-radius: 18px; box-shadow: var(--sh-md); padding: 16px; } html[data-ui="v2"]:not([data-theme$="night"]) .fl-sum { background: #fff; } .fl-sum .big { display: flex; align-items: baseline; gap: 8px; } .fl-sum .big b { font-family: var(--display); font-weight: 800; font-size: calc(36px * var(--fs)); letter-spacing: -.045em; line-height: 1; } .fl-sum .big span { font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .fl-sum .meter { display: flex; gap: 3px; height: 10px; margin-top: 14px; } .fl-sum .meter i { border-radius: 5px; min-width: 8px; } .fl-sum .meter .free { background: var(--track); } .fl-sum .meter .ordered { background: #F0A02B; } .fl-sum .meter .bill { background: var(--blue); } .fl-sum .meter .late { background: var(--red); } .fl-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .fc { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px 8px; border-radius: 14px; background: var(--raised); box-shadow: var(--sh-sm); position: relative; } html[data-ui="v2"]:not([data-theme$="night"]) .fc { background: #fff; } .fc b { font-family: var(--display); font-weight: 800; font-size: calc(20px * var(--fs)); letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .fc span { font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .fc::before { content: ''; position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); } .fc.ordered::before { background: #F0A02B; } .fc.bill::before { background: var(--blue); } .fc.late::before { background: var(--red); } .fc[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--blue); } .fc:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .fl-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .fl-tabs::-webkit-scrollbar { display: none; } .fl-tabs button { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: calc(13.5px * var(--fs)); font-weight: 650; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .16); } .fl-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-ui="v2"][data-theme$="night"] .fl-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; } .fl-tabs button em { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; min-width: 18px; height: 18px; padding: 0 5px; display: inline-grid; place-items: center; border-radius: 9px; background: rgba(240,160,43,.25); color: #B26A06; } .fl-tabs button[aria-selected="true"] em { background: rgba(255,255,255,.22); color: inherit; } .fl-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .fl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ft { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 12px 12px 10px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); overflow: hidden; min-width: 0; } html[data-ui="v2"]:not([data-theme$="night"]) .ft { background: #fff; } .ft:active { transform: scale(.985); } .ft:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ft .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ft .hd b { font-family: var(--display); font-weight: 800; font-size: calc(22px * var(--fs)); letter-spacing: -.04em; line-height: 1; } .ft .st { display: inline-flex; align-items: center; gap: 6px; font-size: calc(11px * var(--fs)); font-weight: 750; padding: 4px 9px 4px 8px; border-radius: 999px; color: #11763F; background: rgba(37,168,98,.12); } .ft .st i { width: 7px; height: 7px; border-radius: 50%; background: var(--green-dot); } .ft.ordered { background: linear-gradient(180deg, rgba(240,160,43,.14), rgba(240,160,43,.04)), var(--raised); } .ft.ordered .st { color: #A25A06; background: rgba(240,160,43,.2); } .ft.ordered .st i { background: #F0A02B; } .ft.bill { background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .03)), var(--raised); } .ft.bill .st { color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .14); } .ft.bill .st i { background: var(--blue); } .ft.late { background: linear-gradient(180deg, rgba(179,38,30,.12), rgba(179,38,30,.03)), var(--raised); box-shadow: inset 0 0 0 1px rgba(179,38,30,.3); } .ft.late .st { color: var(--red); background: rgba(179,38,30,.13); } .ft.late .st i { background: var(--red); animation: ftpulse 1.4s ease-in-out infinite; } html[data-ui="v2"]:not([data-theme$="night"]) .ft.ordered { background: linear-gradient(180deg, #FFF3DE, #FFFAF1); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.bill { background: linear-gradient(180deg, #FFEDE0, #FFF8F2); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.late { background: linear-gradient(180deg, #FDE4E2, #FFF6F5); } @keyframes ftpulse { 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .ft.late .st i { animation: none; } } .ft .sk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; } .ft .sk .ch { display: flex; justify-content: center; gap: 7px; min-height: 8px; } .ft .sk .ch i { width: 15px; height: 7px; border-radius: 4px 4px 2px 2px; background: var(--track); } .ft .sk .ch:last-child i { border-radius: 2px 2px 4px 4px; } .ft .sk .top { width: 74%; height: 22px; border-radius: 8px; background: var(--track); } .ft.free .sk .top { background: rgba(37,168,98,.16); } .ft.free .sk .ch i { background: rgba(37,168,98,.34); } .ft.ordered .sk .top { background: rgba(240,160,43,.3); } .ft.ordered .sk .ch i { background: rgba(240,160,43,.55); } .ft.bill .sk .top { background: rgba(var(--accent-rgb), .26); } .ft.bill .sk .ch i { background: rgba(var(--accent-rgb), .5); } .ft.late .sk .top { background: rgba(179,38,30,.26); } .ft.late .sk .ch i { background: rgba(179,38,30,.5); } .ft-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .ft .dt { font-family: var(--display); font-weight: 750; font-size: calc(14px * var(--fs)); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .ft.free .dt { color: var(--ink-2); font-family: var(--font); font-weight: 600; font-size: calc(12.5px * var(--fs)); } .ft-foot em { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--ink-2); background: rgba(var(--shadow-rgb), .08); line-height: 1; } .ft.free .ft-foot em { color: #fff; background: var(--blue); } @media (min-width: 640px) { .fl-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; } } @media (min-width: 1024px) { .fl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .fl-sum { grid-column: 1; } .fl-chips { grid-column: 2; align-self: stretch; } .fl-tabs, .fl-grid, .fl > .rv-empty { grid-column: 1 / -1; } .fl-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; } } .ft.reserved { background: linear-gradient(180deg, #F1EBFF, #F8F5FF); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.reserved { background: linear-gradient(145deg, #F4EEFF, #E7DCFB); } .ft.reserved .st { color: #5B3FC4; background: rgba(124,92,224,.16); } .ft.reserved .st i { background: #7C5CE0; } .ft.reserved .sk .top { background: rgba(124,92,224,.26); } .ft.reserved .sk .ch i { background: rgba(124,92,224,.5); } .ft .next { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 12px; font-size: calc(10.5px * var(--fs)); font-weight: 750; color: #5B3FC4; background: rgba(124,92,224,.14); } html[data-ui="v2"][data-theme$="night"] .ft.reserved { background: linear-gradient(180deg, rgba(124,92,224,.24), rgba(124,92,224,.06)), var(--raised); } html[data-ui="v2"][data-theme$="night"] .ft.reserved .st, html[data-ui="v2"][data-theme$="night"] .ft .next { color: #B6A4FF; } .ft.rdy { background: linear-gradient(180deg, rgba(37,168,98,.16), rgba(37,168,98,.04)), var(--raised); box-shadow: inset 0 0 0 2px rgba(37,168,98,.55), var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.rdy { background: linear-gradient(145deg, #EAFAF1, #D3F1E1); } .ft.rdy .st { color: #11763F; background: rgba(37,168,98,.2); } .ft.rdy .st i { background: var(--green-dot); animation: ftpulse 1.2s ease-in-out infinite; } html[data-theme$="night"] .ft.rdy .st { color: #5FD39A; } .ft.rdy .sk .top { background: rgba(37,168,98,.3); } .ft.rdy .sk .ch i { background: rgba(37,168,98,.55); } .fl-sum { position: relative; } .fl-alert { all: unset; cursor: pointer; position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 750; color: var(--ink-2); background: rgba(var(--shadow-rgb), .12); } .fl-alert i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-2); opacity: .6; } .fl-alert[aria-pressed="true"] { color: #11763F; background: rgba(37,168,98,.16); } .fl-alert[aria-pressed="true"] i { background: var(--green-dot); opacity: 1; } html[data-theme$="night"] .fl-alert[aria-pressed="true"] { color: #5FD39A; } .fl-alert:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ft.ks-new { background: linear-gradient(180deg, rgba(47,84,214,.14), rgba(47,84,214,.04)), var(--raised); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.ks-new { background: linear-gradient(145deg, #EEF1FF, #DCE3FF); } .ft.ks-new .st { color: #2F54D6; background: rgba(47,84,214,.15); } .ft.ks-new .st i { background: #2F54D6; } html[data-theme$="night"] .ft.ks-new .st { color: #8FA8FF; } html[data-theme$="night"] .ft.ks-new .st i { background: #8FA8FF; } .ft.ks-new .sk .top { background: rgba(47,84,214,.28); } .ft.ks-new .sk .ch i { background: rgba(47,84,214,.5); } .ft.ks-preparing .st i { animation: ftpulse 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ft.ks-preparing .st i, .ft.rdy .st i { animation: none; } } .ft.queued { outline: 2px dashed rgba(var(--accent-rgb), .6); outline-offset: -2px; } .ft.queued .st { color: var(--link, var(--blue)); } .ft .next.qx { color: var(--link, var(--blue)); } .fl-tools { position: absolute; top: 14px; right: 14px; display: flex; align-items: center; gap: 8px; } .fl-tools .fl-alert { position: static; } .fl-view { all: unset; cursor: pointer; box-sizing: border-box; padding: 5px 12px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 750; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .2); } .fl-view:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .fl.compact { gap: 10px; } .fl.compact .fl-top { display: grid; gap: 8px; padding: 2px 0 4px; } @media (min-width: 640px) { .fl.compact .fl-top { position: sticky; top: 0; z-index: 4; padding: 6px 0 8px; background: var(--bg); } } .fl.compact .fl-sum { padding: 10px 14px 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .fl.compact .fl-sum .big b { font-size: calc(28px * var(--fs)); } .fl.compact .fl-sum .meter { flex: 1 1 100%; margin-top: 2px; height: 8px; } .fl.compact .fl-tools { position: static; order: 2; margin-left: auto; } .fl.compact .fl-sum .big { order: 1; } .fl.compact .fc { flex-direction: row; justify-content: center; gap: 6px; padding: 8px 4px; } .fl.compact .fc b { font-size: calc(17px * var(--fs)); } .fl.compact .fc::before { position: static; flex: none; } .fl-now { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 7px 10px; border-radius: 14px; background: rgba(37,168,98,.14); box-shadow: inset 0 0 0 1px rgba(37,168,98,.35); } .fl-now::-webkit-scrollbar { display: none; } .fl-now > span { flex: none; font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #11763F; } html[data-theme$="night"] .fl-now > span { color: #5FD39A; } .fl-now .rn { flex: none; text-decoration: none; padding: 5px 13px; border-radius: 999px; font-family: var(--display); font-weight: 800; font-size: calc(14px * var(--fs)); color: #fff; background: linear-gradient(145deg, #25A862, #11763F); box-shadow: 0 2px 8px rgba(17,118,63,.35); } .fl-bsec { display: grid; gap: 8px; } .fl-sec { display: flex; align-items: baseline; gap: 10px; padding: 2px 4px 0; } .fl-sec b { font-family: var(--display); font-size: calc(15px * var(--fs)); font-weight: 750; letter-spacing: -.02em; } .fl-sec em { font-style: normal; font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); } .fl-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; } .tl { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 8px 7px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); overflow: hidden; min-width: 0; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .12s; } html[data-ui="v2"]:not([data-theme$="night"]) .tl { background: #fff; } .tl:active { transform: scale(.95); } .tl:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .tl .hd { display: flex; align-items: center; justify-content: space-between; gap: 4px; } .tl .n { font-family: var(--display); font-weight: 800; font-size: calc(16px * var(--fs)); letter-spacing: -.04em; line-height: 1; } .tl .sd { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green-dot); } .tl .dt { font-size: calc(11px * var(--fs)); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .tl .sk { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 1px 0; } .tl .sk .ch { display: flex; justify-content: center; gap: 3px; min-height: 4px; } .tl .sk .ch i { width: 9px; height: 4px; border-radius: 3px 3px 1px 1px; background: var(--track); } .tl .sk .ch:last-child i { border-radius: 1px 1px 3px 3px; } .tl .sk .top { width: 80%; height: 15px; border-radius: 5px; background: var(--track); } .tl.dim { opacity: .22; filter: saturate(.5); } .tl.free { box-shadow: var(--sh-sm); } .tl.free .dt { color: var(--ink-2); font-weight: 600; } .tl.free .sk .top { background: rgba(37,168,98,.16); } .tl.free .sk .ch i { background: rgba(37,168,98,.34); } .tl.ordered { box-shadow: inset 0 0 0 1.5px rgba(240,160,43,.5), var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .tl.ordered { background: linear-gradient(180deg, #FFF3DE, #FFFAF1); } .tl.ordered .sd { background: #F0A02B; } .tl.ordered .sk .top { background: rgba(240,160,43,.3); } .tl.ordered .sk .ch i { background: rgba(240,160,43,.55); } .tl.ks-new { box-shadow: inset 0 0 0 1.5px rgba(47,84,214,.45), var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .tl.ks-new { background: linear-gradient(145deg, #EEF1FF, #DCE3FF); } .tl.ks-new .sd { background: #2F54D6; } .tl.ks-new .sk .top { background: rgba(47,84,214,.28); } .tl.ks-new .sk .ch i { background: rgba(47,84,214,.5); } .tl.ks-preparing .sd { animation: ftpulse 1.6s ease-in-out infinite; } .tl.bill { box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .5), var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .tl.bill { background: linear-gradient(180deg, #FFEDE0, #FFF8F2); } .tl.bill .sd { background: var(--blue); } .tl.bill .sk .top { background: rgba(var(--accent-rgb), .26); } .tl.bill .sk .ch i { background: rgba(var(--accent-rgb), .5); } .tl.late { box-shadow: inset 0 0 0 2px rgba(179,38,30,.55), var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .tl.late { background: linear-gradient(180deg, #FDE4E2, #FFF6F5); } .tl.late .sd { background: var(--red); animation: ftpulse 1.4s ease-in-out infinite; } .tl.late .dt { color: var(--red); } .tl.late .sk .top { background: rgba(179,38,30,.26); } .tl.late .sk .ch i { background: rgba(179,38,30,.5); } .tl.rdy { box-shadow: inset 0 0 0 2.5px #25A862, 0 4px 14px rgba(37,168,98,.35); animation: tlglow 1.8s ease-in-out infinite; } html[data-ui="v2"]:not([data-theme$="night"]) .tl.rdy { background: linear-gradient(145deg, #E6F9EE, #BFEBD3); } .tl.rdy .sd { background: #25A862; animation: ftpulse 1.2s ease-in-out infinite; } .tl.rdy .dt { color: #0F6B38; } html[data-theme$="night"] .tl.rdy .dt { color: #5FD39A; } .tl.rdy .sk .top { background: rgba(37,168,98,.35); } .tl.rdy .sk .ch i { background: rgba(37,168,98,.6); } .tl.reserved { box-shadow: inset 0 0 0 1.5px rgba(124,92,224,.45), var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .tl.reserved { background: linear-gradient(145deg, #F4EEFF, #E7DCFB); } .tl.reserved .sd { background: #7C5CE0; } .tl.reserved .sk .top { background: rgba(124,92,224,.26); } .tl.reserved .sk .ch i { background: rgba(124,92,224,.5); } .tl.reserved .dt { color: #5B3FC4; } html[data-theme$="night"] .tl.reserved .dt { color: #B6A4FF; } .tl.queued { outline: 2px dashed rgba(var(--accent-rgb), .6); outline-offset: -2px; } @keyframes tlglow { 50% { box-shadow: inset 0 0 0 2.5px #25A862, 0 4px 20px rgba(37,168,98,.6); } } @media (prefers-reduced-motion: reduce) { .tl.rdy, .tl.rdy .sd, .tl.late .sd, .tl.ks-preparing .sd { animation: none; } } @media (min-width: 640px) { .fl-board { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; } .tl { padding: 10px 10px 9px; } .tl .n { font-size: calc(19px * var(--fs)); } .tl .dt { font-size: calc(12.5px * var(--fs)); } .tl .sk .ch i { width: 12px; height: 5px; } .tl .sk .top { height: 20px; } } @media (min-width: 1024px) { .fl.compact { grid-template-columns: minmax(0, 1fr); } .fl.compact .fl-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; } .fl.compact .fl-now { grid-column: 1 / -1; } .fl-board { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 12px; } } .rv-ticket .kotno { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; font-size: calc(12.5px * var(--fs)); font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); background: rgba(var(--shadow-rgb), .12); }
html[data-ui="v2"] .rv-chips { gap: 8px; } html[data-ui="v2"] .rv-chip { min-height: 38px; padding: 0 16px; border-radius: 999px; font-size: calc(13.5px * var(--fs)); font-weight: 650; color: var(--ink-2); background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .18); } html[data-ui="v2"] .rv-chip[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-ui="v2"][data-theme$="night"] .rv-chip[aria-pressed="true"] { background: var(--blue); color: #fff; } html[data-ui="v2"] .rv-search > svg { width: 20px; height: 20px; left: 14px; } html[data-ui="v2"] .rv-search .rv-input { padding-left: 44px; min-height: 50px; } html[data-ui="v2"] .rv-pill { font-weight: 700; } html[data-ui="v2"] .rv-pill.is-ordered { color: #A25A06; background: rgba(240,160,43,.18); box-shadow: none; } html[data-ui="v2"] .rv-pill.is-free { color: #11763F; background: rgba(37,168,98,.14); box-shadow: none; } html[data-ui="v2"] .rv-pill.is-late { color: var(--red); background: rgba(179,38,30,.12); box-shadow: none; } html[data-ui="v2"] .rv-pill.is-bill { color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); box-shadow: none; } html[data-ui="v2"][data-theme$="night"] .rv-pill.is-ordered { color: #FFB547; } html[data-ui="v2"][data-theme$="night"] .rv-pill.is-free { color: #5FD39A; } html[data-ui="v2"][data-theme$="night"] .rv-pill.is-late { color: #FF8F9C; } html[data-ui="v2"] .rv-item { padding: 12px 12px 12px 14px; border-radius: 16px; gap: 12px; box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-item { background: #fff; } html[data-ui="v2"] .rv-item .nm { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; font-size: calc(16px * var(--fs)); display: flex; align-items: center; gap: 8px; } html[data-ui="v2"] .rv-item .ds { font-size: calc(12px * var(--fs)); } html[data-ui="v2"] .rv-item .pr { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(17px * var(--fs)); font-variant-numeric: tabular-nums; } html[data-ui="v2"] .rv-item .row { margin-top: 8px; } html[data-ui="v2"] .rv-item .rv-btn.soft.sm, html[data-ui="v2"] .rv-item .rv-btn.sm { min-height: 36px; padding: 0 18px; border-radius: 999px; background: transparent; color: var(--link, var(--blue)); font-weight: 750; box-shadow: inset 0 0 0 1.5px var(--blue); } html[data-ui="v2"] .rv-item .rv-btn:active { background: var(--blue); color: #fff; } html[data-ui="v2"] .rv-stepper { border-radius: 999px; background: var(--blue); box-shadow: none; } html[data-ui="v2"] .rv-stepper button { width: 38px; height: 36px; color: #fff; } html[data-ui="v2"] .rv-stepper b { color: #fff; font-family: var(--display); } html[data-ui="v2"] .rv-diet { width: 15px; height: 15px; flex: none; } html[data-ui="v2"] .rv-cartbar { left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); width: auto; max-width: none; transform: none; padding: 10px 10px 10px 18px; border-radius: 20px; background: #1B1C21; border: 0; box-shadow: 0 16px 36px rgba(23,24,28,.35); margin: 0 auto; } @media (min-width: 480px) { html[data-ui="v2"] .rv-cartbar { max-width: 456px; left: 50%; right: auto; transform: translateX(-50%); width: calc(100% - 24px); } } html[data-ui="v2"] .rv-cartbar .sum .c { color: rgba(246,241,234,.6); font-size: calc(12px * var(--fs)); } html[data-ui="v2"] .rv-cartbar .sum .t { color: #fff; font-family: var(--display); font-size: calc(22px * var(--fs)); letter-spacing: -.035em; } html[data-ui="v2"] .rv-cartbar .rv-btn { min-height: 46px; border-radius: 14px; padding: 0 22px; } html[data-ui="v2"] .rv-progress { height: 10px; } html[data-ui="v2"] .rv-progress i { height: 6px; border-radius: 3px; background: var(--track); box-shadow: none; } html[data-ui="v2"] .rv-progress i.on { background: var(--blue); flex: 2.2; } html[data-ui="v2"] .rv-progress i.done { background: var(--green-dot); } html[data-ui="v2"] .rv-line { padding: 11px 0; border-bottom: 1px solid rgba(var(--shadow-rgb), .1); } html[data-ui="v2"] .rv-line .nm { font-weight: 650; } html[data-ui="v2"] .rv-line .lt { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } html[data-ui="v2"] .rv-linkbtn { font-weight: 700; } html[data-ui="v2"] .rv-tag { border-radius: 6px; } .ol { display: grid; gap: 10px; margin-top: 12px; } .ol-t { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: center; padding: 13px 14px 13px 18px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); overflow: hidden; } html[data-ui="v2"]:not([data-theme$="night"]) .ol-t { background: #fff; } .ol-t::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--track); } .ol-t.new::before, .ol-t.preparing::before { background: #F0A02B; } .ol-t.ready::before { background: var(--green-dot); } .ol-t.bill::before { background: var(--blue); } .ol-t.cancelled::before { background: var(--red); } .ol-t .no { font-family: var(--display); font-weight: 800; font-size: calc(18px * var(--fs)); letter-spacing: -.035em; display: flex; align-items: center; gap: 8px; min-width: 0; } .ol-t .no span { font-family: var(--font); font-size: calc(12px * var(--fs)); font-weight: 700; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; background: var(--track); color: var(--ink-2); white-space: nowrap; } .ol-t .amt { font-family: var(--display); font-weight: 800; font-size: calc(18px * var(--fs)); letter-spacing: -.03em; text-align: right; font-variant-numeric: tabular-nums; } .ol-t .meta { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .ol-t .st { justify-self: end; } .ol-t.cancelled .amt { text-decoration: line-through; color: var(--ink-2); } @media (min-width: 900px) { .ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } } html[data-ui="v2"] #bill-root .rv-card:has(.rv-line), html[data-ui="v2"] #bill-root .rv-card:has(.lt) { padding: 16px 18px; } html[data-ui="v2"] #bill-root .rv-hero { border-radius: 18px; padding: 18px; } html[data-ui="v2"]:not([data-theme$="night"]) #bill-root .rv-hero { color: var(--ink); background: radial-gradient(120% 90% at 100% 0%, rgba(37,168,98,.16), transparent 58%), linear-gradient(160deg, #FFFFFF, #F1FAF4); box-shadow: 0 0 0 1px rgba(17,118,63,.18), 0 12px 28px rgba(17,118,63,.08); } html[data-ui="v2"]:not([data-theme$="night"]) #bill-root .rv-hero .k { color: #11763F; } html[data-ui="v2"]:not([data-theme$="night"]) #bill-root .rv-hero .big { color: var(--ink); text-shadow: none; } html[data-ui="v2"]:not([data-theme$="night"]) #bill-root .rv-hero .chip { color: var(--ink-2); background: rgba(var(--shadow-rgb), .08); box-shadow: none; } html[data-ui="v2"]:not([data-theme$="night"]) #bill-root .rv-hero::after { border-color: rgba(17,118,63,.12); } html[data-ui="v2"] #bill-root .rv-hero .big { font-family: var(--display); letter-spacing: -.045em; } html[data-ui="v2"] #bill-root .rv-card b { font-variant-numeric: tabular-nums; } html[data-ui="v2"] #bill-root .rv-btn.block { min-height: 54px; } html[data-ui="v2"] #bill-root .rv-btn.danger-solid { background: var(--red); box-shadow: 0 8px 20px rgba(179,38,30,.25); } html[data-ui="v2"] .rv-field > span { font-weight: 650; } html[data-ui="v2"] .rv-pill.ks { font-weight: 750; box-shadow: none; } html[data-ui="v2"] .rv-pill.ks-new { color: #2F54D6; background: rgba(47,84,214,.12); } html[data-ui="v2"] .rv-pill.ks-preparing { color: #A25A06; background: rgba(240,160,43,.2); } html[data-ui="v2"] .rv-pill.ks-ready { color: #11763F; background: rgba(37,168,98,.16); } html[data-ui="v2"][data-theme$="night"] .rv-pill.ks-new { color: #8FA8FF; background: rgba(90,120,255,.18); } html[data-ui="v2"][data-theme$="night"] .rv-pill.ks-preparing { color: #FFB547; } html[data-ui="v2"][data-theme$="night"] .rv-pill.ks-ready { color: #5FD39A; } html[data-ui="v2"] .rv-line.ks-line { position: relative; padding-left: 14px; } html[data-ui="v2"] .rv-line.ks-line::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: #2F54D6; } html[data-ui="v2"] .rv-line.ks-preparing::before { background: #F0A02B; } html[data-ui="v2"] .rv-line.ks-ready::before { background: var(--green-dot); }
html[data-ui="v2"] .lg-bg { display: none; } html[data-ui="v2"] body:has(main.lg) { background: var(--bg); } html[data-ui="v2"] .lg-top { padding: 14px 20px 2px; text-align: left; } html[data-ui="v2"] .lg-mark { width: 64px; height: 64px; border-radius: 18px; margin: 0 0 16px; background: none; box-shadow: 0 8px 22px rgba(var(--accent-rgb), .22), 0 0 0 1px rgba(var(--shadow-rgb), .1); overflow: hidden; } html[data-ui="v2"] .lg-title { font-size: calc(32px * min(var(--fs), 1.1)); } html[data-ui="v2"] .lg-sub { margin-top: 6px; letter-spacing: 0; text-transform: none; font-size: calc(14.5px * var(--fs)); font-weight: 500; color: var(--ink-2); } html[data-ui="v2"] .lg-form, html[data-ui="v2"] .lg-card { padding: 0 20px; gap: 12px; } html[data-ui="v2"] .lg-card { padding: 22px 18px; border-radius: 20px; margin: 0 20px; } html[data-ui="v2"] .lg-field { min-height: 54px; border-radius: 14px; padding: 0 14px; gap: 10px; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .18); } html[data-ui="v2"]:not([data-theme$="night"]) .lg-field { background: #fff; } html[data-ui="v2"] .lg-field:focus-within { box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px rgba(var(--accent-rgb), .14); } html[data-ui="v2"] .lg-field input { min-height: 52px; font-size: calc(16px * var(--fs)); } html[data-ui="v2"] .lg-check i { border-radius: 7px; background: var(--raised); box-shadow: inset 0 0 0 1.5px rgba(var(--shadow-rgb), .3); } html[data-ui="v2"] .lg-check input:checked + i { background: var(--blue); box-shadow: none; } html[data-ui="v2"] .lg-go { min-height: 54px; border-radius: 14px; background: linear-gradient(90deg, #E5560B, #FF7A29); box-shadow: 0 10px 24px rgba(var(--accent-rgb), .3); padding: 0 8px 0 18px; } html[data-ui="v2"] .lg-go span { margin-left: 0; text-align: left; font-weight: 700; } html[data-ui="v2"] .lg-go i { width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.2); } html[data-ui="v2"] .lg-or span { letter-spacing: .08em; font-weight: 650; } html[data-ui="v2"] .lg-g { border-radius: 14px; min-height: 52px; width: 100%; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .2); } html[data-ui="v2"]:not([data-theme$="night"]) .lg-g { background: #fff; } html[data-ui="v2"] .lg-foot { letter-spacing: .08em; } html[data-ui="v2"] .rv-pad button { border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); font-family: var(--display); font-weight: 700; } html[data-ui="v2"]:not([data-theme$="night"]) .rv-pad button { background: #fff; } html[data-ui="v2"] .rv-pin-dots i { box-shadow: inset 0 0 0 2px rgba(var(--shadow-rgb), .35); background: transparent; } html[data-ui="v2"] .rv-pin-dots i.on { background: var(--blue); box-shadow: none; } .lg-brand { display: none; } @media (min-width: 900px) { html[data-ui="v2"] body:has(main.lg) { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; } html[data-ui="v2"] .lg-brand { display: block; position: relative; overflow: hidden; color: #F6F1EA; background: radial-gradient(90% 70% at 100% 0%, rgba(255,138,61,.28), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(229,86,11,.2), transparent 60%), #17181C; } html[data-ui="v2"] .lg-brand .inner { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 56px clamp(40px, 6vw, 96px); max-width: 640px; } .lg-brand .mk { width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 10px 28px rgba(0,0,0,.4); } .lg-brand h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 52px); line-height: 1.02; letter-spacing: -.045em; } .lg-brand ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .lg-brand li { display: grid; gap: 2px; padding-left: 18px; border-left: 2px solid rgba(255,138,61,.7); } .lg-brand li b { font-size: 15.5px; font-weight: 700; } .lg-brand li span { font-size: 14px; color: rgba(246,241,234,.66); line-height: 1.4; } .lg-brand .demo { width: min(340px, 100%); padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transform: rotate(-1.6deg); } .lg-brand .demo .r { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .lg-brand .demo .r b { font-family: var(--display); font-size: 22px; letter-spacing: -.04em; } .lg-brand .demo .r em { font-style: normal; font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; color: #FFB547; background: rgba(240,160,43,.18); } .lg-brand .demo .l, .lg-brand .demo .t { display: flex; justify-content: space-between; font-size: 14px; color: rgba(246,241,234,.78); padding: 5px 0; } .lg-brand .demo .t { margin-top: 6px; padding-top: 10px; border-top: 1.5px dashed rgba(255,255,255,.22); color: #fff; font-weight: 700; } .lg-brand .demo .t b { font-family: var(--display); font-size: 20px; letter-spacing: -.03em; } html[data-ui="v2"] main.lg { align-self: center; width: 100%; max-width: 460px; margin: 0 auto; padding: 32px 24px; } html[data-ui="v2"] main.lg .lg-top, html[data-ui="v2"] main.lg .lg-form, html[data-ui="v2"] main.lg .lg-card { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } html[data-ui="v2"] .lg-mark { display: none; } html[data-ui="v2"] .lg-foot { text-align: left; } } html[data-ui="v2"] .lg-top { padding: 14px var(--gutter) 2px; } html[data-ui="v2"] .lg-form, html[data-ui="v2"] .lg-card { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } html[data-ui="v2"] .lg-card { padding: 22px 18px; }
.mo-id { padding: 16px; display: grid; gap: 14px; } .mo-id .who { display: flex; align-items: center; gap: 14px; } .mo-id .rv-avatar { width: 56px; height: 56px; flex: none; font-family: var(--display); font-weight: 800; font-size: calc(18px * var(--fs)); } .mo-id .nm { min-width: 0; flex: 1; display: flex; flex-direction: column; } .mo-id .nm b { font-family: var(--display); font-weight: 800; font-size: calc(19px * var(--fs)); letter-spacing: -.03em; } .mo-id .nm small { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .mo-id .role { flex: none; font-size: calc(11.5px * var(--fs)); font-weight: 750; padding: 5px 11px; border-radius: 999px; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } .mo-id .rest { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 8px; padding-top: 14px; border-top: 1.5px dashed rgba(var(--shadow-rgb), .28); } .mo-id .rn { flex: 1 1 100%; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .mo-id .rn b { font-weight: 700; font-size: calc(15px * var(--fs)); } .mo-id .rn small { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .mo-id .pl, .mo-id .qr { font-size: calc(11.5px * var(--fs)); font-weight: 700; padding: 5px 10px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); } .mo-id .qr.on { color: #11763F; background: rgba(37,168,98,.14); } .rv-menu.mo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; background: transparent !important; box-shadow: none !important; overflow: visible; border-radius: 0; } .rv-menu.mo-grid > a { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 108px; padding: 14px; border-radius: 18px; position: relative; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; } html[data-ui="v2"]:not([data-theme$="night"]) .rv-menu.mo-grid > a { background: var(--raised); } .rv-menu.mo-grid > * + * { border-top: 0; } .rv-menu.mo-grid > a:active { transform: scale(.985); } .rv-menu.mo-grid > a:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .rv-menu.mo-grid .ico { width: 40px; height: 40px; border-radius: 12px; } .rv-menu.mo-grid .tx { width: 100%; } .rv-menu.mo-grid .tx b { font-family: var(--display); font-size: calc(15.5px * var(--fs)); font-weight: 750; letter-spacing: -.02em; } .rv-menu.mo-grid .tx small { margin-top: 2px; font-size: calc(11.5px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-menu.mo-grid .chev { position: absolute; top: 12px; right: 14px; color: var(--ink-2); font-size: calc(16px * var(--fs)); } @media (min-width: 900px) { .rv-menu.mo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
html[data-ui="v2"] .mg:not(.au):not(.st) .mg-tabs button, html[data-ui="v2"]:not([data-theme$="night"]) .mg:not(.au):not(.st) .mg-tabs button { background: none; box-shadow: none; border-radius: 0; color: var(--ink-2); font-weight: 650; } html[data-ui="v2"] .mg:not(.au):not(.st) .mg-tabs button[aria-selected="true"], html[data-ui="v2"]:not([data-theme$="night"]) .mg:not(.au):not(.st) .mg-tabs button[aria-selected="true"] { background: none; box-shadow: none; color: var(--link, var(--blue)); } html[data-ui="v2"] .mg:not(.au):not(.st) .mg-tabs { border-bottom: 1px solid rgba(var(--shadow-rgb), .18); background: none; } html[data-ui="v2"] .mg.st:not(.au) .mg-tabs button { border-radius: 12px; } html[data-ui="v2"] .mg-body { margin-top: 8px; } html[data-ui="v2"] .rv-card > h3 { font-family: var(--display); font-weight: 750; letter-spacing: -.02em; font-size: calc(16.5px * var(--fs)); display: flex; align-items: center; gap: 10px; } html[data-ui="v2"] .rv-card > h3::before { content: ''; width: 4px; height: 16px; border-radius: 2px; background: var(--blue); flex: none; } html[data-ui="v2"] .rv-field > span { font-size: calc(12px * var(--fs)); font-weight: 650; letter-spacing: .01em; color: var(--ink-2); } html[data-ui="v2"] .rv-empty { font-weight: 550; } @media (max-width: 700px) { html[data-ui="v2"] .mg-table { background: transparent !important; box-shadow: none !important; overflow: visible; display: grid; gap: 10px; border-radius: 0; } html[data-ui="v2"] .mg-table > .mg-row { background: var(--raised); box-shadow: var(--sh-sm); border-radius: 16px; border-top: 0; } html[data-ui="v2"] .mg-table > .mg-row.mg-th { display: none; } } html[data-ui="v2"] .mg-row .c-name b { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; } html[data-ui="v2"] .mg-row .c-price { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html[data-ui="v2"] .mg-add { border-radius: 16px; } html[data-ui="v2"] .au-kpi, html[data-ui="v2"] .au-kpi b { font-family: var(--display); } html[data-ui="v2"] .mg-sw i::after { box-shadow: 0 1px 4px rgba(0,0,0,.28); } html[data-ui="v2"] .mg-sw input:checked + i { background: var(--blue); } html[data-ui="v2"] #staff-root .rv-row, html[data-ui="v2"] main:has(.rv-avatar) .rv-row { border-radius: 16px; min-height: 66px; } html[data-ui="v2"] .rv-row .l b { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; } html[data-ui="v2"] .rv-row .rv-avatar { box-shadow: var(--sh-sm); } html[data-ui="v2"] .rv-row .rv-pill { font-size: calc(11.5px * var(--fs)); font-weight: 750; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .12); box-shadow: none; } html[data-ui="v2"] .stk-stats { gap: 10px; } html[data-ui="v2"] .stk-stat { border-radius: 16px; padding: 12px 6px; } html[data-ui="v2"] .stk-stat b { font-family: var(--display); font-size: calc(21px * var(--fs)); letter-spacing: -.035em; } html[data-ui="v2"] .stk-stat span { letter-spacing: .06em; } html[data-ui="v2"] .stk-list { border-radius: 18px; } html[data-ui="v2"] .stk-row .l b { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; } html[data-ui="v2"] .stk-row .r b { font-family: var(--display); letter-spacing: -.03em; } html[data-ui="v2"] .stk-card { border-radius: 18px; } html[data-ui="v2"] .stk-add { box-shadow: 0 10px 22px rgba(var(--accent-rgb), .3); } html[data-ui="v2"] .st-badge { font-weight: 750; border-radius: 999px; } html[data-ui="v2"] #set-root > .rv-stack { gap: 14px; } @media (min-width: 1024px) { html[data-ui="v2"] #set-root > .rv-stack { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } } html[data-ui="v2"] .mg:not(.au):not(.st) .mg-tabs button { position: relative; min-height: 46px; padding: 0 4px; } html[data-ui="v2"] .mg:not(.au):not(.st) .mg-tabs button[aria-selected="true"]::after { bottom: 0; height: 3px; background: var(--blue); }
html[data-ui="v2"] .ins-title { font-family: var(--display); font-weight: 750; letter-spacing: -.02em; font-size: calc(16px * var(--fs)); display: flex; align-items: center; gap: 10px; } html[data-ui="v2"] .ins-title::before { content: ''; width: 4px; height: 15px; border-radius: 2px; background: var(--blue); flex: none; } html[data-ui="v2"] .ins-big { font-family: var(--display); font-weight: 800; letter-spacing: -.045em; } html[data-ui="v2"] .ins-delta { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .25); font-size: calc(12.5px * var(--fs)); } html[data-ui="v2"] .ins-delta.up { color: #11763F; background: rgba(37,168,98,.1); box-shadow: inset 0 0 0 1px rgba(17,118,63,.3); } html[data-ui="v2"] .ins-delta.down { color: #C2460A; background: rgba(229,86,11,.08); box-shadow: inset 0 0 0 1px rgba(229,86,11,.35); } html[data-ui="v2"] .ins-mini { border-radius: 14px; background: var(--raised); box-shadow: var(--sh-sm); padding: 11px 13px; } html[data-ui="v2"] .ins-mini span { font-weight: 650; letter-spacing: .01em; } html[data-ui="v2"] .ins-mini b { font-family: var(--display); letter-spacing: -.035em; } html[data-ui="v2"] .ins-periods button { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .2); font-weight: 650; } html[data-ui="v2"] .ins-periods button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-ui="v2"][data-theme$="night"] .ins-periods button[aria-pressed="true"] { background: var(--blue); color: #fff; } html[data-ui="v2"] .ins-hbar i { background: var(--track); box-shadow: none; } html[data-ui="v2"] .ins-bh h2 { font-family: var(--display); letter-spacing: -.03em; } html[data-ui="v2"] .ins-chead .ico { border-radius: 10px; } html[data-ui="v2"] .au-kpi { border-radius: 16px; } html[data-ui="v2"] .au-kpi b { font-family: var(--display); letter-spacing: -.04em; } html[data-ui="v2"] .au-list { border-radius: 18px; } html[data-ui="v2"] .au-row .c-amt b { font-family: var(--display); letter-spacing: -.03em; } html[data-ui="v2"] .au-tag { font-weight: 750; letter-spacing: .01em; } html[data-ui="v2"] .au-presets { border-radius: 14px; } html[data-ui="v2"] .au-presets button { border-radius: 10px; font-weight: 650; } html[data-ui="v2"] .au-date { border-radius: 14px; } html[data-ui="v2"] .au-export { border-radius: 14px; } html[data-ui="v2"] .au-sum { border-top-style: dashed; } html[data-ui="v2"] .au-sum .au-kv b { font-family: var(--display); letter-spacing: -.02em; } html[data-ui="v2"] .cu-top h2 { font-family: var(--display); font-weight: 800; letter-spacing: -.035em; } html[data-ui="v2"] .cu-stats { border-radius: 18px; } html[data-ui="v2"] .cu-cell b { font-family: var(--display); font-size: calc(20px * var(--fs)); letter-spacing: -.04em; } html[data-ui="v2"] .cu-search { border-radius: 14px; } html[data-ui="v2"] .cu-chips button { background: transparent; box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .2); font-weight: 650; } html[data-ui="v2"] .cu-chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-ui="v2"][data-theme$="night"] .cu-chips button[aria-pressed="true"] { background: var(--blue); color: #fff; } html[data-ui="v2"] .rv-row .rv-avatar + div b, html[data-ui="v2"] .rv-row b { font-family: var(--display); } html[data-ui="v2"] .wa-item { border-radius: 18px; gap: 10px; } html[data-ui="v2"] .wa-head b { font-family: var(--display); font-size: calc(16px * var(--fs)); letter-spacing: -.02em; } html[data-ui="v2"] .wa-bubble { border-radius: 4px 16px 16px 16px; background: #DCF8C6; color: #14301F; box-shadow: 0 1px 1px rgba(0,0,0,.08); font-size: calc(14px * var(--fs)); line-height: 1.45; } html[data-ui="v2"][data-theme$="night"] .wa-bubble { background: #12382A; color: #D6F5E3; box-shadow: none; } html[data-ui="v2"] .wa-send { border-radius: 14px; background: linear-gradient(135deg, #25D366, #128C7E) !important; } html[data-ui="v2"] .wa-chip { border-radius: 8px; } .ins-spd-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; } .ins-spd-top div { display: flex; align-items: baseline; gap: 10px; } .ins-spd-top span { font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--ink-2); } .ins-spd-top b { font-family: var(--display); font-weight: 800; font-size: calc(28px * var(--fs)); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .ins-spd-top small { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .ins-spd-bar { display: flex; gap: 3px; height: 12px; border-radius: 99px; overflow: hidden; margin-bottom: 14px; } .ins-spd-bar i { display: block; border-radius: 99px; min-width: 6px; } .ins-spd-bar .s0, .ins-spd .dot.s0 { background: #6B57E0; } .ins-spd-bar .s1, .ins-spd .dot.s1 { background: #E5560B; } .ins-spd-bar .s2, .ins-spd .dot.s2 { background: #C9B79C; } .ins-spd-bar .s3, .ins-spd .dot.s3 { background: #1F9D5B; } .ins-spd { display: grid; gap: 8px; } .ins-spd .st { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 14px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .ins-spd .dot { flex: none; width: 10px; height: 10px; border-radius: 3px; } .ins-spd .tx { flex: 1; min-width: 0; display: grid; gap: 1px; } .ins-spd .tx b { font-size: calc(13.5px * var(--fs)); font-weight: 700; } .ins-spd .tx small { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .ins-spd em { flex: none; font-style: normal; font-family: var(--display); font-weight: 800; font-size: calc(17px * var(--fs)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .ins-spd .st.ok em { color: #11763F; } .ins-spd .st.warn em { color: #B26B00; } .ins-spd .st.bad em { color: #C0362C; } html[data-theme$="night"] .ins-spd .st.ok em { color: #5FD39A; } html[data-theme$="night"] .ins-spd .st.warn em { color: #FFB547; } html[data-theme$="night"] .ins-spd .st.bad em { color: #FF8A80; } .ins-spd-notes { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .ins-spd-notes li { position: relative; padding-left: 16px; font-size: calc(12.5px * var(--fs)); font-weight: 600; line-height: 1.45; color: var(--ink-2); } .ins-spd-notes li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--blue); }
html[data-ui="v2"] .rv-kitchen-board { gap: 14px; } html[data-ui="v2"] .rv-ticket { position: relative; border-radius: 18px; padding: 16px 16px 14px 20px; gap: 12px; overflow: hidden; } html[data-ui="v2"] .rv-ticket::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #2F54D6; } html[data-ui="v2"] .rv-ticket.kt-preparing::before { background: #F0A02B; } html[data-ui="v2"] .rv-ticket.kt-ready::before { background: var(--green-dot); } html[data-ui="v2"] .rv-ticket .top { padding-bottom: 12px; border-bottom: 2px dashed rgba(var(--shadow-rgb), .3); align-items: center; } html[data-ui="v2"] .rv-ticket .tbl { font-family: var(--display); font-weight: 800; font-size: calc(30px * var(--fs)); letter-spacing: -.05em; } html[data-ui="v2"] .rv-ticket .meta { font-weight: 600; } html[data-ui="v2"] .rv-ticket .li { font-size: calc(17px * var(--fs)); font-weight: 650; padding: 2px 0; } html[data-ui="v2"] .rv-ticket .li .q { font-family: var(--display); font-weight: 800; color: var(--link, var(--blue)); } html[data-ui="v2"] .rv-ticket .note { border-radius: 12px; background: rgba(240,160,43,.14); box-shadow: none; color: #7A4A06; font-weight: 650; } html[data-ui="v2"] .rv-timer { height: 36px; padding: 0 14px; border-radius: 999px; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; background: var(--pressed); box-shadow: none; } html[data-ui="v2"] .rv-ticket .rv-btn.block { min-height: 52px; } html[data-ui="v2"] .rv-ticket.kt-preparing .rv-btn.block:not(.soft) { background: linear-gradient(90deg, #11763F, #25A862); box-shadow: 0 10px 22px rgba(17,118,63,.28); } html[data-ui="v2"] #menu-root .rv-row { border-radius: 16px; min-height: 62px; } html[data-ui="v2"] #menu-root .rv-row .l b { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; } html[data-ui="v2"] #menu-root .rv-pill { font-weight: 750; font-size: calc(11.5px * var(--fs)); color: #11763F; background: rgba(37,168,98,.14); box-shadow: none; } html[data-ui="v2"] #menu-root .rv-pill.is-late, html[data-ui="v2"] #menu-root .rv-pill.off { color: var(--red); background: rgba(179,38,30,.12); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-hero { color: var(--ink); background: radial-gradient(120% 90% at 100% 0%, rgba(255,138,61,.16), transparent 58%), linear-gradient(160deg, #FFFFFF, #FFF6EC); box-shadow: var(--sh-lg); border-radius: 18px; } html[data-ui="v2"]:not([data-theme$="night"]) .rv-hero .k { color: var(--ink-2); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-hero .big { color: var(--ink); text-shadow: none; } html[data-ui="v2"]:not([data-theme$="night"]) .rv-hero .chip { color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); box-shadow: none; } html[data-ui="v2"]:not([data-theme$="night"]) .rv-hero::after { border-color: rgba(229,86,11,.12); } html[data-ui="v2"] .rv-hero .big { font-family: var(--display); letter-spacing: -.045em; } html[data-ui="v2"] .rv-wait { border-radius: 16px; position: relative; overflow: hidden; padding-left: 18px; } html[data-ui="v2"] .rv-wait::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: #F0A02B; } html[data-ui="v2"] .rv-wait .badge, html[data-ui="v2"] .rv-bills .badge { font-family: var(--display); font-weight: 800; border-radius: 12px; } html[data-ui="v2"] .rv-wait .go { background: var(--blue); border-radius: 999px; font-weight: 750; } html[data-ui="v2"] .rv-wait .tx b, html[data-ui="v2"] .rv-bills .tx b { font-family: var(--display); letter-spacing: -.02em; } html[data-ui="v2"] .rv-bills .am { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html[data-ui="v2"] .bk .rv-card.rv-stack > div:first-child b { font-family: var(--display); letter-spacing: -.02em; } html[data-ui="v2"] .bk .au-note { border-radius: 12px; background: rgba(240,160,43,.12); box-shadow: none; color: #7A4A06; font-weight: 600; line-height: 1.45; } html[data-ui="v2"] .bk .rv-pill { font-weight: 750; } .st-g { display: grid; gap: 3px; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; color: #11763F; background: rgba(37,168,98,.13); } .st-g b { font-size: calc(14.5px * var(--fs)); } .st-g span { font-size: calc(13px * var(--fs)); font-weight: 550; line-height: 1.4; color: var(--ink-2); } html[data-theme$="night"] .st-g { color: #6FE0A2; }
.pw-mk { display: block; width: 48px; height: 48px; border-radius: 14px; margin-bottom: 14px; box-shadow: 0 8px 20px rgba(var(--accent-rgb), .2), 0 0 0 1px rgba(var(--shadow-rgb), .1); } html[data-ui="v2"] body { background: var(--bg); } .g-hero { display: flex; align-items: center; gap: 14px; padding: 28px var(--gutter) 6px; } .g-mk { flex: none; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 26px; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 10px 24px rgba(229,86,11,.3), inset 0 1px 0 rgba(255,255,255,.35); } .g-who { min-width: 0; } .g-who h1 { margin: 2px 0 0; font-family: var(--display); font-weight: 800; font-size: calc(28px * min(var(--fs), 1.1)); letter-spacing: -.045em; line-height: 1.02; overflow-wrap: anywhere; } .g-who p { margin: 4px 0 0; font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); } .g-table { display: inline-block; font-size: calc(11.5px * var(--fs)); font-weight: 750; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } html[data-ui="v2"] .g-bar { background: color-mix(in srgb, var(--bg) 82%, transparent); padding: 12px 0 8px; } html[data-ui="v2"] .g-cat { margin: 26px var(--gutter) 10px; display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: calc(19px * var(--fs)); font-weight: 750; letter-spacing: -.03em; text-transform: none; color: var(--ink); } html[data-ui="v2"] .g-cat::before { content: ''; width: 4px; height: 18px; border-radius: 2px; background: var(--blue); } html[data-ui="v2"] .g-item { border-radius: 16px; padding: 14px; } html[data-ui="v2"] .g-item .nm > div:nth-child(2) > div:first-child { font-family: var(--display); letter-spacing: -.02em; } html[data-ui="v2"] .g-item .nm > div:last-child { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } html[data-ui="v2"] .g-sizes { display: inline-block; margin-top: 8px; padding: 5px 10px; border-radius: 10px; background: rgba(var(--shadow-rgb), .08); font-weight: 650; } html[data-ui="v2"] .g-opts { color: var(--ink-2); } .g-pw { display: inline-flex; align-items: center; gap: 8px; } .g-pw img { border-radius: 5px; } @media (min-width: 640px) { .g-hero, html[data-ui="v2"] .g-cat { margin-left: auto; margin-right: auto; } } html[data-ui="v2"] .fbk-mark { border-radius: 18px; background: linear-gradient(145deg, #FF8A3D, #E5560B); font-family: var(--display); box-shadow: 0 10px 24px rgba(229,86,11,.3), inset 0 1px 0 rgba(255,255,255,.35); } html[data-ui="v2"] .fbk-eyebrow { letter-spacing: .1em; font-weight: 700; } html[data-ui="v2"] .fbk-title { font-family: var(--display); font-weight: 800; letter-spacing: -.045em; } html[data-ui="v2"] .fbk-card { border-radius: 20px; } html[data-ui="v2"] .fbk-stars button svg { stroke: var(--ink-2); stroke-width: 1.5; } html[data-ui="v2"] .fbk-stars button.on svg, html[data-ui="v2"] .fbk-stars button[aria-checked="true"] svg { fill: #FFB020; stroke: #E58A00; filter: drop-shadow(0 4px 8px rgba(229,138,0,.35)); } html[data-ui="v2"] .fbk-label { font-family: var(--display); font-weight: 750; letter-spacing: -.02em; font-size: calc(18px * var(--fs)); color: var(--ink); } html[data-ui="v2"] .fbk-q { border-radius: 14px; } html[data-ui="v2"] .fbk-q .yn button { border-radius: 10px; min-height: 38px; font-weight: 700; } html[data-ui="v2"] .fbk-q .yn button[aria-pressed="true"] { background: var(--blue); box-shadow: none; } html[data-ui="v2"] .fbk-go { border-radius: 14px; background: linear-gradient(90deg, #E5560B, #FF7A29); box-shadow: 0 10px 24px rgba(229,86,11,.3); } html[data-ui="v2"] .fbk-var { border-radius: 14px; } html[data-ui="v2"] #ob-body .rv-card, html[data-ui="v2"] #pw-form { border-radius: 20px; } html[data-ui="v2"] #ob-dots { height: 8px; } html[data-ui="v2"] #ob-title { font-family: var(--display); }
.ar-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 18px; background: var(--raised); box-shadow: var(--sh-lg); overflow: hidden; } .ar-sum > div { padding: 14px 8px; text-align: center; } .ar-sum > div + div { border-left: 1px solid rgba(var(--shadow-rgb), .18); } .ar-sum b { display: block; font-family: var(--display); font-weight: 800; font-size: calc(26px * var(--fs)); letter-spacing: -.045em; line-height: 1.05; } .ar-sum span { display: block; margin-top: 3px; font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--label); } html[data-ui="v2"] .ar-card { border-radius: 18px; position: relative; } html[data-ui="v2"] .ar-card > div:first-child h3 { font-family: var(--display); letter-spacing: -.03em; font-size: calc(18px * var(--fs)); } html[data-ui="v2"] .ar-card > div:first-child h3::before { display: none; } .ar-mk { flex: none; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: calc(22px * var(--fs)); color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 8px 18px rgba(229,86,11,.28), inset 0 1px 0 rgba(255,255,255,.35); } .ar-card.off { opacity: .8; } .ar-card.off .ar-mk { background: linear-gradient(145deg, #9A9AA3, #6B6B75); box-shadow: none; } html[data-ui="v2"] .ar-card .rv-pill { font-weight: 750; box-shadow: none; } html[data-ui="v2"] .ar-card .rv-pill.is-free { color: #11763F; background: rgba(37,168,98,.14); } html[data-ui="v2"] .ar-card .rv-pill.is-late { color: var(--red); background: rgba(179,38,30,.12); } html[data-ui="v2"] .ar-card .rv-pill.is-ordered { color: #A25A06; background: rgba(240,160,43,.2); } html[data-ui="v2"] #new-rest-body .rv-card.pressed { border-radius: 16px; border: 2px dashed rgba(var(--shadow-rgb), .35); background: transparent; box-shadow: none; } html[data-ui="v2"] #new-rest-body .rv-card.pressed b { font-family: var(--display); letter-spacing: -.03em; } .hl-sum { border-radius: 18px; padding: 18px; display: grid; gap: 4px; color: #fff; background: linear-gradient(145deg, #25A862, #11763F); box-shadow: 0 14px 30px rgba(17,118,63,.28); } .hl-sum.warn { background: linear-gradient(145deg, #F0A02B, #C97A06); box-shadow: 0 14px 30px rgba(201,122,6,.28); } .hl-sum.bad { background: linear-gradient(145deg, #E5564B, #B3261E); box-shadow: 0 14px 30px rgba(179,38,30,.28); } .hl-sum b { font-family: var(--display); font-weight: 800; font-size: calc(24px * var(--fs)); letter-spacing: -.04em; } .hl-sum span { font-size: calc(13px * var(--fs)); font-weight: 600; opacity: .85; } html[data-ui="v2"] .hl-row { position: relative; overflow: hidden; padding-left: 20px !important; border-radius: 16px; } html[data-ui="v2"] .hl-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--green-dot); } html[data-ui="v2"] .hl-row.hl-warn::before { background: #F0A02B; } html[data-ui="v2"] .hl-row.hl-fail::before { background: var(--red); } html[data-ui="v2"] .hl-row b { font-family: var(--display); letter-spacing: -.02em; } html[data-ui="v2"] .hl-row .rv-pill { font-weight: 750; box-shadow: none; } html[data-ui="v2"] .hl-row .rv-pill.is-free { color: #11763F; background: rgba(37,168,98,.14); } html[data-ui="v2"] .hl-row .rv-pill.is-ordered { color: #A25A06; background: rgba(240,160,43,.2); } html[data-ui="v2"] .hl-row .rv-pill.is-late { color: var(--red); background: rgba(179,38,30,.12); } html[data-ui="v2"] .qr-card { border-radius: 18px; padding: 14px 14px 12px; background: #fff; } html[data-ui="v2"] .qr-card .qr-brand { display: flex; align-items: center; justify-content: center; gap: 6px; font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 750; letter-spacing: .02em; color: var(--ink-2); margin-bottom: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } html[data-ui="v2"] .qr-card .qr-brand img { border-radius: 6px; flex: none; } html[data-ui="v2"] .qr-card b { font-family: var(--display); font-weight: 800; letter-spacing: -.045em; font-size: calc(24px * var(--fs)); } html[data-ui="v2"] .qr-card .code { padding: 8px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1.5px rgba(23,24,28,.12); } @media print { html[data-ui="v2"] .qr-card .qr-brand { color: #000; } html[data-ui="v2"] .qr-card b { color: #000; } html[data-ui="v2"] .qr-card .code { box-shadow: none; } } .cp-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .cp-top b { font-family: var(--display); font-weight: 800; font-size: calc(26px * var(--fs)); letter-spacing: -.045em; margin-right: 8px; } .cp-top span { font-size: calc(12px * var(--fs)); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--label); } .cp-card { display: grid; gap: 10px; position: relative; } .cp-card.dim { opacity: .75; } .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cp-code { display: flex; align-items: center; gap: 10px; min-width: 0; } .cp-code b { font-family: var(--display); font-weight: 800; font-size: calc(21px * var(--fs)); letter-spacing: .04em; padding: 5px 12px; border-radius: 10px; border: 1.5px dashed rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .08); } .cp-copy { all: unset; cursor: pointer; font-size: calc(12.5px * var(--fs)); font-weight: 750; color: var(--link, var(--blue)); padding: 6px 4px; } .cp-off { font-family: var(--display); font-weight: 750; font-size: calc(17px * var(--fs)); letter-spacing: -.02em; } .cp-off span { font-family: inherit; font-weight: 550; font-size: calc(13.5px * var(--fs)); color: var(--ink-2); letter-spacing: 0; } .cp-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .cp-act { display: flex; gap: 8px; flex-wrap: wrap; } .cp-plans { display: flex; gap: 8px; flex-wrap: wrap; } .pl-card { display: grid; gap: 10px; } .pl-card.dim { opacity: .75; } .pl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .pl-head b { display: block; font-family: var(--display); font-weight: 800; font-size: calc(19px * var(--fs)); letter-spacing: -.03em; } .pl-head small { display: block; margin-top: 2px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .pl-flags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } .pl-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .pl-prices > div { padding: 9px 10px; border-radius: 12px; background: rgba(var(--shadow-rgb), .1); } .pl-prices small { display: block; font-size: calc(10.5px * var(--fs)); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); } .pl-prices b { font-family: var(--display); font-weight: 800; font-size: calc(16px * var(--fs)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .pl-meta { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); }
.md-wrap { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); } .md-wrap > * { min-width: 0; } .md-hero .amt { margin-bottom: 4px; } .md-hero .stats { padding-top: 2px; } .md-hero .stats.md-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md-hero .st { padding-left: 0; } .md-hero .st + .st { padding-left: 14px; } .md-hero .st .tx { display: flex; flex-direction: column; gap: 1px; } .md-hero .st b { font-size: calc(22px * var(--fs)); } .md-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .md-tile { padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; } .md-tile b { font-family: var(--display); font-weight: 800; font-size: calc(24px * var(--fs)); letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; } .md-tile span { font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); } .md-tile.warn b { color: var(--amber); } .md-now { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: inherit; padding: 16px; position: relative; } .md-now b { font-family: var(--display); font-weight: 800; font-size: calc(30px * var(--fs)); letter-spacing: -.05em; line-height: 1; color: var(--link, var(--blue)); } .md-now span { font-size: calc(14px * var(--fs)); font-weight: 650; color: var(--ink-2); flex: 1; } .md-now em { font-style: normal; font-size: calc(20px * var(--fs)); color: var(--ink-2); } .md-shift .row { display: flex; align-items: baseline; gap: 10px; } .md-shift .row b { font-family: var(--display); font-weight: 800; font-size: calc(26px * var(--fs)); letter-spacing: -.04em; } .md-shift .row span { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); } .md-chip { font-size: calc(11.5px * var(--fs)); font-weight: 750; padding: 5px 11px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .12); } .md-chip.on { color: #11763F; background: rgba(37,168,98,.15); } .md-cols { display: flex; align-items: flex-end; gap: 8px; height: 110px; } .md-cols .c { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; } .md-cols .c i { display: block; width: 100%; max-width: 30px; border-radius: 7px 7px 3px 3px; background: color-mix(in srgb, var(--blue) 28%, transparent); min-height: 3px; } .md-cols .c.now i { background: var(--blue); } .md-cols .c span { font-size: calc(10.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .md-cols .c.now span { color: var(--link, var(--blue)); } .md-recent .tl { list-style: none; margin: 0; padding: 0 0 0 18px; display: grid; gap: 12px; position: relative; } .md-recent .tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: rgba(var(--shadow-rgb), .2); } .md-recent .tl li { position: relative; display: flex; justify-content: space-between; gap: 10px; font-size: calc(14px * var(--fs)); font-weight: 600; } .md-recent .tl li i { position: absolute; left: -18px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--bg); } .md-recent .tl li em { font-style: normal; font-size: calc(12px * var(--fs)); color: var(--ink-2); font-variant-numeric: tabular-nums; } @media (min-width: 1024px) { .md-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; } .md-wrap > .md-hero { grid-column: 1 / -1; } .md-wrap > .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dx { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); --dx-green: #1F9D5B; --dx-violet: #6B57E0; --dx-amber: #E59A1A; } html[data-theme$="night"] .dx { --dx-green: #4FD39A; --dx-violet: #A99BFF; --dx-amber: #FFB547; } .dx > * { min-width: 0; } .dx-card { background: var(--raised); box-shadow: var(--sh-md); border-radius: 20px; padding: 16px; position: relative; } .dx-card .hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .dx-card h3 { margin: 0; font-family: var(--display); font-weight: 750; font-size: calc(16px * var(--fs)); letter-spacing: -.025em; } .dx-card .hd p { margin: 3px 0 0; font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .dx-card .more { font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); text-decoration: none; } .dx-card .empty { margin: 4px 0 0; font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.45; } .dx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .dx-live { display: inline-flex; align-items: center; gap: 8px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); min-width: 0; } .dx-live b { font-weight: 800; color: var(--dx-green); letter-spacing: .02em; } .dx-live span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--dx-green); position: relative; flex: none; display: inline-block; } .pulse::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--dx-green); opacity: 0; animation: dxpulse 1.8s ease-out infinite; } @keyframes dxpulse { 0% { transform: scale(.5); opacity: .7; } 100% { transform: scale(1.4); opacity: 0; } } .dx-acts { display: flex; gap: 8px; align-items: center; flex: 1; justify-content: flex-end; } .dx-new, .dx-tb { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 42px; border-radius: 13px; text-decoration: none; font-weight: 700; font-size: calc(13.5px * var(--fs)); } .dx-new { padding: 0 16px; color: #fff; background: linear-gradient(135deg, #E5560B, #FF7A29); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.3); flex: 1; max-width: 190px; } .dx-tb { padding: 0 12px; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); } .dx-new svg, .dx-tb svg { width: 18px; height: 18px; } .dx-tb svg { color: var(--link, var(--blue)); } .dx-new:active, .dx-tb:active { transform: translateY(1px); } @media (max-width: 560px) { .dx-tb span { display: none; } .dx-tb { width: 42px; padding: 0; } .dx-acts { flex: 1 1 100%; justify-content: stretch; } .dx-new { max-width: none; } } .dx-kpis { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; scroll-padding: 0 var(--gutter); } .dx-kpis::-webkit-scrollbar { display: none; } .dx-kpi { scroll-snap-align: start; display: flex; flex-direction: column; gap: 5px; padding: 12px 14px 11px; text-decoration: none; color: inherit; overflow: hidden; transition: transform .18s ease; } .dx-kpi:active { transform: scale(.985); } .dx-kpi .k1 { display: flex; align-items: center; gap: 9px; } .dx-kpi .ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); } .dx-kpi .ico svg { width: 16px; height: 16px; stroke: currentColor; } .dx-kpi .lb { flex: 1; min-width: 0; font-size: calc(12.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dx-kpi .val b { font-family: var(--display); font-weight: 800; font-size: calc(28px * var(--fs)); letter-spacing: -.05em; line-height: 1.05; font-variant-numeric: tabular-nums; } .dx-kpi .foot { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dx-kpi.sales { --kc: var(--blue); } .dx-kpi.bills { --kc: var(--dx-green); } .dx-kpi.collect { --kc: var(--dx-violet); } .dx-kpi.open { --kc: var(--dx-amber); } .spk-wrap { position: relative; height: 34px; margin: 2px -2px 0; color: var(--kc); } .spk { width: 100%; height: 100%; display: block; overflow: visible; } .spk-dot { position: absolute; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--bg, #fff), 0 0 0 4px color-mix(in srgb, currentColor 35%, transparent); } .dx-dots { display: flex; flex-wrap: wrap; gap: 6px; height: 34px; align-content: center; } .dx-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--track); } .dx-dots i.on { background: var(--dx-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dx-amber) 25%, transparent); animation: dxbeat 2.2s ease-in-out infinite; } .dx-dots i.on:nth-child(2n) { animation-delay: .4s; } .dx-dots i.on:nth-child(3n) { animation-delay: .8s; } @keyframes dxbeat { 50% { transform: scale(.8); opacity: .65; } } .dx-pays { display: grid; gap: 9px; margin: 12px 0 6px; --pc-cash: var(--chart-b, #3B4CCA); --pc-upi: var(--chart-a, #E5560B); } .dx-pays .sb { display: flex; gap: 3px; height: 6px; } .dx-pays .sb i { border-radius: 3px; min-width: 6px; } .dx-pays .sb i.c { background: var(--pc-cash); } .dx-pays .sb i.u { background: var(--pc-upi); } .dx-pays .sb i.z { flex: 1; background: var(--track); } .dx-pays .ln { display: flex; justify-content: space-between; gap: 8px; } .dx-pays .pp { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: calc(11px * var(--fs)); font-weight: 650; color: var(--ink-2); white-space: nowrap; } .dx-pays .pp i { width: 8px; height: 8px; border-radius: 3px; flex: none; } .dx-pays .pp.c i { background: var(--pc-cash); } .dx-pays .pp.u i { background: var(--pc-upi); } .dx-pays .pp b { color: var(--ink); font-family: var(--display); font-weight: 800; font-size: calc(12.5px * var(--fs)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dx-split { display: flex; gap: 4px; height: 8px; margin: 13px 0 11px; } .dx-split i { border-radius: 6px; min-width: 8px; } .dx-split i.a { background: var(--kc); } .dx-split i.b { background: color-mix(in srgb, var(--kc) 38%, transparent); } .dx-split i.z { flex: 1; background: var(--track); } .dx-kpi .foot b { color: var(--ink); font-family: var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dx-d { flex: none; font-size: calc(11px * var(--fs)); font-weight: 800; padding: 3px 8px; border-radius: 999px; font-variant-numeric: tabular-nums; } .dx-d.up { color: #11763F; background: rgba(37,168,98,.15); } .dx-d.down { color: #C2460A; background: rgba(229,86,11,.13); } .dx-d.flat { color: var(--ink-2); background: rgba(var(--shadow-rgb), .12); } html[data-theme$="night"] .dx-d.up { color: #5FD39A; } html[data-theme$="night"] .dx-d.down { color: #FF9A55; } .dx-chart { padding-bottom: 12px; } .dx-chart .legend { display: flex; gap: 12px; font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2); flex: none; } .dx-chart .legend span { display: inline-flex; align-items: center; gap: 6px; } .dx-chart .legend i { width: 14px; height: 0; border-top: 3px solid var(--blue); border-radius: 2px; } .dx-chart .legend i.b { border-top: 2px dashed var(--ink-2); opacity: .7; } .dx-chart .plot { position: relative; height: 190px; touch-action: pan-y; cursor: crosshair; } .dx-chart .hc { width: 100%; height: 100%; display: block; overflow: visible; } .dx-chart .cross { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--ink-2); opacity: .35; pointer-events: none; } .dx-chart .cdot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--bg, #fff), 0 4px 10px rgba(var(--accent-rgb), .45); pointer-events: none; } .dx-chart .tip { position: absolute; top: -6px; transform: translate(-50%, -100%); min-width: 150px; padding: 9px 12px; border-radius: 12px; background: var(--ink); color: var(--bg); font-size: calc(12px * var(--fs)); box-shadow: 0 12px 28px rgba(0,0,0,.28); pointer-events: none; display: grid; gap: 3px; z-index: 3; } .dx-chart .tip b { font-family: var(--display); font-size: calc(13px * var(--fs)); } .dx-chart .tip span { display: flex; align-items: center; gap: 7px; opacity: .9; } .dx-chart .tip span i { width: 8px; height: 8px; border-radius: 50%; background: #FF8A3D; flex: none; } .dx-chart .tip span.y i { background: transparent; box-shadow: inset 0 0 0 2px currentColor; opacity: .7; } .dx-chart .tip em { font-style: normal; margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; } .dx-chart .ax { position: relative; height: 18px; margin-top: 6px; } .dx-chart .ax span { position: absolute; transform: translateX(-50%); font-size: calc(10px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dx-chart .cf { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(var(--shadow-rgb), .25); font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dx-chart .cf b { color: var(--ink); font-family: var(--display); letter-spacing: -.02em; margin-left: 4px; } .dx .body { display: flex; align-items: center; gap: 16px; } .ringw { position: relative; flex: none; } .ringw svg { width: 100%; height: 100%; display: block; } .ringw .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 14px; } .ringw .mid b { font-family: var(--display); font-weight: 800; font-size: calc(24px * var(--fs)); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .dx-pay .ringw .mid b { font-size: calc(15px * var(--fs)); } .ringw .mid small { font-size: calc(10.5px * var(--fs)); font-weight: 650; color: var(--ink-2); margin-top: 3px; } .dx .lgd { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; flex: 1; min-width: 0; } .dx .lgd li { display: flex; align-items: center; gap: 9px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dx .lgd li i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .dx .lgd li i.c { background: #F0A02B; } .dx .lgd li i.b { background: var(--blue); } .dx .lgd li i.f { background: var(--track); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .3); } .dx .lgd li span { flex: 1; min-width: 0; } .dx .lgd li b { color: var(--ink); font-family: var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dx .lgd li em { font-style: normal; width: 36px; text-align: right; font-size: calc(11.5px * var(--fs)); } .dx .lgd li u { display: none; } .dx-side { display: grid; gap: 14px; align-content: start; } .dx-attn .badge { font-size: calc(11.5px * var(--fs)); font-weight: 800; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 11px; color: #fff; background: var(--dx-amber); } .dx-attn .list { display: grid; } .dx-attn .it { display: flex; align-items: center; gap: 11px; padding: 10px 0; text-decoration: none; color: var(--ink); font-size: calc(13.5px * var(--fs)); font-weight: 600; line-height: 1.3; } .dx-attn .it + .it { border-top: 1px solid rgba(var(--shadow-rgb), .12); } .dx-attn .it i { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 18%, transparent); } .dx-attn .it.amber i { background: var(--dx-amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dx-amber) 20%, transparent); } .dx-attn .it.grey i { background: var(--ink-2); box-shadow: 0 0 0 4px rgba(var(--shadow-rgb), .14); } .dx-attn .it span { flex: 1; min-width: 0; } .dx-attn .it em { font-style: normal; color: var(--ink-2); font-size: calc(18px * var(--fs)); } .dx-attn .allgood { margin: 0; font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); } .dx-attn .allgood b { color: var(--dx-green); display: block; font-size: calc(14.5px * var(--fs)); margin-bottom: 2px; } .dx-top .seg { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--pressed); box-shadow: var(--sh-in-sm); flex: none; } .dx-top .seg button { all: unset; box-sizing: border-box; cursor: pointer; padding: 5px 11px; border-radius: 8px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); } .dx-top .seg button[aria-pressed="true"] { background: var(--raised-hi); color: var(--ink); box-shadow: var(--sh-seg); } .dx-top .seg button:focus-visible { outline: 2px solid var(--blue); } .dx-top ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .dx-top li { display: flex; gap: 12px; align-items: flex-start; } .dx-top .n { flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: calc(11.5px * var(--fs)); font-weight: 800; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); margin-top: 1px; } .dx-top li.first .n { color: #fff; background: var(--blue); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .35); } .dx-top .bd { flex: 1; min-width: 0; } .dx-top .r { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .dx-top .nm { font-size: calc(14px * var(--fs)); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dx-top .r b { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(14.5px * var(--fs)); font-variant-numeric: tabular-nums; flex: none; } .dx-top .bar { height: 6px; border-radius: 3px; background: var(--track); margin: 7px 0 5px; overflow: hidden; } .dx-top .bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, color-mix(in srgb, var(--blue) 45%, transparent), color-mix(in srgb, var(--blue) 80%, transparent)); transform-origin: left; } .dx-top li.first .bar i { background: linear-gradient(90deg, #FF8A3D, var(--blue)); } .dx-top small { font-size: calc(11.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .dx-feed .live { display: inline-flex; align-items: center; gap: 7px; font-size: calc(11.5px * var(--fs)); font-weight: 750; color: var(--dx-green); } .dx-feed ul { list-style: none; margin: 0; padding: 0; display: grid; } .dx-feed li { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .dx-feed li + li { border-top: 1px solid rgba(var(--shadow-rgb), .12); } .dx-feed .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--dx-green); background: color-mix(in srgb, var(--dx-green) 14%, transparent); } .dx-feed li.order .ic { color: var(--dx-violet); background: color-mix(in srgb, var(--dx-violet) 14%, transparent); } .dx-feed .ic svg { width: 17px; height: 17px; stroke: currentColor; } .dx-feed .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dx-feed .tx b { font-size: calc(13.5px * var(--fs)); font-weight: 700; } .dx-feed .tx small { font-size: calc(11.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .dx-feed .amt { font-style: normal; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(14.5px * var(--fs)); font-variant-numeric: tabular-nums; } .dx-feed .pill { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 750; padding: 4px 10px; border-radius: 999px; color: var(--dx-violet); background: color-mix(in srgb, var(--dx-violet) 14%, transparent); } .dx-week .tot { font-family: var(--display); font-weight: 800; letter-spacing: -.04em; font-size: calc(18px * var(--fs)); font-variant-numeric: tabular-nums; } .dx-week .cols { display: flex; align-items: flex-end; gap: 8px; height: 168px; padding-top: 6px; } .dx-week .c { position: relative; flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 5px; outline: none; } .dx-week .c em { font-style: normal; font-size: calc(9.5px * var(--fs)); font-weight: 700; color: var(--ink-2); height: 12px; white-space: nowrap; } .dx-week .c .b { display: block; width: 100%; max-width: 34px; border-radius: 9px 9px 4px 4px; background: color-mix(in srgb, var(--blue) 26%, transparent); min-height: 3px; transition: background .15s, transform .15s; } .dx-week .c.now .b { background: linear-gradient(180deg, #FF8A3D, var(--blue)); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .3); } .dx-week .c:hover .b, .dx-week .c:focus-visible .b { background: color-mix(in srgb, var(--blue) 55%, transparent); transform: translateY(-2px); } .dx-week .c.now:hover .b { background: linear-gradient(180deg, #FF8A3D, var(--blue)); } .dx-week .c span { font-size: calc(10.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dx-week .c.now span, .dx-week .c.now em { color: var(--link, var(--blue)); } .dx-week .c::after { content: attr(data-tip); position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, -4px); padding: 6px 10px; border-radius: 9px; background: var(--ink); color: var(--bg); font-size: 11.5px; font-weight: 650; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 4; box-shadow: 0 10px 24px rgba(0,0,0,.25); } .dx-week .c:hover::after, .dx-week .c:focus-visible::after { opacity: 1; } .dx-week .c:first-child::after { left: 0; transform: translate(0, -4px); } .dx-week .c:last-child::after { left: auto; right: 0; transform: translate(0, -4px); } .dx-tax h3 { margin-bottom: 10px; } .dx-tax .chips { display: flex; flex-wrap: wrap; gap: 8px; } .dx-tax .chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .dx-tax .chip b { color: var(--ink); font-family: var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .dx-tax .chip.neg b { color: var(--red); } @media (prefers-reduced-motion: no-preference) { .dx.enter > * { animation: dxin .5s cubic-bezier(.2,.7,.2,1) both; } .dx.enter > :nth-child(2) { animation-delay: .05s; } .dx.enter > :nth-child(3) { animation-delay: .1s; } .dx.enter > :nth-child(4) { animation-delay: .15s; } .dx.enter > :nth-child(5) { animation-delay: .2s; } .dx.enter > :nth-child(6) { animation-delay: .25s; } .dx.enter > :nth-child(7) { animation-delay: .3s; } .dx.enter > :nth-child(8) { animation-delay: .35s; } .dx.enter .dx-top .bar i { animation: dxgrow .8s .3s cubic-bezier(.2,.7,.2,1) both; } } @keyframes dxin { from { opacity: 0; transform: translateY(10px); } } @keyframes dxgrow { from { transform: scaleX(0); } } @media (min-width: 640px) { .dx { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .dx-bar, .dx-kpis, .dx-chart, .dx-side, .dx-tax { grid-column: 1 / -1; } .dx-kpis { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; margin: 0; padding: 0; } .dx-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-chart .plot { height: 230px; } } @media (min-width: 1100px) { .dx { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; } .dx-bar { grid-column: 1 / -1; } .dx-kpis { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); } .dx-chart { grid-column: span 8; } .dx-side { grid-column: span 4; grid-template-columns: 1fr; } .dx-top { grid-column: span 4; } .dx-week { grid-column: span 4; } .dx-pay { grid-column: span 4; } .dx-feed { grid-column: span 8; } .dx-tax { grid-column: span 4; align-self: start; } .dx-chart .plot { height: 270px; } .dx-kpi .val b { font-size: calc(32px * var(--fs)); } .dx-pay { display: flex; flex-direction: column; padding: 22px 24px; } .dx-pay .hd h3 { font-size: calc(19px * var(--fs)); } .dx-pay .body { flex: 1; flex-direction: column; justify-content: center; gap: 26px; } .dx-pay .ringw { width: 200px !important; height: 200px !important; } .dx-pay .ringw .mid b { font-size: calc(28px * var(--fs)); } .dx-pay .ringw .mid small { font-size: calc(12.5px * var(--fs)); } .dx-pay .lgd { width: 100%; gap: 12px; flex: none; } .dx-pay .lgd li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px; padding: 14px 18px 15px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); font-size: calc(15px * var(--fs)); } .dx-pay .lgd li i { width: 12px; height: 12px; border-radius: 4px; } .dx-pay .lgd li b { font-size: calc(20px * var(--fs)); } .dx-pay .lgd li em { width: auto; font-size: calc(14px * var(--fs)); font-weight: 750; color: var(--ink); } .dx-pay .lgd li u { display: block; grid-column: 1 / -1; height: 7px; border-radius: 99px; background: var(--track); position: relative; overflow: hidden; text-decoration: none; } .dx-pay .lgd li u::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--lc); } .dx-kpi.bk .sb { height: 10px; } .dx-kpi.bk .bd { gap: 14px; } } .dx-kpi .lb .dx-per { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; max-width: 100%; box-sizing: border-box; padding: 3px 8px 3px 0; font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--ink); -webkit-tap-highlight-color: transparent; } .dx-kpi .lb .dx-per span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dx-kpi .lb .dx-per .cr { flex: none; width: 7px; height: 7px; margin: -3px 0 0 3px; border-right: 2.4px solid var(--link, var(--blue)); border-bottom: 2.4px solid var(--link, var(--blue)); border-radius: 1px; rotate: 45deg; } .dx-kpi .lb .dx-per:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 8px; } .dx-pos { display: grid; gap: 8px; margin-bottom: 14px; } .dx-po { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .dx-po span { display: grid; gap: 1px; } .dx-po b { font-size: calc(15px * var(--fs)); font-weight: 700; } .dx-po small { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dx-po .ck { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: transparent; box-shadow: inset 0 0 0 2px rgba(var(--shadow-rgb), .4); } .dx-po[aria-pressed="true"] { box-shadow: var(--sh-sm), inset 0 0 0 1.5px rgba(var(--accent-rgb), .6); } .dx-po[aria-pressed="true"] .ck { color: #fff; background: var(--blue); box-shadow: none; } .dx-po:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .dx-pd { display: grid; gap: 8px; padding: 14px 16px; border-radius: 18px; background: var(--pressed); box-shadow: var(--sh-in-sm, none); } .dx-pd.on { box-shadow: var(--sh-in-sm, none), inset 0 0 0 1.5px rgba(var(--accent-rgb), .6); } .dx-pd b { font-size: calc(14px * var(--fs)); font-weight: 700; } .dx-pd .row { display: flex; gap: 10px; } .dx-pd .row .rv-input { flex: 1; min-width: 0; } @property --ai-a { syntax: '<color>'; inherits: true; initial-value: #E5560B; } @property --ai-b { syntax: '<color>'; inherits: true; initial-value: #FF8A3D; } .dx-ai-sec { margin-top: 12px; } .dx-ai-sec + .rv-section { margin-top: 12px; } .dx-ai { all: unset; box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 11px; width: 100%; max-width: 640px; padding: 10px 14px 10px 12px; border-radius: 16px; cursor: default; -webkit-tap-highlight-color: transparent; --ai-a: #E5560B; --ai-b: #FF8A3D; background: color-mix(in srgb, var(--ai-a) 11%, #FFFDF9); box-shadow: var(--sh-in-sm); transition: --ai-a .45s ease, --ai-b .45s ease, box-shadow .2s ease; } html[data-theme$="night"] .dx-ai { background: color-mix(in srgb, var(--ai-a) 20%, #14110E); } .dx-ai[data-type="good"] { --ai-a: #1F9D5B; --ai-b: #3CCB7F; } .dx-ai[data-type="warn"] { --ai-a: #D97706; --ai-b: #FFB547; } .dx-ai.multi { cursor: pointer; } .dx-ai.multi:active { box-shadow: var(--sh-in-md); } .dx-ai:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .dx-ai .beam { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; } .dx-ai .beam rect { fill: none; stroke: var(--ai-a); stroke-width: 1.5; } .dx-ai .beam .b1 { stroke-dasharray: 26 74; opacity: .3; } .dx-ai .beam .b2 { stroke: var(--ai-b); stroke-dasharray: 0 17 9 74; } .dx-ai .gem { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--ai-b), var(--ai-a)); box-shadow: 0 4px 10px color-mix(in srgb, var(--ai-a) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.4); } .dx-ai .gem svg { width: 15px; height: 15px; fill: currentColor; } .dx-ai .gem.tw { animation: aitw .55s cubic-bezier(.2,.9,.3,1.3); } .dx-ai.ld .gem { animation: aibreath 1.7s ease-in-out infinite; } @keyframes aitw { 0% { scale: .8; rotate: -24deg; } 60% { scale: 1.12; rotate: 6deg; } 100% { scale: 1; rotate: 0deg; } } @keyframes aibreath { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .9; opacity: .72; } } .dx-ai .stk { flex: 1; min-width: 0; display: grid; } .dx-ai .ln { grid-area: 1 / 1; font-size: calc(13px * var(--fs)); font-weight: 650; line-height: 1.38; letter-spacing: -.01em; color: var(--ink); opacity: 0; translate: 0 5px; pointer-events: none; transition: opacity .3s ease, translate .38s cubic-bezier(.2,.8,.2,1); } .dx-ai .ln.on { opacity: 1; translate: 0 0; transition-delay: .06s; } .dx-ai.ld .ln { color: var(--ink-2); font-weight: 550; animation: aibreath 1.7s ease-in-out infinite; } .dx-ai .ai-b { display: none; flex: none; font-style: normal; font-size: calc(9px * var(--fs)); font-weight: 800; letter-spacing: .06em; padding: 2px 6px; border-radius: 99px; color: #fff; background: linear-gradient(145deg, var(--ai-b), var(--ai-a)); } .dx-ai[data-src="ai"] .ai-b { display: inline-block; } @media (prefers-reduced-motion: reduce) { .dx-ai, .dx-ai .ln { transition: none; } .dx-ai .gem, .dx-ai .gem.tw, .dx-ai.ld .ln { animation: none; } .dx-ai .beam { display: none; } } .ai-wrap { max-width: 560px; } .ai-st { display: flex; align-items: center; gap: 14px; } .ai-st .gem { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; letter-spacing: .04em; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .ai-st.on .gem { color: #fff; background: linear-gradient(145deg, #3CCB7F, #1F9D5B); box-shadow: 0 7px 14px rgba(31,157,91,.35), inset 0 1px 0 rgba(255,255,255,.4); } .ai-st .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .ai-st .tx b { font-family: var(--display); font-size: calc(15.5px * var(--fs)); letter-spacing: -.02em; } .ai-st .tx small { font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.35; } .ai-steps h3, .ai-form h3, .ai-try h3 { margin: 0 0 12px; font-family: var(--display); font-weight: 750; font-size: calc(16px * var(--fs)); letter-spacing: -.025em; } .ai-steps ol { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 12px; } .ai-steps li { display: flex; gap: 12px; align-items: flex-start; } .ai-steps li i { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 800; color: var(--link, var(--blue)); background: var(--pressed); box-shadow: var(--sh-in-sm); } .ai-steps li div { display: grid; gap: 2px; min-width: 0; } .ai-steps li b { font-size: calc(14px * var(--fs)); font-weight: 700; } .ai-steps li span { font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.4; } .ai-form .fld { position: relative; margin-bottom: 10px; } .ai-form .fld .rv-input { width: 100%; padding-right: 64px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13.5px; } .ai-form .eye { all: unset; position: absolute; right: 6px; top: 50%; translate: 0 -50%; padding: 8px 10px; border-radius: 10px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--link, var(--blue)); } .ai-msg { margin: 0 0 10px; min-height: 0; font-size: calc(13px * var(--fs)); font-weight: 600; line-height: 1.4; color: var(--ink-2); } .ai-msg:empty { display: none; } .ai-msg.bad { color: var(--red, #B3261E); } .ai-msg.ok { color: var(--green, #11763F); } .ai-note { margin: 12px 0 0; font-size: calc(12.5px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.45; } .ai-try .ai-note { margin: 0 0 12px; } .ai-try .ai-msg { margin: 10px 0 0; } .ai-q { display: grid; gap: 7px; margin: 0 0 14px; } .ai-q .row { display: flex; align-items: baseline; gap: 8px; } .ai-q .row b { font-family: var(--display); font-size: calc(18px * var(--fs)); letter-spacing: -.02em; } .ai-q .row span { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .ai-q .bar { height: 8px; border-radius: 99px; background: var(--pressed); box-shadow: var(--sh-in-sm); overflow: hidden; } .ai-q .bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #3CCB7F, #1F9D5B); } .ai-q small { font-size: calc(12.5px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.45; } .rv-fl { position: relative; display: grid; min-width: 0; scroll-snap-align: start; } .rv-fl .fl-in { display: grid; } .rv-fl .fl-in > * { grid-area: 1 / 1; min-width: 0; height: 100%; box-sizing: border-box; } .rv-fl .fl-in > :nth-child(2), .rv-fl.on .fl-in > :first-child { visibility: hidden; } .rv-fl.on .fl-in > :nth-child(2) { visibility: visible; } .rv-fl.to-back .fl-in > :first-child, .rv-fl.to-front .fl-in > :nth-child(2) { visibility: visible; animation: flOut .24s cubic-bezier(.5, 0, 1, 1) forwards; } .rv-fl.to-back .fl-in > :nth-child(2), .rv-fl.to-front .fl-in > :first-child { visibility: visible; animation: flIn .3s .24s cubic-bezier(0, 0, .2, 1) both; } @keyframes flOut { from { transform: scaleX(1); opacity: 1; } to { transform: scaleX(0); opacity: .6; } } @keyframes flIn { from { transform: scaleX(0); opacity: .6; } to { transform: scaleX(1); opacity: 1; } } .rv-fl .fb { all: unset; box-sizing: border-box; position: absolute; right: 10px; bottom: 9px; z-index: 3; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; transition: color .25s, box-shadow .25s, rotate .54s cubic-bezier(.4, 0, .2, 1); } .rv-fl .fb svg { width: 14px; height: 14px; } .rv-fl.on .fb { color: var(--link, var(--blue)); box-shadow: var(--sh-in-sm); rotate: 180deg; } .rv-fl .fb:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .rv-fl.top .fb { top: 11px; bottom: auto; right: 12px; } .rv-fl.top .bl-ticket .hd span { margin-right: 36px; } .dx-kpi.fr { justify-content: space-between; } .dx-kpi.bk { justify-content: space-between; gap: 8px; container-type: inline-size; } .dx-kpi.bk .go { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); text-decoration: none; } .rv-fl.top .dx-kpi .k1 { padding-right: 34px; } .dx-kpi .val { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .dx-kpi.bk .go { justify-self: end; } .dx-kpi.bk .bd { display: grid; gap: 10px; } .dx-kpi.bk .sb { display: flex; gap: 3px; height: 8px; border-radius: 99px; overflow: hidden; } .dx-kpi.bk .sb i { display: block; min-width: 4px; border-radius: 99px; transform-origin: left; animation: wgrow .7s cubic-bezier(.2, .8, .2, 1) both; } .dx-kpi.bk .ws { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 8px; } .dx-kpi.bk .w { min-width: 0; padding: 8px 9px 9px; border-radius: 13px; background: var(--pressed); box-shadow: var(--sh-in-sm); display: grid; gap: 3px; } .dx-kpi.bk .w small { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: clamp(9.5px, 3.7cqw, 12.5px); font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); } .dx-kpi.bk .w small i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--wc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--wc) 22%, transparent); } .dx-kpi.bk .w small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dx-kpi.bk .w small em { margin-left: auto; font-style: normal; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--ink-2); } .dx-kpi.bk .w b { font-family: var(--display); font-weight: 800; font-size: clamp(12.5px, 5.4cqw, 20px); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 240px) { .dx-kpi.bk .sb { display: none; } .dx-kpi.bk .bd { gap: 6px; } .dx-kpi.bk .ws { grid-template-columns: 1fr; gap: 5px; } .dx-kpi.bk .w { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; border-radius: 11px; } .dx-kpi.bk .w small { font-size: 11px; } .dx-kpi.bk .w small em { display: none; } .dx-kpi.bk .w b { font-size: 14px; } } @keyframes wgrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .dx-kpi.bk .sb i { animation: none; } } .bl-ticket.bk .q { min-width: 48px; font-size: calc(12px * var(--fs)); letter-spacing: .04em; } .bl-ticket.bk .bk-empty { margin: 8px 0 2px; font-size: calc(13px * var(--fs)); font-weight: 500; color: var(--ink-2); line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .rv-fl .fb { transition: none; } } @media (min-width: 1100px) { .dx-kpi.fr { justify-content: space-between; } .dx-kpi.bk .sb { display: flex; height: 10px; } .dx-kpi.bk .bd { gap: 14px; } .dx-kpi.bk .ws { grid-template-columns: 1fr; gap: 8px; } .dx-kpi.bk .w { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 15px; border-radius: 15px; } .dx-kpi.bk .w small { flex: 1; font-size: calc(12.5px * var(--fs)); gap: 8px; } .dx-kpi.bk .w small em { display: inline; font-size: calc(12.5px * var(--fs)); } .dx-kpi.bk .w small i { width: 9px; height: 9px; } .dx-kpi.bk .w b { font-size: calc(20px * var(--fs)); } .dx-kpi.bk .go { font-size: calc(13px * var(--fs)); } } .dx-kpi.bk .hc { display: flex; align-items: flex-end; gap: 3px; height: 40px; } .dx-kpi.bk .hc i { flex: 1; min-height: 3px; height: var(--h); border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--kc) 26%, transparent); transform-origin: bottom; animation: hgrow .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 22ms); } .dx-kpi.bk .hc i.pk { background: linear-gradient(180deg, var(--kc), color-mix(in srgb, var(--kc) 62%, #fff)); } .dx-kpi.bk .hx { display: flex; justify-content: space-between; margin-top: -4px; font-size: calc(10px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dx-kpi.bk .vs { display: grid; gap: 9px; } .dx-kpi.bk .vr { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 9px; font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dx-kpi.bk .vr span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dx-kpi.bk .vr i { display: block; height: 10px; border-radius: 99px; background: var(--track); position: relative; overflow: hidden; } .dx-kpi.bk .vr i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--ink) 22%, transparent); transform-origin: left; animation: wgrow .7s cubic-bezier(.2, .8, .2, 1) both; } .dx-kpi.bk .vr.now i::after { background: linear-gradient(90deg, color-mix(in srgb, var(--kc) 70%, #fff), var(--kc)); } .dx-kpi.bk .vr b { font-family: var(--display); font-weight: 800; font-size: calc(13px * var(--fs)); color: var(--ink); font-variant-numeric: tabular-nums; } @keyframes hgrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @container (max-width: 240px) { .dx-kpi.bk .sx .ws { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .dx-kpi.bk .sx .w { display: grid; gap: 2px; padding: 6px 9px; border-radius: 11px; } .dx-kpi.bk .sx .w b { font-size: 14px; } .dx-kpi.bk .sx .w small { font-size: 10px; } .dx-kpi.bk .hc { height: 32px; } } @media (min-width: 1100px) { .dx-kpi.bk .hc { height: 72px; gap: 4px; } .dx-kpi.bk .hx { font-size: calc(11px * var(--fs)); margin-top: -6px; } .dx-kpi.bk .sx .ws { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dx-kpi.bk .sx .w { display: grid; gap: 3px; padding: 11px 14px; } .dx-kpi.bk .sx .w b { font-size: calc(21px * var(--fs)); } .dx-kpi.bk .vr { grid-template-columns: 84px minmax(0, 1fr) auto; font-size: calc(13px * var(--fs)); } .dx-kpi.bk .vr b { font-size: calc(16px * var(--fs)); } } @media (prefers-reduced-motion: reduce) { .dx-kpi.bk .hc i, .dx-kpi.bk .vr i::after { animation: none; } } #dx-ai-sheet.dxi { display: flex; flex-direction: column; padding: 0; height: min(92dvh, 780px); max-height: 92dvh; overflow: hidden; max-width: 560px; border-radius: 30px 30px 0 0; background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 9%, rgb(var(--glass-rgb))) 0, rgb(var(--glass-rgb)) 200px); box-shadow: 0 -18px 60px rgba(30, 20, 10, .28), 0 -1px 0 rgba(255, 255, 255, .6) inset; } #dx-ai-sheet.dxi::before { flex: none; margin: 10px auto 2px; } .dxi-h { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 18px 10px; } .dxi-h .gem { flex: none; width: 44px; height: 44px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .34), inset 0 1px 0 rgba(255, 255, 255, .45); } .dxi-h .gem svg { width: 22px; height: 22px; fill: currentColor; stroke: none; } .dxi-h .dxi-tt { flex: 1; min-width: 0; } .dxi-h h2 { margin: 0; font-family: var(--display); font-size: calc(24px * var(--fs)); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; outline: none; } .dxi-h .dxi-tt p { margin: 3px 0 0; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .dxi-h .x { all: unset; box-sizing: border-box; flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 7%, transparent); transition: background .15s, transform .15s; } .dxi-h .x:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); } .dxi-h .x:active { transform: scale(.92); } .dxi-h .x:focus-visible, .dxi-f button:focus-visible, .dxi-go:focus-visible, .dxi-it .tick:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .dxi-h .x svg { width: 18px; height: 18px; } .dxi-f { flex: none; display: flex; gap: 8px; padding: 2px 18px 12px; overflow-x: auto; scrollbar-width: none; } .dxi-f::-webkit-scrollbar { display: none; } .dxi-f button { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 14px; border-radius: 999px; cursor: pointer; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); transition: background .18s, color .18s, transform .12s; } .dxi-f button i { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: calc(11.5px * var(--fs)); font-weight: 800; background: color-mix(in srgb, var(--ink) 9%, transparent); } .dxi-f button:active { transform: scale(.96); } .dxi-f button[aria-pressed="true"] { color: #fff; background: var(--ink); } .dxi-f button[aria-pressed="true"] i { background: rgba(255, 255, 255, .22); } .dxi-b { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 2px 18px 18px; -webkit-overflow-scrolling: touch; } .dxi-b > * { flex: none; } .dxi-b { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 22%, transparent) transparent; } .dxi-b::-webkit-scrollbar { width: 6px; } .dxi-b::-webkit-scrollbar-track { background: transparent; } .dxi-b::-webkit-scrollbar-thumb { border-radius: 3px; background: color-mix(in srgb, var(--ink) 22%, transparent); } .dxi-it { --c: #E5560B; --c2: #FF8A3D; --d1: #D14A08; --d2: #A93A06; position: relative; padding: 14px 15px 12px; border-radius: 20px; background: var(--raised); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 0 0 1px rgba(var(--shadow-rgb), .1), 0 8px 22px -12px rgba(var(--shadow-rgb), .35); transition: opacity .25s, transform .2s; } .dxi-it[data-type="good"] { --c: #1F9D5B; --c2: #3CCB7F; --d1: #17824A; --d2: #0F6338; } .dxi-it[data-type="warn"] { --c: #D9483B; --c2: #F2766A; --d1: #C73A2E; --d2: #9E2A20; } .dxi-it .top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .dxi-it .ib { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); } .dxi-it .ib svg { width: 17px; height: 17px; } .dxi-it .tg { flex: 1; min-width: 0; font-size: calc(11px * var(--fs)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c); } .dxi-it .fg { flex: none; padding: 4px 10px; border-radius: 999px; font-family: var(--display); font-size: calc(13.5px * var(--fs)); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent); } .dxi-it h3 { margin: 0; font-family: var(--display); font-size: calc(16.5px * var(--fs)); font-weight: 750; letter-spacing: -.025em; line-height: 1.18; color: var(--title, var(--ink)); } .dxi-it p { margin: 5px 0 0; font-size: calc(13.2px * var(--fs)); line-height: 1.45; color: var(--ink-2); } .dxi-it .do { display: flex; align-items: center; gap: 10px; margin-top: 11px; padding: 9px 9px 9px 12px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, transparent); } .dxi-it .dl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font-size: calc(13px * var(--fs)); line-height: 1.35; font-weight: 600; color: var(--ink); } .dxi-it .dl b { font-size: calc(10.5px * var(--fs)); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--c); } .dxi-it .tick { all: unset; box-sizing: border-box; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: transparent; background: var(--raised); box-shadow: inset 0 0 0 1.8px color-mix(in srgb, var(--c) 45%, transparent); transition: background .18s, color .18s, transform .15s, box-shadow .18s; } .dxi-it .tick svg { width: 17px; height: 17px; stroke-width: 2.6; } .dxi-it .tick:active { transform: scale(.9); } .dxi-it .tick[aria-pressed="true"] { color: #fff; background: var(--c); box-shadow: 0 4px 10px color-mix(in srgb, var(--c) 40%, transparent); } .dxi-it.done { opacity: .62; } .dxi-it.done h3 { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--ink) 40%, transparent); } .dxi-it.lead { padding: 18px 18px 14px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c2) 55%, transparent) 0, transparent 60%), linear-gradient(150deg, var(--d1), var(--d2)); box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 18px 34px -16px color-mix(in srgb, var(--d2) 80%, transparent); overflow: hidden; } .dxi-it.lead::after { content: ''; position: absolute; right: -34px; bottom: -40px; width: 150px; height: 150px; opacity: .1; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M10.5 3c.7 5 3 7.3 8 8-5 .7-7.3 3-8 8-.7-5-3-7.3-8-8 5-.7 7.3-3 8-8z'/%3E%3C/svg%3E") center / contain no-repeat; } .dxi-it.lead .ib { color: #fff; background: rgba(255, 255, 255, .2); } .dxi-it.lead .tg { color: rgba(255, 255, 255, .92); } .dxi-it.lead .fg { color: var(--d2); background: #fff; font-size: calc(15px * var(--fs)); padding: 5px 12px; } .dxi-it.lead h3 { color: #fff; font-size: calc(23px * var(--fs)); font-weight: 800; letter-spacing: -.04em; line-height: 1.08; } .dxi-it.lead p { color: rgba(255, 255, 255, .9); font-size: calc(14px * var(--fs)); } .dxi-it.lead .do { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); } .dxi-it.lead .dl { color: #fff; } .dxi-it.lead .dl b { color: rgba(255, 255, 255, .82); } .dxi-it.lead .tick { background: transparent; box-shadow: inset 0 0 0 1.8px rgba(255, 255, 255, .7); } .dxi-it.lead .tick[aria-pressed="true"] { color: var(--d2); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); } .dxi-ft { flex: none; position: relative; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(var(--glass-rgb), 0), rgb(var(--glass-rgb)) 34%); } .dxi-go { all: unset; box-sizing: border-box; width: 100%; height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 16px; cursor: pointer; color: #fff; font-family: var(--display); font-size: calc(16px * var(--fs)); font-weight: 750; letter-spacing: -.02em; background: linear-gradient(145deg, var(--blue-2), var(--blue)); box-shadow: 0 12px 24px -10px rgba(var(--accent-rgb), .75), inset 0 1px 0 rgba(255, 255, 255, .45); transition: transform .15s, filter .15s; } .dxi-go svg { width: 19px; height: 19px; fill: currentColor; stroke: none; } .dxi-go:hover { filter: brightness(1.05); } .dxi-go:active { transform: scale(.98); } .dxi-go:disabled { cursor: default; filter: none; opacity: .92; } .dxi-go.busy svg { animation: dxispin 1.1s linear infinite; } .dxi-st { margin: 8px 0 0; min-height: 1em; font-size: calc(12.5px * var(--fs)); font-weight: 600; text-align: center; color: var(--ink-3); } @keyframes dxispin { to { rotate: 360deg; } } @keyframes dxiup { from { opacity: 0; transform: translateY(14px) scale(.985); } } @media (prefers-reduced-motion: no-preference) { #dx-ai-sheet.open .dxi-it { animation: dxiup .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 60ms + 120ms); } } html[data-theme$="night"] #dx-ai-sheet.dxi { background: linear-gradient(180deg, color-mix(in srgb, var(--blue) 14%, rgb(var(--glass-rgb))) 0, rgb(var(--glass-rgb)) 200px); box-shadow: 0 -18px 60px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .06) inset; } html[data-theme$="night"] .dxi-f button[aria-pressed="true"] { color: #14110E; background: #F3EEE7; } html[data-theme$="night"] .dxi-f button[aria-pressed="true"] i { background: rgba(0, 0, 0, .14); } @media (min-width: 600px) { #dx-ai-sheet.dxi { height: min(88dvh, 820px); } } .dx-chart .hrsel { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 8px; } .dx-chart .hrsel button, .dx-chart .hrsel label { all: unset; box-sizing: border-box; position: relative; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .22); } .dx-chart .hrsel button[aria-pressed="true"], .dx-chart .hrsel label.on { background: var(--ink); color: var(--bg); box-shadow: none; } .dx-chart .hrsel svg { width: 13px; height: 13px; } .dx-chart .hrsel input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dx-chart .hrsel button:focus-visible, .dx-chart .hrsel label:focus-within { outline: 2px solid var(--blue); outline-offset: 2px; } .dx-recent { display: none; } .dx-recent .hd .more { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); text-decoration: none; } .dx-recent ul { list-style: none; margin: 0; padding: 0; display: grid; } .dx-recent li { display: flex; align-items: center; gap: 11px; padding: 8px 0; } .dx-recent li + li { border-top: 1px solid rgba(var(--shadow-rgb), .12); } .dx-recent .ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .dx-recent .ic svg { width: 16px; height: 16px; stroke: currentColor; } .dx-recent .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; } .dx-recent .tx b { font-size: calc(13px * var(--fs)); font-weight: 700; } .dx-recent .tx small { font-size: calc(11px * var(--fs)); font-weight: 550; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dx-recent .amt { font-style: normal; font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: calc(13.5px * var(--fs)); font-variant-numeric: tabular-nums; } .dx-recent .st { flex: none; min-width: 52px; text-align: center; font-size: calc(10.5px * var(--fs)); font-weight: 750; padding: 4px 9px; border-radius: 999px; color: var(--dx-violet); background: color-mix(in srgb, var(--dx-violet) 14%, transparent); } .dx-recent .st.paid { color: var(--dx-green); background: color-mix(in srgb, var(--dx-green) 15%, transparent); } @media (min-width: 1100px) and (min-height: 700px) { .dx { height: calc(100dvh - var(--dx-top, 170px)); min-height: 560px; gap: 12px; grid-template-rows: auto auto minmax(0, 1.2fr) minmax(0, 1fr) auto; } .dx > * { min-height: 0; } .dx-card { padding: 13px 16px; overflow: hidden; display: flex; flex-direction: column; } .dx-card .hd { margin-bottom: 8px; flex: none; } .dx-card .hd h3, .dx-tax h3 { font-size: calc(14px * var(--fs)); } .dx-feed { display: none; } .dx-recent { display: flex; } .dx-bar { grid-row: 1; } .dx-kpis { grid-row: 2; } .dx-chart { grid-column: 1 / span 6; grid-row: 3; } .dx-top { grid-column: 7 / span 3; grid-row: 3; } .dx-recent { grid-column: 10 / span 3; grid-row: 3; } .dx-side { display: contents; } .dx-floor { grid-column: 1 / span 3; grid-row: 4; } .dx-attn { grid-column: 4 / span 3; grid-row: 4; } .dx-week { grid-column: 7 / span 3; grid-row: 4; } .dx-pay { grid-column: 10 / span 3; grid-row: 4; } .dx-tax { grid-column: 1 / -1; grid-row: 5; flex-direction: row; align-items: center; gap: 14px; padding: 9px 16px; align-self: stretch; } .dx-tax h3 { margin: 0; white-space: nowrap; } .dx-kpis { padding: 0; gap: 12px; } .dx-kpi { padding: 10px 14px 9px; gap: 4px; } .dx-kpi .foot { font-size: calc(11px * var(--fs)); } .dx-kpi .ico { width: 26px; height: 26px; } .dx-kpi.bk .w { padding: 6px 8px 7px; } .dx-kpi.bk .ws { gap: 6px; } .rv-fl { align-self: start; } .rv-fl .fl-in { position: relative; } .rv-fl .fl-in > :nth-child(2) { position: absolute; inset: 0; overflow: auto; scrollbar-width: none; } .dx-chart .plot { height: auto; flex: 1; min-height: 0; } .dx-kpi .val b { font-size: calc(26px * var(--fs)); } .dx-top ol { gap: 9px; overflow: hidden; } .dx-top li { align-items: center; } .dx-top .n { width: 26px; height: 26px; border-radius: 50%; margin-top: 0; } .dx-top .bar { margin: 5px 0 3px; height: 5px; } .dx-top small { font-size: calc(10.5px * var(--fs)); } .dx-top li:nth-child(n+6) { display: none; } .dx-floor .body { gap: 14px; } .dx-floor .ringw { width: 96px !important; height: 96px !important; } .dx-attn .list { overflow: hidden; } .dx-attn .it { padding: 7px 0; font-size: calc(12.5px * var(--fs)); } .dx-week .cols { flex: 1; height: auto; min-height: 0; } .dx-week .hd p { display: none; } .dx-pay { padding: 13px 16px; } .dx-pay .hd h3 { font-size: calc(14px * var(--fs)); } .dx-pay .body { flex-direction: row; justify-content: flex-start; gap: 14px; flex: 1; align-items: center; } .dx-pay .ringw { width: 92px !important; height: 92px !important; flex: none; } .dx-pay .ringw .mid b { font-size: calc(14px * var(--fs)); } .dx-pay .ringw .mid small { font-size: calc(10px * var(--fs)); } .dx-pay .lgd { flex: 1; gap: 8px; } .dx-pay .lgd li { padding: 8px 12px 9px; border-radius: 12px; font-size: calc(12.5px * var(--fs)); gap: 4px 8px; } .dx-pay .lgd li b { font-size: calc(14px * var(--fs)); } .dx-pay .lgd li em { font-size: calc(12px * var(--fs)); } .dx-pay .lgd li u { height: 5px; } } .dx-tbl .hd .more { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); text-decoration: none; } .dx-tbl .body { display: grid; gap: 12px; align-content: start; min-height: 0; } .dx-tbl .tss { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dx-tbl .ts { display: grid; gap: 1px; justify-items: center; padding: 8px 4px 7px; border-radius: 13px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .dx-tbl .ts b { font-family: var(--display); font-weight: 800; font-size: calc(20px * var(--fs)); letter-spacing: -.04em; line-height: 1.1; } .dx-tbl .ts small { font-size: calc(10.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } .dx-tbl .ts.busy b { color: #D97706; } .dx-tbl .ts.bill b { color: var(--blue); } .dx-tbl .ts.free b { color: var(--dx-green); } .dx-tbl .tscroll { display: grid; gap: 10px; align-content: start; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; max-height: 260px; } .dx-tbl .tscroll::-webkit-scrollbar { display: none; } .dx-tbl .tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 8px; padding: 2px; } .dx-tbl .t { display: grid; justify-items: center; align-content: center; gap: 1px; height: 46px; border-radius: 12px; text-decoration: none; color: var(--ink); background: var(--pressed); box-shadow: var(--sh-in-sm), inset 0 0 0 1.5px rgba(var(--shadow-rgb), .25); } .dx-tbl .t b { font-size: calc(13px * var(--fs)); font-weight: 800; line-height: 1.1; } .dx-tbl .t small { font-size: calc(10.5px * var(--fs)); font-weight: 700; line-height: 1; color: var(--ink-2); font-variant-numeric: tabular-nums; } .dx-tbl .t.busy { box-shadow: var(--sh-in-sm), inset 0 0 0 1.5px color-mix(in srgb, #D97706 70%, transparent); background: color-mix(in srgb, #D97706 14%, var(--pressed)); } .dx-tbl .t.new { box-shadow: var(--sh-in-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 70%, transparent); background: color-mix(in srgb, var(--blue) 13%, var(--pressed)); } .dx-tbl .t.rdy { box-shadow: var(--sh-in-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--dx-green) 75%, transparent); background: color-mix(in srgb, var(--dx-green) 14%, var(--pressed)); } .dx-tbl .t.bill { box-shadow: var(--sh-in-sm), inset 0 0 0 1.5px color-mix(in srgb, var(--blue) 70%, transparent); background: color-mix(in srgb, var(--blue) 13%, var(--pressed)); } .dx-tbl .t.late { box-shadow: var(--sh-in-sm), inset 0 0 0 1.5px color-mix(in srgb, #B3261E 70%, transparent); background: color-mix(in srgb, #B3261E 12%, var(--pressed)); } .dx-tbl .none { margin: 6px 0 0; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } @media (min-width: 1100px) and (min-height: 700px) { .dx-pay.dx-tbl .body { display: flex; flex-direction: column; flex: 1; gap: 8px; overflow: hidden; align-items: stretch; justify-content: flex-start; } .dx-tbl .ts { padding: 5px 4px; } .dx-tbl .ts b { font-size: calc(17px * var(--fs)); } .dx-tbl .tss { flex: none; } .dx-tbl .tscroll { flex: 1 1 0; min-height: 0; max-height: none; } .dx-tbl .tgrid { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; } .dx-tbl .t { height: 42px; } } .kt-bar { display: flex; gap: 5px; height: 34px; align-items: center; } .kt-bar i { flex: 1 1 0; min-width: 0; height: 9px; border-radius: 99px; background: var(--track); transform-origin: left; } .kt-bar i.new { background: #F0731A; } .kt-bar i.cooking { background: #F2B01E; } .kt-bar i.ready { background: var(--st-ready-f, #1A8F52); } .kt-bar i { transition: flex-grow .4s ease; } .dx.enter .kt-bar i:not(.empty) { animation: wgrow .6s cubic-bezier(.2, .8, .2, 1) both; } .dx-d.kt-late { color: var(--st-late-t, #B3261E); background: color-mix(in srgb, var(--st-late-f, #D8412F) 14%, transparent); } .dx-kpi.open .foot { font-weight: 650; }
.ox { display: grid; gap: 14px; --st-new: #2F54D6; --st-prep: #E59A1A; --st-ready: #1F9D5B; --st-bill: var(--blue); } html[data-theme$="night"] .ox { --st-new: #7E97FF; --st-prep: #FFB547; --st-ready: #4FD39A; } .ox > * { min-width: 0; } .ox-bar { display: flex; gap: 10px; align-items: center; } .ox-bar .rv-search { flex: 1; min-width: 0; } .ox-new { display: none; align-items: center; gap: 8px; height: 50px; padding: 0 18px; border-radius: 14px; text-decoration: none; color: #fff; font-weight: 700; font-size: calc(14px * var(--fs)); background: linear-gradient(135deg, #E5560B, #FF7A29); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.3); } .ox-new svg { width: 18px; height: 18px; } @media (min-width: 900px) { .ox-new { display: inline-flex; } } .ox-pipe { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 1px; padding: 11px 10px 10px 12px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); transition: transform .15s; } .pt:active { transform: scale(.97); } .pt .dot { position: absolute; top: 12px; right: 11px; width: 8px; height: 8px; border-radius: 50%; background: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 20%, transparent); } .pt b { font-family: var(--display); font-weight: 800; font-size: calc(24px * var(--fs)); letter-spacing: -.05em; line-height: 1.1; font-variant-numeric: tabular-nums; } .pt span { font-size: calc(11.5px * var(--fs)); font-weight: 650; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt.new { --sc: var(--st-new); } .pt.preparing { --sc: var(--st-prep); } .pt.ready { --sc: var(--st-ready); } .pt.bill { --sc: var(--st-bill); } .pt.on { background: color-mix(in srgb, var(--sc) 12%, var(--raised)); box-shadow: inset 0 0 0 2px var(--sc); } .pt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ox-tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 6px; margin: -2px; } .ox-tabs::-webkit-scrollbar { display: none; } .ox-tabs button { all: unset; box-sizing: border-box; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 650; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .2); } .ox-tabs button[aria-selected="true"] { background: var(--ink); color: var(--bg); box-shadow: none; } html[data-theme$="night"] .ox-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; } .ox-tabs em { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; min-width: 20px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 10px; background: rgba(var(--shadow-rgb), .16); } .ox-tabs button[aria-selected="true"] em { background: rgba(255,255,255,.22); } .ox-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .ox-board { display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); } .ox-board .col { display: grid; gap: 10px; align-content: start; } .ox-board .col.none { display: none; } .ox-board .col > header { display: flex; align-items: center; gap: 9px; padding: 2px 2px 0; } .ox-board .col h3 { margin: 0; font-family: var(--display); font-weight: 750; font-size: calc(15px * var(--fs)); letter-spacing: -.02em; } .ox-board .col > header em { font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 800; min-width: 22px; height: 22px; padding: 0 7px; display: inline-grid; place-items: center; border-radius: 11px; color: var(--sc); background: color-mix(in srgb, var(--sc) 14%, transparent); } .ox-board .col .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--sc); } .ox-board .col.new { --sc: var(--st-new); } .ox-board .col.preparing { --sc: var(--st-prep); } .ox-board .col.ready { --sc: var(--st-ready); } .ox-board .col.bill { --sc: var(--st-bill); } .ox-board .stack { display: grid; gap: 12px; } .ox-board .hint { margin: 0; padding: 22px 12px; text-align: center; border-radius: 16px; border: 1.5px dashed rgba(var(--shadow-rgb), .25); font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .ox-board .col.bill { order: 1; } .ox-board .col.ready { order: 2; } .ox-board .col.preparing { order: 3; } .ox-board .col.new { order: 4; } .ox-hist { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } .ox-hist .dh { margin: 8px 2px 0; font-family: var(--display); font-weight: 750; font-size: calc(14px * var(--fs)); letter-spacing: -.01em; color: var(--ink-2); grid-column: 1 / -1; } @media (min-width: 700px) { .ox-board .stack, .ox-hist { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ox-board.one { grid-template-columns: minmax(0, 1fr); } } @media (min-width: 1100px) { .ox-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; } .ox-board .col { order: 0 !important; padding: 12px; border-radius: 22px; background: rgba(var(--shadow-rgb), .07); min-height: 220px; } .ox-board .col.none { display: grid; } .ox-board .stack { grid-template-columns: 1fr; } .ox-board.one { grid-template-columns: minmax(0, 1fr); } .ox-board.one .stack { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .ox-hist { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .oc { --sc: var(--st-new); position: relative; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; transition: transform .15s; } .oc.preparing { --sc: var(--st-prep); } .oc.ready { --sc: var(--st-ready); } .oc.bill { --sc: var(--st-bill); } .oc.completed { --sc: var(--st-ready); } .oc.cancelled { --sc: var(--red); } .oc::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--sc); } .oc:hover { transform: translateY(-1px); } .oc-main { display: grid; gap: 9px; padding: 13px 14px 11px 19px; text-decoration: none; color: inherit; } .oc-main:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 18px; } .oc .hd { display: flex; align-items: center; gap: 9px; min-width: 0; } .oc .no { font-family: var(--display); font-weight: 800; font-size: calc(22px * var(--fs)); letter-spacing: -.045em; line-height: 1; } .oc .wh { display: inline-flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 10px; border-radius: 999px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); background: rgba(var(--shadow-rgb), .11); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc .wh svg { width: 13px; height: 13px; flex: none; } .oc .wh small { font-size: inherit; font-weight: 550; opacity: .75; } .oc .tm { margin-left: auto; flex: none; font-size: calc(11.5px * var(--fs)); font-weight: 800; padding: 4px 10px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); font-variant-numeric: tabular-nums; } .oc .tm.warn { color: #A25A06; background: rgba(240,160,43,.2); } .oc .tm.late { color: #fff; background: var(--red); animation: oclate 1.6s ease-in-out infinite; } html[data-theme$="night"] .oc .tm.warn { color: #FFB547; } @keyframes oclate { 50% { opacity: .72; } } @media (prefers-reduced-motion: reduce) { .oc .tm.late { animation: none; } .oc:hover { transform: none; } } .oc .it { margin: 0; font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .oc .pg { display: flex; align-items: center; gap: 4px; } .oc .pg i { flex: 1; height: 5px; border-radius: 3px; background: var(--track); max-width: 56px; } .oc .pg i.done { background: var(--sc); opacity: .55; } .oc .pg i.on { background: var(--sc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sc) 22%, transparent); } .oc .pg em { margin-left: 8px; font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 800; color: var(--sc); } .oc .pg.end em { margin-left: 0; } .oc .ofoot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 12px 19px; border-top: 1.5px dashed rgba(var(--shadow-rgb), .22); } .oc .am { display: grid; } .oc .am b { font-family: var(--display); font-weight: 800; font-size: calc(19px * var(--fs)); letter-spacing: -.04em; font-variant-numeric: tabular-nums; line-height: 1.1; } .oc .am small { font-size: calc(11.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .oc.cancelled .am b { text-decoration: line-through; color: var(--ink-2); } .oc.cancelled, .oc.completed { opacity: .92; } .oc-bill { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px; border-radius: 12px; text-decoration: none; font-size: calc(13px * var(--fs)); font-weight: 750; color: #fff; background: var(--sc); box-shadow: 0 8px 18px color-mix(in srgb, var(--sc) 35%, transparent); } .oc-bill span { font-size: calc(17px * var(--fs)); line-height: 1; } .oc-bill:active { transform: translateY(1px); } .ox-empty { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 44px 18px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-sm); } .ox-empty .ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 13%, transparent); margin-bottom: 6px; } .ox-empty .ic svg { width: 26px; height: 26px; } .ox-empty b { font-family: var(--display); font-size: calc(17px * var(--fs)); letter-spacing: -.02em; } .ox-empty span:last-child { font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); } .ox { padding-bottom: 76px; } @media (min-width: 900px) { .ox { padding-bottom: 8px; } } .oq { display: grid; gap: 10px; margin-bottom: 14px; } .oq-c { display: grid; gap: 4px; padding: 13px 15px; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-sm); border: 1.5px dashed rgba(var(--accent-rgb), .55); } .oq-c .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .oq-c .hd b { font-family: var(--display); font-weight: 800; font-size: calc(16px * var(--fs)); letter-spacing: -.02em; } .oq-c .tag { flex: none; padding: 3px 10px; border-radius: 999px; font-size: calc(11px * var(--fs)); font-weight: 800; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .12); } .oq-c p { margin: 0; font-size: calc(13.5px * var(--fs)); font-weight: 600; line-height: 1.4; } .oq-c small { font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.4; } .oq-c.bad { border-color: rgba(192, 54, 44, .55); } .oq-c.bad .tag { color: #C0362C; background: rgba(192, 54, 44, .12); } .oq-c .ds { all: unset; cursor: pointer; justify-self: start; margin-top: 4px; padding: 6px 12px; border-radius: 10px; font-size: calc(12.5px * var(--fs)); font-weight: 750; color: var(--ink); background: var(--pressed); box-shadow: var(--sh-in-sm); } .ox-per { display: grid; gap: 10px; margin: 2px 0 12px; } .ox-seg { display: inline-flex; justify-self: start; padding: 4px; gap: 4px; border-radius: 14px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .ox-seg button { all: unset; cursor: pointer; padding: 7px 16px; border-radius: 10px; font-size: calc(13px * var(--fs)); font-weight: 750; color: var(--ink-2); } .ox-seg button[aria-selected="true"] { color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm, 0 2px 6px rgba(0,0,0,.12)); } .ox-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ox-nav .ar { all: unset; cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 22px; font-weight: 700; background: var(--raised); box-shadow: var(--sh-sm, 0 2px 6px rgba(0,0,0,.12)); } .ox-nav .ar:disabled { opacity: .35; cursor: default; } .ox-nav .lb { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: 12px; cursor: pointer; font-weight: 800; font-size: calc(14.5px * var(--fs)); background: var(--raised); box-shadow: var(--sh-sm, 0 2px 6px rgba(0,0,0,.12)); } .ox-nav .lb svg { width: 16px; height: 16px; color: var(--ink-2); } .ox-nav .ox-pick { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .ox-nav .now { all: unset; cursor: pointer; padding: 0 12px; min-height: 38px; display: inline-flex; align-items: center; border-radius: 12px; font-size: calc(13px * var(--fs)); font-weight: 750; color: var(--blue, #2563EB); } .ox-per .sum { margin: 0 2px; font-size: calc(13.5px * var(--fs)); color: var(--ink-2); } .ox-per .sum b { color: var(--ink); font-variant-numeric: tabular-nums; } .ox-seg button:focus-visible, .ox-nav .ar:focus-visible, .ox-nav .lb:focus-within, .ox-nav .now:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
html[data-ui="v2"] .rv-order-left .rv-head { align-items: center !important; } html[data-ui="v2"] .rv-order-left .rv-head > div:last-child { flex-direction: row !important; align-items: center !important; gap: 8px !important; } html[data-ui="v2"] .rv-order-left .rv-head #ord-title { font-size: calc(26px * min(var(--fs), 1.1)) !important; } html[data-ui="v2"] .rv-screen:has(.os) { padding-bottom: 12px; } html[data-ui="v2"] .rv-screen:has(.os) > #ord-root { flex: 1; display: flex; flex-direction: column; } .os { --os: var(--st-new, #2F54D6); flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; } html[data-theme$="night"] .os { --os: #7E97FF; } .os-hero { --os: #2F54D6; position: relative; padding: 16px 16px 14px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; } html[data-theme$="night"] .os-hero { --os: #7E97FF; } .os-hero.st-preparing { --os: #E59A1A; } .os-hero.st-ready, .os-hero.st-completed { --os: #1F9D5B; } .os-hero.st-bill { --os: var(--blue); } .os-hero.st-cancelled { --os: var(--red); } html[data-theme$="night"] .os-hero.st-preparing { --os: #FFB547; } html[data-theme$="night"] .os-hero.st-ready, html[data-theme$="night"] .os-hero.st-completed { --os: #4FD39A; } .os-hero::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--os); } .os-hero::after { content: ''; position: absolute; right: -50px; top: -60px; width: 190px; height: 190px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--os) 24%, transparent), transparent 70%); pointer-events: none; } .os-hero .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; position: relative; z-index: 1; } .os-hero h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: calc(22px * var(--fs)); letter-spacing: -.04em; line-height: 1.1; color: var(--ink); } .os-hero p { margin: 4px 0 0; font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); } .os-tm { flex: none; font-size: calc(11.5px * var(--fs)); font-weight: 800; padding: 5px 11px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .12); white-space: nowrap; font-variant-numeric: tabular-nums; } .os-tm.warn { color: #A25A06; background: rgba(240,160,43,.2); } .os-tm.late { color: #fff; background: var(--red); } html[data-theme$="night"] .os-tm.warn { color: #FFB547; } .os-steps { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; z-index: 1; } .os-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; } .os-steps li::before { content: ''; position: absolute; top: 14px; right: 50%; width: 100%; height: 3px; border-radius: 2px; background: var(--track); } .os-steps li:first-child::before { display: none; } .os-steps li.done::before, .os-steps li.now::before { background: var(--os); } .os-steps .nd { position: relative; z-index: 1; width: 29px; height: 29px; border-radius: 50%; display: grid; place-items: center; font-size: calc(12px * var(--fs)); font-weight: 800; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); } .os-steps .nd svg { width: 15px; height: 15px; stroke: currentColor; } .os-steps li.done .nd { color: #fff; background: var(--os); box-shadow: none; } .os-steps li.now .nd { color: #fff; background: var(--os); box-shadow: 0 0 0 5px color-mix(in srgb, var(--os) 25%, transparent); animation: osnow 2s ease-in-out infinite; } @keyframes osnow { 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--os) 10%, transparent); } } @media (prefers-reduced-motion: reduce) { .os-steps li.now .nd { animation: none; } } .os-steps b { font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--ink-2); } .os-steps li.now b, .os-steps li.done b { color: var(--ink); } .os-hero .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); padding-top: 12px; border-top: 1.5px dashed rgba(var(--shadow-rgb), .24); position: relative; z-index: 1; } .os-hero .meta .nt { flex: 1 1 100%; color: #7A4A06; background: rgba(240,160,43,.16); padding: 6px 10px; border-radius: 10px; } html[data-theme$="night"] .os-hero .meta .nt { color: #FFB547; } .os-card { padding: 16px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); } .os-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .os-card h3 { margin: 0; font-family: var(--display); font-weight: 750; font-size: calc(16px * var(--fs)); letter-spacing: -.025em; } .os-card .tl { display: flex; gap: 6px; flex-wrap: wrap; } .os-list ul { list-style: none; margin: 0; padding: 0; } .os-grp { margin: 12px 0 0; font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--link, var(--blue)); } .os-it { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 13px 0 13px 14px; } .os-it + .os-it { border-top: 1px solid rgba(var(--shadow-rgb), .12); } .os-it::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 2px; background: #2F54D6; } .os-it.ks-preparing::before { background: #F0A02B; } .os-it.ks-ready::before { background: var(--green-dot); } html[data-theme$="night"] .os-it::before { background: #7E97FF; } html[data-theme$="night"] .os-it.ks-preparing::before { background: #FFB547; } html[data-theme$="night"] .os-it.ks-ready::before { background: #4FD39A; } .os-it .qty { flex: none; min-width: 34px; font-family: var(--display); font-weight: 800; font-size: calc(17px * var(--fs)); letter-spacing: -.03em; color: var(--link, var(--blue)); line-height: 1.3; } .os-it .bd { flex: 1; min-width: 0; display: grid; gap: 5px; justify-items: start; } .os-it .nm { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: calc(15.5px * var(--fs)); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; } .os-it small { font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.35; } .os-it .pr { flex: none; font-family: var(--display); font-weight: 800; font-size: calc(15.5px * var(--fs)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.3; } .os-it .rv-pill { height: 24px; font-size: calc(11px * var(--fs)); } .os-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 6px; padding-top: 14px; border-top: 1.5px dashed rgba(var(--shadow-rgb), .24); } .os-total span { display: block; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); } .os-total small { display: block; margin-top: 2px; font-size: calc(11.5px * var(--fs)); font-weight: 550; color: var(--ink-2); opacity: .85; } .os-total b { font-family: var(--display); font-weight: 800; font-size: calc(30px * var(--fs)); letter-spacing: -.05em; line-height: 1; font-variant-numeric: tabular-nums; } .os-bar { position: sticky; bottom: 10px; margin-top: auto; z-index: 6; display: flex; gap: 10px; padding: 10px; border-radius: 22px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .14), 0 16px 36px rgba(var(--shadow-rgb), .28); } .os-bar .rv-btn { min-height: 54px; border-radius: 15px; margin: 0; } .os-add { flex: 0 0 auto; padding: 0 18px; gap: 8px; } .os-add svg { width: 18px; height: 18px; } .os-main { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; font-size: calc(15.5px * var(--fs)); } .os-main b { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding: 5px 11px; border-radius: 10px; background: rgba(255,255,255,.2); } .os-main:disabled { opacity: .55; box-shadow: none; } html[data-theme$="night"] .os-hero.st-bill { --os: var(--blue); } html[data-theme$="night"] .os-hero.st-cancelled { --os: #FF8F9C; } a.os-main { justify-content: center; } .os-hero .meta .by { flex: 1 1 100%; display: inline-flex; align-items: center; gap: 8px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .os-hero .meta .by i { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: calc(10px * var(--fs)); font-weight: 800; color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 14%, transparent); flex: none; } .os-hero .meta .by b { color: var(--ink); font-weight: 700; } .os-hero .meta .by { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .os-hero .meta .by .sep { margin: 0 2px; opacity: .6; } .os-hero .meta .by { display: block; } .os-hero .meta .by i { display: inline-grid; vertical-align: middle; margin-right: 8px; } .os-hero .meta .by .sep { margin: 0 6px; } .os-list li.os-kot { list-style: none; margin: 12px 0 2px; padding: 0 0 4px; font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--link, var(--blue)); border-bottom: 1px dashed rgba(var(--shadow-rgb), .3); } .os-list ul > li.os-kot:first-child { margin-top: 2px; } .os { gap: 12px; } .os-hero { padding: 14px 16px 12px; } .os-hero .top { align-items: center; gap: 14px; } .os-hero .tx { flex: 1; min-width: 0; } .os-hero .tb { flex: none; display: grid; justify-items: center; gap: 5px; width: 66px; } .os-hero .tb b { font-family: var(--display); font-weight: 800; font-size: calc(13px * var(--fs)); letter-spacing: -.02em; color: var(--ink-2); } .os-hero .sk { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; } .os-hero .sk .ch { display: flex; justify-content: center; gap: 4px; min-height: 5px; } .os-hero .sk .ch i { width: 11px; height: 5px; border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--os) 55%, transparent); } .os-hero .sk .ch:last-child i { border-radius: 1px 1px 3px 3px; } .os-hero .sk .top { width: 82%; height: 22px; border-radius: 7px; background: color-mix(in srgb, var(--os) 30%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--os) 45%, transparent); } .os-hero h2 { font-size: calc(20px * var(--fs)); } .os-steps { margin: 14px 0 10px; } .os-hero .meta { padding-top: 10px; } .os-sum { display: grid; grid-template-columns: 1fr 1fr 1.6fr; gap: 8px; } .os-sum .c { display: grid; gap: 3px; padding: 11px 14px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .os-sum .c { background: #fff; } .os-sum small { font-size: calc(11px * var(--fs)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); } .os-sum b { font-family: var(--display); font-weight: 800; font-size: calc(22px * var(--fs)); letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; } .os-sum .tot b { font-size: calc(26px * var(--fs)); color: var(--price, var(--ink)); } .os-kots { display: grid; gap: 10px; } .os-kot { --kc: #2F54D6; position: relative; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-sm); overflow: hidden; } html[data-ui="v2"]:not([data-theme$="night"]) .os-kot { background: #fff; } html[data-theme$="night"] .os-kot { --kc: #7E97FF; } .os-kot.st-preparing { --kc: #E59A1A; } .os-kot.st-ready { --kc: #1F9D5B; } html[data-theme$="night"] .os-kot.st-preparing { --kc: #FFB547; } html[data-theme$="night"] .os-kot.st-ready { --kc: #4FD39A; } .os-kot::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--kc); } .os-kot .kh { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px 12px 20px; } .os-kot .kh:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; border-radius: 16px; } .os-kot .ti { flex: 1; min-width: 0; display: grid; gap: 2px; } .os-kot .kn { font-family: var(--display); font-weight: 800; font-size: calc(17px * var(--fs)); letter-spacing: -.035em; line-height: 1.15; } .os-kot .ti small { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .os-kot .kc { flex: none; font-size: calc(11.5px * var(--fs)); font-weight: 800; padding: 5px 11px; border-radius: 999px; color: var(--kc); background: color-mix(in srgb, var(--kc) 14%, transparent); } .os-kot .kc.warn { color: #A25A06; background: rgba(240,160,43,.22); } .os-kot .kc.late { color: #fff; background: var(--red); } html[data-theme$="night"] .os-kot .kc.warn { color: #FFB547; } .os-kot .chev { flex: none; width: 9px; height: 9px; border-right: 2.5px solid var(--ink-2); border-bottom: 2.5px solid var(--ink-2); transform: rotate(45deg); margin: 0 4px 3px 2px; transition: transform .18s; } .os-kot.open .chev { transform: rotate(-135deg); margin-bottom: -3px; } .os-kot .ki { list-style: none; margin: 0; padding: 0 16px 4px 20px; } .os-kot .ki[hidden], .os-kot .kf[hidden] { display: none; } .os-kot .ki-it { display: flex; align-items: flex-start; gap: 11px; padding: 9px 0; border-top: 1px dashed rgba(var(--shadow-rgb), .2); } .os-kot .ki-it .q { flex: none; min-width: 32px; height: 26px; padding: 0 6px; box-sizing: border-box; border-radius: 9px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: calc(13.5px * var(--fs)); letter-spacing: -.02em; color: var(--kc); background: color-mix(in srgb, var(--kc) 13%, transparent); } .os-kot .ki-it .n { flex: 1; min-width: 0; display: grid; gap: 3px; } .os-kot .ki-it .nm { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: calc(15px * var(--fs)); font-weight: 700; letter-spacing: -.015em; line-height: 1.3; } .os-kot .ki-it .gp { font-size: calc(10.5px * var(--fs)); font-weight: 800; padding: 1px 7px; border-radius: 999px; color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 14%, transparent); } .os-kot .ki-it small { font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .os-kot .ki-it .p { flex: none; font-family: var(--display); font-weight: 800; font-size: calc(14.5px * var(--fs)); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.8; } .os-kot .kf { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 16px 12px 20px; font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); border-top: 1px dashed rgba(var(--shadow-rgb), .2); } .os-kot .kf b { font-family: var(--display); font-weight: 800; font-size: calc(14px * var(--fs)); color: var(--ink); font-variant-numeric: tabular-nums; } .os-kot .os-grp { margin: 8px 0 0; padding: 0; border: 0; } .os-note { margin: 0; text-align: center; font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } @media (min-width: 900px) { .os-kots { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } @media (min-width: 900px) { .os-kots:has(> .os-kot:only-child) { grid-template-columns: minmax(0, 1fr); } }
html[data-ui="v2"] .rv-screen:has(.bl) .rv-head { align-items: center !important; } html[data-ui="v2"] .rv-screen:has(.bl) .rv-head #bill-title { font-size: calc(26px * min(var(--fs), 1.1)); } html[data-ui="v2"] .rv-screen:has(.bl) { padding-bottom: 12px; } html[data-ui="v2"] .rv-screen:has(.bl) > #bill-root { flex: 1; display: flex; flex-direction: column; } .bl { flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0; } .bl > * { min-width: 0; } .bl-ticket { padding: 16px 16px 14px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); position: relative; } .bl-ticket .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; } .bl-ticket h3 { margin: 0; font-family: var(--display); font-weight: 750; font-size: calc(16px * var(--fs)); letter-spacing: -.025em; } .bl-ticket .hd span { font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); } .bl-ticket .its { list-style: none; margin: 0; padding: 0; } .bl-ticket .its li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 0; } .bl-ticket .its li + li { border-top: 1px solid rgba(var(--shadow-rgb), .1); } .bl-ticket .its li.g { padding: 12px 0 2px; font-size: calc(11.5px * var(--fs)); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--link, var(--blue)); border-top: 0; } .bl-ticket .q { flex: none; min-width: 30px; font-family: var(--display); font-weight: 800; color: var(--link, var(--blue)); letter-spacing: -.03em; } .bl-ticket .n { flex: 1; min-width: 0; display: grid; gap: 1px; } .bl-ticket .n b { font-size: calc(14.5px * var(--fs)); font-weight: 650; letter-spacing: -.01em; } .bl-ticket .n small { font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .bl-ticket .its em { font-style: normal; font-family: var(--display); font-weight: 750; font-size: calc(14.5px * var(--fs)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .bl-ticket .more { all: unset; cursor: pointer; display: inline-block; margin: 2px 0 0 40px; font-size: calc(12.5px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); } .bl-ticket .perf { position: relative; margin: 12px -16px 12px; border-top: 2px dashed rgba(var(--shadow-rgb), .3); height: 0; } .bl-ticket .perf::before, .bl-ticket .perf::after { content: ''; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .1); } .bl-ticket .perf::before { left: -10px; } .bl-ticket .perf::after { right: -10px; } .bl-ticket .sums { display: grid; gap: 6px; } .bl-ticket .sm { display: flex; justify-content: space-between; gap: 12px; font-size: calc(13.5px * var(--fs)); } .bl-ticket .sm span { font-weight: 600; color: var(--ink-2); } .bl-ticket .sm b { font-weight: 700; font-variant-numeric: tabular-nums; } .bl-ticket .sm.neg b { color: var(--dx-green, #1F9D5B); } html[data-theme$="night"] .bl-ticket .sm.neg b { color: #4FD39A; } .bl-ticket .tot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid rgba(var(--shadow-rgb), .2); } .bl-ticket .tot span { font-size: calc(15px * var(--fs)); font-weight: 800; } .bl-ticket .tot b { font-family: var(--display); font-weight: 800; font-size: calc(34px * var(--fs)); letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; } .bl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .bl-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bl-tile { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); min-width: 0; transition: transform .15s; } .bl-tile:active { transform: scale(.97); } .bl-tile:disabled { opacity: .5; cursor: not-allowed; } .bl-tile .gl { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: calc(14px * var(--fs)); color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 13%, transparent); } .bl-tile .gl svg { width: 16px; height: 16px; stroke: currentColor; } .bl-tile .t { display: grid; min-width: 0; } .bl-tile small { font-size: calc(10.5px * var(--fs)); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-2); } .bl-tile b { font-family: var(--display); font-weight: 750; font-size: calc(13.5px * var(--fs)); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bl-tile.on { box-shadow: inset 0 0 0 2px var(--blue); background: color-mix(in srgb, var(--blue) 9%, var(--raised)); } .bl-tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .bl-taken { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .bl-taken .lb { font-size: calc(11.5px * var(--fs)); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-right: 2px; } .bl-taken .ch { display: inline-flex; align-items: center; gap: 7px; padding: 6px 6px 6px 10px; border-radius: 999px; font-size: calc(12.5px * var(--fs)); font-weight: 700; background: var(--pressed); box-shadow: var(--sh-in-sm); } .bl-taken .ch i { width: 8px; height: 8px; border-radius: 3px; background: var(--chart-a, #E5560B); } .bl-taken .ch i.cash { background: var(--chart-b, #3B4CCA); } .bl-taken .ch small { font-size: calc(10.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .bl-taken .ch button { all: unset; cursor: pointer; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: var(--red); font-size: 17px; line-height: 1; } .bl-pay { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); } .bl-pay .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .bl-pay .hd span { font-size: calc(12px * var(--fs)); font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); } .bl-pay .hd b { font-family: var(--display); font-weight: 800; font-size: calc(28px * var(--fs)); letter-spacing: -.05em; font-variant-numeric: tabular-nums; } .bl-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 15px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .bl-seg button { all: unset; cursor: pointer; box-sizing: border-box; text-align: center; min-height: 44px; display: grid; place-items: center; border-radius: 12px; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink-2); } .bl-seg button[aria-selected="true"] { background: var(--raised-hi, var(--raised)); color: var(--ink); box-shadow: var(--sh-seg); } .bl-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .bl-pay .fld { display: grid; gap: 6px; } .bl-pay .fld > span { font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); } .bl-pay .rs { position: relative; } .bl-pay .rs i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-family: var(--display); font-weight: 800; font-size: calc(22px * var(--fs)); color: var(--ink-2); } .bl-pay .rv-input.big { padding-left: 38px; min-height: 60px; font-family: var(--display); font-weight: 800; font-size: calc(26px * var(--fs)); letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .bl-chips { display: flex; flex-wrap: wrap; gap: 8px; } .bl-chips button { all: unset; cursor: pointer; box-sizing: border-box; min-height: 38px; padding: 0 16px; display: inline-grid; place-items: center; border-radius: 999px; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); font-variant-numeric: tabular-nums; } .bl-chips button:first-child { color: var(--link, var(--blue)); } .bl-chips button:active { transform: translateY(1px); } .bl-pay .chg { padding: 10px 14px; border-radius: 13px; font-weight: 800; font-size: calc(15px * var(--fs)); color: #11763F; background: rgba(37,168,98,.14); } html[data-theme$="night"] .bl-pay .chg { color: #5FD39A; } .bl-pay .chg[hidden] { display: none; } .bl-pay .hint { margin: 0; font-size: calc(13px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.4; } .bl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bl-two > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 13px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .bl-two span { font-size: calc(11px * var(--fs)); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .bl-two b { font-family: var(--display); font-weight: 800; font-size: calc(18px * var(--fs)); letter-spacing: -.035em; } .bl-qr { display: grid; gap: 8px; justify-items: center; } .bl-qr .qr { width: min(230px, 100%); padding: 12px; border-radius: 20px; background: #fff; box-shadow: var(--sh-md); } .bl-qr .qr:empty { display: none; } .bl-qr .noqr { margin: 0; text-align: center; font-weight: 600; font-size: calc(13.5px * var(--fs)); color: #333; } .bl-qr .qn { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); text-align: center; } .bl-bar { position: sticky; bottom: 10px; margin-top: auto; z-index: 6; padding: 10px; border-radius: 22px; background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb), .14), 0 16px 36px rgba(var(--shadow-rgb), .28); } .bl-go { display: flex; width: 100%; min-height: 58px; border-radius: 16px; margin: 0; font-size: calc(16.5px * var(--fs)); font-weight: 750; align-items: center; justify-content: center; } .bl-go:disabled { opacity: .5; box-shadow: none; } .bl-void { all: unset; cursor: pointer; text-align: center; padding: 8px; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--red); } .bl-info { border-radius: 18px; background: var(--raised); box-shadow: var(--sh-sm); padding: 4px 16px; } .bl-info > button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; width: 100%; min-height: 48px; align-items: center; justify-content: space-between; font-size: calc(14px * var(--fs)); font-weight: 700; } .bl-info > button i { font-style: normal; color: var(--link, var(--blue)); font-size: calc(17px * var(--fs)); } .bl-info .bd { padding: 0 0 12px; display: grid; gap: 2px; } .bl-info .r { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; font-size: calc(13px * var(--fs)); } .bl-info .r span { color: var(--ink-2); font-weight: 600; } .bl-info .r b { text-align: right; font-weight: 700; } .bl-opts { display: grid; gap: 8px; } .bl-opts .opt { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 14px; font-weight: 700; font-size: calc(15px * var(--fs)); background: var(--raised); box-shadow: var(--sh-sm); } .bl-opts .opt em { font-style: normal; font-family: var(--display); font-weight: 800; color: var(--link, var(--blue)); } .bl-opts .opt.on { box-shadow: inset 0 0 0 2px var(--blue); } .bl-opts .opt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .bl-pts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .bl-pts b { font-family: var(--display); font-weight: 800; font-size: calc(34px * var(--fs)); letter-spacing: -.05em; } .bl-pts span { font-weight: 650; color: var(--ink-2); } .bl-pts em { font-style: normal; margin-left: auto; font-size: calc(11.5px * var(--fs)); font-weight: 750; padding: 4px 10px; border-radius: 999px; color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 13%, transparent); } .bl-paid { position: relative; text-align: center; padding: 22px 16px 18px; border-radius: 22px; background: var(--raised); box-shadow: var(--sh-lg); overflow: hidden; } .bl-paid::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #25A862, #1F9D5B); } .bl-paid::after { content: ''; position: absolute; left: 50%; top: -90px; width: 260px; height: 260px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(37,168,98,.2), transparent 70%); pointer-events: none; } .bl-paid .ok { position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 auto 10px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #34C77B, #1F9D5B); box-shadow: 0 10px 24px rgba(31,157,91,.4); animation: blpop .5s cubic-bezier(.2,1.4,.4,1) both; } .bl-paid .ok svg { width: 28px; height: 28px; stroke: currentColor; stroke-width: 2.4; } @keyframes blpop { from { transform: scale(.4); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .bl-paid .ok { animation: none; } } .bl-paid .k { position: relative; z-index: 1; font-size: calc(12px * var(--fs)); font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #11763F; } html[data-theme$="night"] .bl-paid .k { color: #5FD39A; } .bl-paid .big { position: relative; z-index: 1; font-family: var(--display); font-weight: 800; font-size: calc(46px * var(--fs)); letter-spacing: -.06em; line-height: 1.1; margin: 4px 0 12px; font-variant-numeric: tabular-nums; } .bl-paid .chs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; } .bl-paid .ch { font-size: calc(12px * var(--fs)); font-weight: 700; padding: 5px 11px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .12); } .bl-acts { padding: 16px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); display: grid; gap: 12px; } .bl-acts .hd { font-family: var(--display); font-weight: 750; font-size: calc(16px * var(--fs)); letter-spacing: -.025em; } .bl-acts .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bl-act { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 15px; font-size: calc(13.5px * var(--fs)); font-weight: 700; background: var(--raised); box-shadow: var(--sh-sm); } .bl-act .ic { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: var(--link, var(--blue)); background: color-mix(in srgb, var(--blue) 13%, transparent); } .bl-act .ic svg { width: 17px; height: 17px; stroke: currentColor; } .bl-act:active { transform: scale(.97); } .bl-act:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .bl-acts .int { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .bl-acts .int button { all: unset; cursor: pointer; font-weight: 750; color: var(--link, var(--blue)); } @media (min-width: 640px) { .bl-acts .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .bl-ticket .its li.g.k { color: var(--link, var(--blue)); font-size: calc(11.5px * var(--fs)); letter-spacing: .09em; }
html[data-ui="v2"] body:has(.lx) { background: var(--bg); margin: 0; } .lx { width: 100%; flex: 1 0 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; } .lx-brand { display: none; } .lx-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lx-hero { position: relative; height: 210px; flex: none; display: grid; place-items: center; padding-bottom: 30px; overflow: hidden; background: radial-gradient(90% 120% at 85% 0%, rgba(255,138,61,.42), transparent 55%), radial-gradient(70% 90% at 0% 100%, rgba(229,86,11,.26), transparent 60%), linear-gradient(160deg, #17181C 0%, #2B1B12 100%); } .lx-hero img { position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 19px; box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.18); animation: lxrise .7s cubic-bezier(.2,.8,.2,1) both; } .lx-hero .b1, .lx-hero .b2, .lx-brand .b1, .lx-brand .b2, .lx-brand .b3 { position: absolute; border-radius: 50%; filter: blur(34px); opacity: .55; pointer-events: none; } .lx-hero .b1 { width: 150px; height: 150px; left: -40px; top: -60px; background: #FF8A3D; opacity: .3; animation: lxfloat 11s ease-in-out infinite alternate; } .lx-hero .b2 { width: 120px; height: 120px; right: -30px; bottom: -70px; background: #F43F5E; opacity: .18; animation: lxfloat 13s ease-in-out -4s infinite alternate; } .lx-card { position: relative; z-index: 3; flex: 1; margin-top: -30px; padding: 26px 22px 24px; border-radius: 32px 32px 0 0; background: var(--bg); box-shadow: 0 -18px 40px rgba(0,0,0,.18), 0 -1px 0 rgba(255,255,255,.08); display: flex; flex-direction: column; gap: 14px; animation: lxslide .6s cubic-bezier(.2,.8,.2,1) both; } .lx-card .rv-banner { margin: 0; } .lx-head h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: calc(32px * min(var(--fs), 1.08)); letter-spacing: -.05em; line-height: 1.02; } .lx-head p { margin: 6px 0 0; font-size: calc(14.5px * var(--fs)); font-weight: 500; color: var(--ink-2); } .lx-form { display: flex; flex-direction: column; gap: 12px; } .lx-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 15px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .lx-seg button { all: unset; cursor: pointer; box-sizing: border-box; min-height: 40px; display: grid; place-items: center; border-radius: 12px; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink-2); transition: background .18s, color .18s; } .lx-seg button[aria-selected="true"] { background: var(--raised-hi, var(--raised)); color: var(--ink); box-shadow: var(--sh-seg); } .lx-seg button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; } .lx-f { position: relative; display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 12px 0 16px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); cursor: text; transition: box-shadow .15s; } .lx-f[hidden] { display: none; } .lx-f > svg.rv-icon { flex: none; width: 20px; height: 20px; color: var(--ink-2); } .lx-f input { all: unset; flex: 1; min-width: 0; box-sizing: border-box; height: 100%; padding-top: 16px; font-size: calc(16px * var(--fs)); font-weight: 600; color: var(--ink); } .lx-f .fl { position: absolute; left: 48px; top: 50%; transform: translateY(-50%); font-size: calc(15px * var(--fs)); font-weight: 500; color: var(--ink-2); pointer-events: none; transition: top .15s, font-size .15s, color .15s, transform .15s; } .lx-f input:focus ~ .fl, .lx-f input:not(:placeholder-shown) ~ .fl, .lx-f input:-webkit-autofill ~ .fl { top: 14px; transform: none; font-size: calc(11px * var(--fs)); font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--link, var(--blue)); } .lx-f:focus-within { box-shadow: var(--sh-in-sm), 0 0 0 2px var(--blue); } .lx-f .eye { all: unset; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: var(--ink-2); } .lx-f .eye svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lx-f .eye .slash { opacity: 1; } .lx-f .eye.on .slash { opacity: 0; } .lx-f .eye:focus-visible { outline: 2px solid var(--blue); } .lx-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .lx-sw { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); min-height: 40px; } .lx-sw input { position: absolute; opacity: 0; width: 0; height: 0; } .lx-sw i { position: relative; flex: none; width: 40px; height: 24px; border-radius: 999px; background: var(--track); box-shadow: var(--sh-in-sm); transition: background .18s; } .lx-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.3); transition: transform .18s; } .lx-sw input:checked + i { background: var(--blue); } .lx-sw input:checked + i::after { transform: translateX(16px); } .lx-sw input:focus-visible + i { outline: 2px solid var(--blue); outline-offset: 2px; } .lx-link { all: unset; cursor: pointer; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); padding: 8px 2px; } .lx-link.center { align-self: center; color: var(--ink-2); } .lx-link:focus-visible { outline: 2px solid var(--blue); border-radius: 8px; } .lx-note { margin: -2px 0 0; padding: 10px 14px; border-radius: 14px; font-size: calc(12.5px * var(--fs)); font-weight: 600; line-height: 1.4; color: var(--ink-2); background: rgba(240,160,43,.14); } .lx-note[hidden] { display: none; } .lx-card .rv-form-error { margin: 0; min-height: 0; } .lx-card .rv-form-error:empty { display: none; } .lx-go { all: unset; cursor: pointer; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 58px; padding: 0 8px 0 22px; border-radius: 17px; font-size: calc(16.5px * var(--fs)); font-weight: 750; color: #fff; background: linear-gradient(90deg, #E5560B, #FF7A29); box-shadow: 0 14px 30px rgba(var(--accent-rgb), .34), inset 0 1px 0 rgba(255,255,255,.32); transition: transform .12s, box-shadow .15s; } .lx-go i { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font-style: normal; font-size: 22px; background: rgba(255,255,255,.2); transition: transform .15s; } .lx-go:hover i { transform: translateX(3px); } .lx-go:active { transform: translateY(1px); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .3); } .lx-go:disabled { opacity: .85; cursor: progress; } .lx-go:disabled i { font-size: 0; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; width: 30px; height: 30px; margin-right: 6px; animation: lxspin .8s linear infinite; } .lx-go:focus-visible { outline: 3px solid rgba(var(--accent-rgb), .5); outline-offset: 3px; } .lx-or { display: flex; align-items: center; gap: 14px; margin: 2px 0; font-size: calc(11.5px * var(--fs)); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); } .lx-or::before, .lx-or::after { content: ''; flex: 1; height: 1px; background: rgba(var(--shadow-rgb), .28); } .lx-g { display: flex; align-items: center; justify-content: center; gap: 12px; height: 54px; border-radius: 16px; text-decoration: none; font-size: calc(15px * var(--fs)); font-weight: 700; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); } .lx-g svg { width: 22px; height: 22px; } .lx-g:active { transform: translateY(1px); } .lx-g:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .lx-foot { margin: 6px 0 0; text-align: center; font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .lx-foot a { color: var(--link, var(--blue)); font-weight: 700; text-decoration: none; } .lx-pin { display: grid; gap: 16px; justify-items: center; } .lx-pin .who { display: grid; justify-items: center; gap: 4px; text-align: center; } .lx-pin .av { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 26px; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 14px 30px rgba(229,86,11,.35), inset 0 1px 0 rgba(255,255,255,.35); margin-bottom: 6px; } .lx-pin .who b { font-family: var(--display); font-size: calc(21px * var(--fs)); letter-spacing: -.035em; } .lx-pin .who small { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); } .lx-dots { display: flex; gap: 14px; margin: 4px 0; } .lx-dots i { width: 15px; height: 15px; border-radius: 50%; background: var(--pressed); box-shadow: var(--sh-in-sm); transition: transform .15s, background .15s; } .lx-dots i.on { background: var(--blue); box-shadow: 0 0 0 4px color-mix(in srgb, var(--blue) 22%, transparent); transform: scale(1.08); } .lx-pad { display: grid; grid-template-columns: repeat(3, 72px); gap: 12px; justify-content: center; } .lx-pad button { all: unset; cursor: pointer; box-sizing: border-box; height: 62px; border-radius: 18px; display: grid; place-items: center; font-family: var(--display); font-weight: 750; font-size: calc(25px * var(--fs)); color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); user-select: none; -webkit-user-select: none; } .lx-pad button:active { transform: scale(.94); background: var(--pressed); box-shadow: var(--sh-in-sm); } .lx-pad .del svg { width: 24px; height: 24px; color: var(--ink-2); } .lx-pad button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @keyframes lxspin { to { transform: rotate(360deg); } } @keyframes lxfloat { to { transform: translate(24px, 18px) scale(1.12); } } @keyframes lxrise { from { opacity: 0; transform: translateY(14px) scale(.9); } } @keyframes lxslide { from { opacity: 0; transform: translateY(34px); } } @media (prefers-reduced-motion: reduce) { .lx-card, .lx-hero img, .lx-hero .b1, .lx-hero .b2, .lx-brand i, .lx-go:disabled i { animation: none !important; } } @media (max-height: 700px) { .lx-hero { height: 150px; padding-bottom: 20px; } .lx-hero img { width: 52px; height: 52px; } .lx-card { gap: 10px; padding-top: 20px; } .lx-f { height: 54px; } .lx-go { height: 54px; } } @media (min-width: 600px) and (max-width: 899px) { .lx-main { align-items: center; } .lx-hero { align-self: stretch; height: 250px; } .lx-card { flex: none; width: min(500px, calc(100% - 48px)); margin: -64px 0 40px; border-radius: 28px; padding: 30px 28px 26px; background: var(--raised); box-shadow: 0 20px 44px rgba(var(--shadow-rgb), .32), 0 2px 6px rgba(var(--shadow-rgb), .18); animation: lxrise .6s cubic-bezier(.2,.8,.2,1) both; } } @media (min-width: 900px) { .lx { flex-direction: row; } .lx-brand { display: block; position: relative; flex: 1.05; min-width: 0; overflow: hidden; color: #F6F1EA; background: radial-gradient(90% 70% at 100% 0%, rgba(255,138,61,.3), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(229,86,11,.22), transparent 60%), #15161B; } .lx-brand .b1 { width: 320px; height: 320px; right: -80px; top: -60px; background: #FF8A3D; opacity: .28; animation: lxfloat 14s ease-in-out infinite alternate; } .lx-brand .b2 { width: 260px; height: 260px; left: -70px; bottom: 60px; background: #E5560B; opacity: .22; animation: lxfloat 17s ease-in-out -6s infinite alternate; } .lx-brand .b3 { width: 200px; height: 200px; right: 20%; bottom: -60px; background: #F43F5E; opacity: .16; animation: lxfloat 19s ease-in-out -2s infinite alternate; } .lx-brand .in { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 30px; padding: 56px clamp(40px, 6vw, 96px); max-width: 680px; margin: 0 auto; } .lx-brand .mk { width: 56px; height: 56px; border-radius: 17px; box-shadow: 0 12px 32px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.16); } .lx-brand h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 3.4vw, 54px); line-height: 1.02; letter-spacing: -.05em; } .lx-brand .pts { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; } .lx-brand .pts li { display: grid; gap: 2px; padding-left: 18px; border-left: 2px solid rgba(255,138,61,.75); } .lx-brand .pts b { font-size: 15.5px; font-weight: 700; } .lx-brand .pts span { font-size: 14px; color: rgba(246,241,234,.66); line-height: 1.4; } .lx-brand .mock { display: flex; gap: 14px; align-items: flex-start; margin-top: 6px; } .lx-brand .m1, .lx-brand .m2 { padding: 16px 18px; border-radius: 20px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lx-brand .m1 { width: 200px; transform: rotate(-2deg); display: grid; gap: 3px; } .lx-brand .m1 small { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: rgba(246,241,234,.55); } .lx-brand .m1 b { font-family: var(--display); font-size: 30px; letter-spacing: -.05em; line-height: 1.05; } .lx-brand .m1 span { font-size: 12px; font-weight: 700; color: #7BE3A8; } .lx-brand .m1 svg { width: 100%; height: 38px; margin-top: 6px; } .lx-brand .m2 { width: 210px; margin-top: 26px; transform: rotate(1.8deg); display: grid; gap: 8px; } .lx-brand .m2 .r { display: flex; justify-content: space-between; align-items: center; } .lx-brand .m2 .r b { font-family: var(--display); font-size: 22px; letter-spacing: -.04em; } .lx-brand .m2 em { font-style: normal; font-size: 11.5px; font-weight: 750; padding: 4px 10px; border-radius: 999px; color: #FFB547; background: rgba(240,160,43,.18); } .lx-brand .m2 .l { display: flex; justify-content: space-between; font-size: 13px; color: rgba(246,241,234,.78); } .lx-brand .m2 .bar { height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .lx-brand .m2 .bar i { display: block; height: 100%; width: 62%; border-radius: 3px; background: #FFB547; animation: lxbar 4s ease-in-out infinite alternate; } @keyframes lxbar { from { width: 38%; } to { width: 88%; } } .lx-main { flex: 1; justify-content: center; align-items: center; padding: 32px 24px; } .lx-hero { display: none; } .lx-card { flex: none; width: min(440px, 100%); margin: 0; border-radius: 28px; padding: 34px 30px 28px; background: var(--raised); box-shadow: var(--sh-lg); animation: lxrise .6s cubic-bezier(.2,.8,.2,1) both; } } .lx:has(.lx-pin:not([hidden])) .lx-hero { height: 150px; padding-bottom: 18px; } .lx:has(.lx-pin:not([hidden])) .lx-hero img { width: 52px; height: 52px; } .lx-pad { grid-template-columns: repeat(3, 70px); gap: 10px; } .lx-pad button { height: 56px; } .gw-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .gw-who .av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 16px; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); } .gw-who .tx { flex: 1; min-width: 0; display: grid; } .gw-who .tx b { font-family: var(--display); font-size: calc(16px * var(--fs)); letter-spacing: -.02em; } .gw-who .tx small { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gw-lead { margin: 0; font-size: calc(14.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .gw-hint { margin: -6px 4px 0; font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .gw-small { margin: 0; text-align: center; font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .gw-small a { color: var(--link, var(--blue)); font-weight: 700; text-decoration: none; } .lx-form[hidden] { display: none; } .lx-g-note { margin: -4px 0 0; text-align: center; font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .lb-cloth, .lb-open, .lb-plate, .lb-ticket, .lb-ready, .lb-sales { display: none; } @media (min-width: 900px) { .lx-brand { background: radial-gradient(75% 55% at 100% 0%, rgba(255,150,60,.30), transparent 62%), radial-gradient(70% 55% at 0% 100%, rgba(200,80,24,.26), transparent 64%), #1B120D; } .lb-cloth { display: block; position: absolute; inset: 0; pointer-events: none; opacity: .9; background: repeating-linear-gradient(0deg, rgba(255,226,190,.055) 0 30px, transparent 30px 60px), repeating-linear-gradient(90deg, rgba(255,226,190,.055) 0 30px, transparent 30px 60px); -webkit-mask-image: radial-gradient(90% 70% at 100% 100%, #000 0%, transparent 75%); mask-image: radial-gradient(90% 70% at 100% 100%, #000 0%, transparent 75%); } .lx-brand .in { margin: 0 auto 0 clamp(40px, 7vw, 120px); padding: 56px 40px 56px 0; max-width: 580px; z-index: 3; } .lx-brand h2 { font-size: clamp(34px, 3.2vw, 52px); } .lx-brand .pts li { border-left-color: rgba(255,170,90,.8); } .lx-brand .pts li span { max-width: 340px; } .lb-open { display: inline-flex; align-items: center; gap: 9px; position: absolute; z-index: 3; top: 30px; right: clamp(28px, 4vw, 56px); padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #FFC796; border: 1.5px solid rgba(255,176,110,.55); background: rgba(255,138,61,.08); box-shadow: 0 0 22px rgba(255,138,61,.28), inset 0 0 14px rgba(255,138,61,.14); text-shadow: 0 0 10px rgba(255,150,70,.7); } .lb-open i { width: 8px; height: 8px; border-radius: 50%; background: #5FE29B; box-shadow: 0 0 10px #5FE29B; animation: lbblink 2.4s ease-in-out infinite; } .lb-plate { display: block; position: absolute; z-index: 1; width: clamp(300px, 29vw, 540px); right: -7%; bottom: -9%; filter: drop-shadow(0 34px 44px rgba(0,0,0,.55)); animation: lbturn 140s linear infinite; } .lb-ticket, .lb-ready, .lb-sales { display: grid; position: absolute; z-index: 4; padding: 14px 16px; border-radius: 20px; background: rgba(34,22,16,.72); box-shadow: inset 0 0 0 1px rgba(255,214,170,.16), 0 18px 38px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .lb-ticket { right: clamp(30px, 10%, 190px); bottom: clamp(130px, 27%, 300px); width: 236px; gap: 7px; transform: rotate(-2.4deg); } .lb-ticket .r { display: flex; justify-content: space-between; align-items: center; } .lb-ticket .r b { font-family: var(--display); font-size: 22px; letter-spacing: -.04em; } .lb-ticket em { font-style: normal; font-size: 11.5px; font-weight: 750; padding: 4px 10px; border-radius: 999px; color: #FFB547; background: rgba(240,160,43,.18); } .lb-ticket .l { display: flex; justify-content: space-between; font-size: 13px; color: rgba(255,238,220,.82); } .lb-ticket .bar { height: 5px; margin-top: 3px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; } .lb-ticket .bar i { display: block; height: 100%; width: 62%; border-radius: 3px; background: #FFB547; animation: lxbar 4s ease-in-out infinite alternate; } .lb-ready { left: clamp(40px, 7vw, 120px); bottom: 40px; grid-auto-flow: column; align-items: center; gap: 12px; padding: 11px 18px 11px 12px; border-radius: 999px; font-size: 13px; color: rgba(255,238,220,.82); transform: rotate(-1deg); } .lb-ready b { color: #fff; } .lb-ready .bell { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #1B120D; background: #5FE29B; box-shadow: 0 0 16px rgba(95,226,155,.5); } .lb-ready .bell svg { width: 20px; height: 20px; } .lb-sales { top: 96px; right: clamp(40px, 8%, 130px); width: 190px; gap: 3px; transform: rotate(2.2deg); } .lb-sales small { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,238,220,.55); } .lb-sales b { font-family: var(--display); font-size: 28px; letter-spacing: -.05em; line-height: 1.05; } .lb-sales span { font-size: 12px; font-weight: 700; color: #7BE3A8; } .lb-sales svg { width: 100%; height: 34px; margin-top: 6px; } } @media (min-width: 900px) and (max-width: 1499px) { .lb-sales { display: none; } .lb-ticket { top: 88px; bottom: auto; right: 30px; width: 226px; } .lb-plate { width: clamp(280px, 26vw, 340px); bottom: -17%; right: -8%; } } @media (min-width: 900px) and (max-width: 1199px) { .lb-ready { display: none; } .lb-plate { width: 280px; right: -12%; } .lb-ticket { right: 24px; width: 214px; } } @media (min-width: 900px) and (max-height: 760px) { .lb-ready, .lb-sales { display: none; } } @keyframes lbturn { to { transform: rotate(360deg); } } @keyframes lbblink { 50% { opacity: .45; } } @media (prefers-reduced-motion: reduce) { .lb-plate, .lb-open i, .lb-ticket .bar i { animation: none !important; } } .rv-rest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 6px 2px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .rv-rest[hidden] { display: none; } .rv-rest b { color: var(--ink); font-weight: 750; } .rv-rest button { all: unset; cursor: pointer; font-weight: 700; color: var(--link, var(--blue)); padding: 4px 2px; } .rv-rest button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; } .lx-f[hidden], .lg-field[hidden] { display: none; }
.mo2 [hidden], .mo2[hidden] { display: none !important; } html[data-ui="v2"] .mo-prof { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 14px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); } .mo-prof .av { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: calc(17px * var(--fs)); color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 8px 16px rgba(var(--accent-rgb), .28), inset 0 1px 0 rgba(255,255,255,.35); } .mo-prof .tx { min-width: 0; display: flex; flex-direction: column; } .mo-prof .tx b { font-family: var(--display); font-weight: 800; font-size: calc(17.5px * var(--fs)); letter-spacing: -.03em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mo-prof .tx small { font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .mo-prof .chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; } .mo-prof .chips span { font-size: calc(11.5px * var(--fs)); font-weight: 700; padding: 4px 10px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); } .mo-prof .chips span.on { color: #11763F; background: rgba(37,168,98,.15); } html[data-theme$="night"] .mo-prof .chips span.on { color: #6FE0A2; background: rgba(37,168,98,.2); } html[data-ui="v2"] #clock-root, html[data-ui="v2"] #install-root > .rv-card { padding: 10px 12px 10px 14px !important; gap: 10px !important; border-radius: 18px; min-height: 0; } html[data-ui="v2"] #clock-root h3, html[data-ui="v2"] #install-root h3 { font-size: calc(14.5px * var(--fs)); font-family: var(--display); font-weight: 750; letter-spacing: -.02em; } html[data-ui="v2"] #clock-root .rv-muted, html[data-ui="v2"] #install-root .rv-muted { font-size: calc(12px * var(--fs)) !important; } html[data-ui="v2"] #clock-root .rv-btn, html[data-ui="v2"] #install-root .rv-btn { min-height: 36px; padding: 0 14px; font-size: calc(13px * var(--fs)); } html[data-ui="v2"] #install-root > .rv-card { align-items: flex-start !important; } html[data-ui="v2"] #install-root .rv-muted { line-height: 1.35; } .mo-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 16px; color: var(--ink-2); background: var(--pressed, rgba(var(--shadow-rgb), .1)); box-shadow: var(--sh-in-sm, none); } .mo-search:focus-within { box-shadow: var(--sh-in-sm, none), 0 0 0 2px var(--blue); } .mo-search .rv-icon { width: 19px; height: 19px; flex: none; } .mo-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: calc(15px * var(--fs)); font-weight: 600; } .mo-search input::placeholder { color: var(--ink-2); font-weight: 550; } .mo-search input::-webkit-search-cancel-button { appearance: none; } .mo-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mo-chips::-webkit-scrollbar { display: none; } .mo-chips button { flex: none; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .mo-chips button[aria-selected="true"] { color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 8px 16px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.3); } .mo-chips button:focus-visible, .mo-quick a:focus-visible, .mo-list > *:focus-visible, .mo-out button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .mo-grp { display: grid; gap: 10px; } .mo-grp > h2 { margin: 0 0 0 2px; display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 800; font-size: calc(15px * var(--fs)); letter-spacing: -.02em; color: var(--ink); } .mo-grp > h2 .hi { width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; color: var(--k, var(--blue)); background: color-mix(in srgb, var(--k, var(--blue)) 14%, transparent); } .mo-grp > h2 .hi .rv-icon { width: 15px; height: 15px; } .mo-grp > h2 small { margin-left: auto; margin-right: 4px; font-family: inherit; font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--ink-2); } .k-daily { --k: #E5560B; } .k-run { --k: #2F6FDE; } .k-reports { --k: #7A4FD3; } .k-guests { --k: #1F9D6A; } .k-app { --k: #B5780B; } .k-platform { --k: #C2410C; } html[data-theme$="night"] .k-run { --k: #7DA9FF; } html[data-theme$="night"] .k-reports { --k: #B79BFF; } html[data-theme$="night"] .k-guests { --k: #5FD9A2; } html[data-theme$="night"] .k-app { --k: #F2B84B; } html[data-theme$="night"] .k-daily, html[data-theme$="night"] .k-platform { --k: #FF9A5C; } .mo-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .mo-quick a { position: relative; display: grid; gap: 3px; align-content: start; min-height: 96px; padding: 12px 14px 13px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; } .mo-quick a:active { transform: scale(.985); } .mo-quick .ic { width: 36px; height: 36px; margin-bottom: 6px; border-radius: 12px; display: grid; place-items: center; color: var(--k, var(--blue)); background: color-mix(in srgb, var(--k, var(--blue)) 14%, transparent); } .mo-quick .ic .rv-icon { width: 19px; height: 19px; } .mo-quick b { font-family: var(--display); font-weight: 750; font-size: calc(15px * var(--fs)); letter-spacing: -.02em; } .mo-quick small { font-size: calc(11.5px * var(--fs)); font-weight: 550; line-height: 1.3; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mo-list { border-radius: 20px; overflow: hidden; background: var(--raised); box-shadow: var(--sh-md); } .mo-list > * { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; color: var(--ink); -webkit-tap-highlight-color: transparent; } .mo-list > * + * { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .mo-list > *:active { background: rgba(var(--shadow-rgb), .1); } .mo-list .ic { flex: none; width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: var(--k, var(--blue)); background: color-mix(in srgb, var(--k, var(--blue)) 13%, transparent); } .mo-list .ic .rv-icon, .mo-list .ic svg { width: 18px; height: 18px; } .mo-list .ic.wa, .mo-list .ic:has(> svg:not(.rv-icon)) { color: #1F9D6A; background: rgba(37,168,98,.14); } .mo-list .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .mo-list .tx b { font-size: calc(14.5px * var(--fs)); font-weight: 700; line-height: 1.25; } .mo-list .tx small { font-size: calc(12px * var(--fs)); font-weight: 550; line-height: 1.3; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mo-list .ch { flex: none; color: var(--ink-2); font-size: calc(18px * var(--fs)); line-height: 1; opacity: .7; } .mo-list .bd { flex: none; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: calc(11.5px * var(--fs)); font-weight: 800; color: #fff; background: #1F9D6A; } .mo-out { display: grid; gap: 8px; padding-top: 4px; } .mo-out button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 16px; font-size: calc(14.5px * var(--fs)); font-weight: 700; -webkit-tap-highlight-color: transparent; } .mo-out .so { color: var(--red, #B3261E); background: var(--raised); box-shadow: var(--sh-md); } .mo-out .so .rv-icon { width: 18px; height: 18px; } .mo-out .fg { color: var(--ink-2); font-size: calc(13px * var(--fs)); min-height: 36px; } .mo-none { margin: 4px 0; text-align: center; font-size: calc(14px * var(--fs)); font-weight: 600; color: var(--ink-2); } .mo2 { display: grid; gap: 16px; } @media (min-width: 900px) { .mo2 { max-width: 760px; } .mo-quick { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mo-chips { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } } .gl-on { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); } .gl-on .gl-g { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.12); } .gl-on .tx { flex: 1; min-width: 0; display: grid; } .gl-on .tx b { font-size: calc(15px * var(--fs)); } .gl-on .tx small { font-size: calc(12.5px * var(--fs)); color: var(--ink-2); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gl-on .gl-ok { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 800; color: #fff; background: #25A862; } .rv-btn.gl-btn { gap: 10px; color: var(--ink) !important; background: #fff !important; box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 16px rgba(var(--shadow-rgb), .25), inset 0 0 0 1px rgba(var(--shadow-rgb), .25) !important; } html[data-theme$="night"] .rv-btn.gl-btn { color: #1B1C21 !important; } .pf { display: grid; gap: 18px; max-width: 640px; } .pf-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center; padding: 18px; border-radius: 22px; background: var(--raised); box-shadow: var(--sh-md); } .pf-hero .av { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font: 800 calc(22px * var(--fs)) var(--display, inherit); letter-spacing: -.03em; color: #fff; background: linear-gradient(145deg, #FF8A3D, var(--blue)); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .3); } .pf-hero .who { min-width: 0; display: grid; gap: 2px; } .pf-hero .who > b { font: 780 calc(21px * var(--fs)) var(--display, inherit); letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-hero .who > span { font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .pf-hero .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .pf-hero .chips span { padding: 4px 10px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-hero .chips .code { color: var(--link, var(--blue)); } .pf-hero .facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin: 4px 0 0; } .pf-hero .facts div { padding: 9px 12px; border-radius: 14px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-hero .facts dt { font-size: calc(11px * var(--fs)); font-weight: 650; color: var(--ink-2); } .pf-hero .facts dd { margin: 2px 0 0; font-size: calc(13.5px * var(--fs)); font-weight: 700; } .pf-group h3 { margin: 0 0 8px 6px; font-size: calc(12px * var(--fs)); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .pf-list { display: grid; border-radius: 20px; overflow: hidden; background: var(--raised); box-shadow: var(--sh-md); } .pf-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 13px; padding: 14px 16px; -webkit-tap-highlight-color: transparent; } .pf-row + .pf-row { border-top: 1px solid rgba(var(--shadow-rgb), .12); } .pf-row:hover { background: rgba(var(--shadow-rgb), .05); } .pf-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; } .pf-row .ico { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; flex: none; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-row .ico svg { width: 17px; height: 17px; } .pf-row .tx { flex: 1; min-width: 0; display: grid; gap: 1px; } .pf-row .tx b { font-size: calc(15px * var(--fs)); font-weight: 700; } .pf-row .tx small { font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-row .chev { font-style: normal; font-size: calc(20px * var(--fs)); color: var(--ink-2); } .pf-row.danger .tx b, .pf-row.danger .ico { color: #C2410C; } .pf-tag { font-style: normal; padding: 4px 10px; border-radius: 999px; font-size: calc(11px * var(--fs)); font-weight: 750; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-tag.on { color: #1F7A47; background: color-mix(in srgb, #1F9D5B 14%, transparent); box-shadow: none; } .pf-tip { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 14px; border-radius: 16px; font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-tip svg { width: 18px; height: 18px; flex: none; color: var(--link, var(--blue)); } .pf-foot, .pf-note { margin: 0; font-size: calc(13px * var(--fs)); color: var(--ink-2); } .pf-foot { padding: 0 6px; } .pf-hint { display: block; margin-top: 5px; font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .pf-hero .avw { display: grid; justify-items: center; gap: 6px; } .pf-hero img.av, .mo-prof img.av { object-fit: cover; padding: 0; background: var(--pressed); } .pf-rm { all: unset; cursor: pointer; font-size: calc(11px * var(--fs)); font-weight: 700; color: var(--ink-2); } .pf-rm:hover { color: #C2410C; } .pf-rm:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 6px; } .rv-avatar.pic { padding: 0; overflow: hidden; } .rv-avatar.pic img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; } a.mo-prof { text-decoration: none; color: inherit; } a.mo-prof u { text-decoration: none; color: var(--link, var(--blue)); font-weight: 700; } a.mo-prof:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .jn .rv-section { max-width: 520px; } .jn-lead { margin: 0; font-size: calc(14px * var(--fs)); } .jn-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 360px) { .jn-two { grid-template-columns: 1fr; } } .jn-phone { display: flex; align-items: center; gap: 8px; } .jn-phone em { font-style: normal; flex: none; padding: 0 12px; height: 48px; display: grid; place-items: center; border-radius: 14px; font-weight: 700; color: var(--ink-2); background: var(--pressed); box-shadow: var(--sh-in-sm); } .jn-phone .rv-input { flex: 1; min-width: 0; } .jn-hint { display: block; margin: 5px 4px 0; font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .jn-sep { display: flex; align-items: center; gap: 10px; margin-top: 4px; font-size: calc(11.5px * var(--fs)); font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); } .jn-sep::after { content: ''; flex: 1; height: 1px; background: rgba(var(--shadow-rgb), .18); } .jn-done { text-align: center; align-items: center; } .jn-done h2 { margin: 0; } .jn-done p { margin: 0; font-size: calc(14px * var(--fs)); } .jn-tick { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: #1F7A47; background: color-mix(in srgb, #1F9D5B 15%, transparent); } .jn-tick svg { width: 26px; height: 26px; } .lx-join { display: block; text-align: center; margin-top: 10px; font-size: calc(13.5px * var(--fs)); font-weight: 600; color: var(--ink-2); } .lx-join a { color: var(--link, var(--blue)); font-weight: 750; text-decoration: none; } .st-req { display: grid; gap: 10px; padding: 14px; border-radius: 20px; background: color-mix(in srgb, #F0A02B 10%, var(--raised)); box-shadow: var(--sh-md), inset 0 0 0 1.5px color-mix(in srgb, #F0A02B 45%, transparent); } .st-req h3 { margin: 0; font-size: calc(14px * var(--fs)); } .st-req .rq { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--raised); } .st-req .rq .l { flex: 1; min-width: 0; } .st-req .rq b { display: block; font-size: calc(14.5px * var(--fs)); } .st-req .rq small { display: block; font-size: calc(12px * var(--fs)); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-glogo { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; } .pf-glogo svg { width: 20px; height: 20px; } .pf-gintro { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-gintro .pf-glogo { width: 40px; height: 40px; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); } .pf-gintro p { margin: 0; font-size: calc(14px * var(--fs)); font-weight: 600; } .pf-gpts { margin: 14px 0 18px; padding: 0 0 0 4px; list-style: none; display: grid; gap: 9px; } .pf-gpts li { position: relative; padding-left: 24px; font-size: calc(13px * var(--fs)); color: var(--ink-2); } .pf-gpts li::before { content: '✓'; position: absolute; left: 2px; top: 0; font-weight: 900; color: #1F9D5B; } .pf-gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; border-radius: 14px; text-decoration: none; background: #fff; color: #1F1F1F; font: 600 calc(15px * var(--fs)) var(--font, system-ui), sans-serif; box-shadow: 0 0 0 1px #DADCE0, 0 1px 2px rgba(60,64,67,.15); transition: background .15s, box-shadow .15s; } .pf-gbtn:hover { background: #F8F9FA; box-shadow: 0 0 0 1px #DADCE0, 0 2px 6px rgba(60,64,67,.2); } .pf-gbtn:active { background: #F1F3F4; } .pf-gbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .pf-gacct { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm); } .pf-gacct span { display: grid; min-width: 0; } .pf-gacct b { font-size: calc(14px * var(--fs)); color: #1F7A47; } .pf-gacct small { font-size: calc(13px * var(--fs)); color: var(--ink); overflow-wrap: anywhere; } html[data-theme$="night"] .pf-gbtn { background: #131314; color: #E3E3E3; box-shadow: 0 0 0 1px #8E918F; }
#menu-root.mn { display: grid; gap: 14px; padding-bottom: 84px; } .mn-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .mn-st { all: unset; box-sizing: border-box; cursor: pointer; display: grid; gap: 2px; padding: 11px 6px 10px; border-radius: 16px; text-align: center; background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .mn-st b { font-family: var(--display); font-weight: 800; font-size: calc(21px * var(--fs)); letter-spacing: -.03em; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; } .mn-st span { font-size: calc(11px * var(--fs)); font-weight: 650; color: var(--ink-2); } .mn-st.s-on b { color: #11763F; } .mn-st.s-out b { color: var(--red, #B3261E); } .mn-st.s-hid b { color: var(--ink-2); } html[data-theme$="night"] .mn-st.s-on b { color: #6FE0A2; } html[data-theme$="night"] .mn-st.s-out b { color: #FF8A80; } .mn-st[aria-pressed="true"] { background: var(--pressed); box-shadow: var(--sh-in-sm); } .mn-st[aria-pressed="true"] span { color: var(--ink); } html[data-theme$="night"] .mn-st[aria-pressed="true"] { background: rgba(var(--accent-rgb), .14); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); } .mn-st:focus-visible, .mn-chip:focus-visible, .mn-org-btn:focus-visible, .mn-dish:focus-visible, .mn-sw:focus-visible, .mn-gh .add:focus-visible, .mn-org:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .mn-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .mn-search { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 16px; color: var(--ink-2); background: var(--pressed, rgba(var(--shadow-rgb), .1)); box-shadow: var(--sh-in-sm, none); } .mn-search:focus-within { box-shadow: var(--sh-in-sm, none), 0 0 0 2px var(--blue); } .mn-search .rv-icon { width: 19px; height: 19px; flex: none; } .mn-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: calc(15px * var(--fs)); font-weight: 600; } .mn-search input::placeholder { color: var(--ink-2); font-weight: 550; } .mn-search input::-webkit-search-cancel-button { appearance: none; } .mn-org-btn { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; border-radius: 16px; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink); background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .mn-org-btn .rv-icon { width: 18px; height: 18px; color: var(--ink-2); } .mn-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .mn-chips::-webkit-scrollbar { display: none; } .mn-chip { flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .mn-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h, 24) 78% 52%); } .mn-chip:first-child::before { display: none; } .mn-chip em { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(var(--shadow-rgb), .13); } .mn-chip[aria-pressed="true"] { color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 8px 16px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.3); } .mn-chip[aria-pressed="true"]::before { background: #fff; } .mn-chip[aria-pressed="true"] em { color: #fff; background: rgba(255,255,255,.24); } .mn-list { display: grid; gap: 18px; } .mn-grp { display: grid; gap: 10px; } .mn-gh { display: flex; align-items: center; gap: 9px; padding: 0 2px; } .mn-gh::before { content: ''; width: 4px; height: 18px; border-radius: 3px; background: hsl(var(--h) 78% 52%); } .mn-gh b { font-family: var(--display); font-weight: 800; font-size: calc(16px * var(--fs)); letter-spacing: -.02em; } .mn-gh small { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); } .mn-gh .add { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: hsl(var(--h) 78% 48%); background: hsl(var(--h) 80% 50% / .14); -webkit-tap-highlight-color: transparent; } .mn-gh .add .rv-icon { width: 17px; height: 17px; } html[data-theme$="night"] .mn-gh .add { color: hsl(var(--h) 90% 70%); } .mn-cards { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); } .mn-dish { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 18px; cursor: pointer; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; transition: opacity .15s; } .mn-dish:active { transform: scale(.992); } .mn-dish .tile { position: relative; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: calc(19px * var(--fs)); color: hsl(var(--h) 72% 42%); background: hsl(var(--h) 85% 55% / .15); } html[data-theme$="night"] .mn-dish .tile { color: hsl(var(--h) 90% 72%); } .mn-dish .tile .rv-diet { position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-width: 1.5px; box-shadow: 0 0 0 2px var(--c1, var(--bg, #fff)); } .mn-dish .bd { min-width: 0; display: grid; gap: 1px; } .mn-dish .bd b { font-family: var(--display); font-weight: 750; font-size: calc(15.5px * var(--fs)); letter-spacing: -.02em; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-dish .bd small { font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mn-dish .tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; } .mn-dish .tg { font-size: calc(10.5px * var(--fs)); font-weight: 750; padding: 2px 8px; border-radius: 999px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .12); } .mn-dish .tg.out { color: var(--red, #B3261E); background: rgba(179,38,30,.12); } html[data-theme$="night"] .mn-dish .tg.out { color: #FF8A80; background: rgba(255,138,128,.14); } .mn-dish .rt { display: grid; justify-items: end; gap: 7px; } .mn-dish .pr { font-family: var(--display); font-weight: 800; font-size: calc(15.5px * var(--fs)); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; } .mn-dish.is-out .bd b { text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(var(--shadow-rgb), .8); } .mn-dish.is-out .tile, .mn-dish.is-out .pr { opacity: .6; } .mn-dish.is-hid { opacity: .6; } .mn-sw { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--track, rgba(var(--shadow-rgb), .3)); box-shadow: inset 2px 2px 5px rgba(var(--shadow-rgb), .35); transition: background .18s; -webkit-tap-highlight-color: transparent; } .mn-sw i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,.28); transition: transform .18s; } .mn-sw[aria-checked="true"] { background: linear-gradient(145deg, #25A862, #11763F); box-shadow: none; } .mn-sw[aria-checked="true"] i { transform: translateX(18px); } .mn-sw::before { content: ''; position: absolute; inset: -9px -4px; } .mn-orgs { border-radius: 20px; overflow: hidden; background: var(--raised); box-shadow: var(--sh-md); } .mn-org { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: var(--ink); -webkit-tap-highlight-color: transparent; } .mn-org + .mn-org { border-top: 1px solid rgba(var(--shadow-rgb), .16); } .mn-org:active { background: rgba(var(--shadow-rgb), .1); } .mn-org .tx { flex: 1; min-width: 0; display: grid; gap: 2px; } .mn-org .tx b { font-size: calc(15px * var(--fs)); font-weight: 700; } .mn-org .tx small { font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .mn-org .ch { color: var(--ink-2); font-size: calc(20px * var(--fs)); opacity: .7; } @media (min-width: 760px) { .mn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mn-chips { margin: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } } @media (min-width: 1180px) { .mn-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .mn-two { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 10px; } .mn-dish .tg.tag { color: #9A4A00; background: rgba(240, 140, 30, .14); } html[data-theme$="night"] .mn-dish .tg.tag { color: #FFB866; background: rgba(255, 170, 80, .14); } .mn-code, .pd-code { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-family: ui-monospace, Consolas, monospace; font-size: .78em; font-weight: 700; line-height: 1.5; vertical-align: 1px; color: var(--ink-2); background: rgba(var(--shadow-rgb, 60,50,40), .12); } .pd-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 1px; } .pd-tag { font-size: calc(10.5px * var(--fs)); font-weight: 750; line-height: 1.5; padding: 0 7px; border-radius: 999px; white-space: nowrap; color: #9A4A00; background: rgba(240, 140, 30, .14); } html[data-theme$="night"] .pd-tag { color: #FFB866; background: rgba(255, 170, 80, .14); } .tg-line { gap: 8px; } .tg-line.off .nm { opacity: .55; }
.pt-top { display: grid; gap: 10px; } .pt-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: var(--pressed, rgba(var(--shadow-rgb), .1)); box-shadow: var(--sh-in-sm, none); } .pt-seg button { all: unset; box-sizing: border-box; cursor: pointer; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--ink-2); -webkit-tap-highlight-color: transparent; } .pt-seg button[aria-selected="true"] { color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.3); } .pt-table { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; } .pt-table .ic { flex: none; width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #E5560B; background: rgba(var(--accent-rgb), .14); } .pt-table .ic .rv-icon { width: 20px; height: 20px; } .pt-table .tx { flex: 1; min-width: 0; display: grid; gap: 1px; } .pt-table .tx b { font-family: var(--display); font-weight: 800; font-size: calc(16px * var(--fs)); letter-spacing: -.02em; } .pt-table .tx small { font-size: calc(12px * var(--fs)); font-weight: 600; color: var(--ink-2); } .pt-table .chg { flex: none; font-size: calc(12.5px * var(--fs)); font-weight: 750; padding: 6px 13px; border-radius: 999px; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } .pt-table.none { box-shadow: var(--sh-md), inset 0 0 0 1.5px rgba(var(--accent-rgb), .5); } .pt-src { display: grid; gap: 10px; } .pt-tools { position: sticky; top: 0; z-index: 6; margin: 10px calc(var(--gutter, 16px) * -1) 0; padding: 8px var(--gutter, 16px) 4px; display: grid; gap: 8px; background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .pt-sr { display: flex; gap: 8px; } .pt-search { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border-radius: 16px; color: var(--ink-2); background: var(--pressed, rgba(var(--shadow-rgb), .1)); box-shadow: var(--sh-in-sm, none); } .pt-search:focus-within { box-shadow: var(--sh-in-sm, none), 0 0 0 2px var(--blue); } .pt-search .rv-icon { width: 19px; height: 19px; flex: none; } .pt-in { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: calc(15px * var(--fs)); font-weight: 600; } .pt-in::placeholder { color: var(--ink-2); font-weight: 550; } .pt-in::-webkit-search-cancel-button { appearance: none; } .pt-veg { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; border-radius: 16px; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .pt-veg[hidden] { display: none; } .pt-veg[aria-pressed="true"] { color: #11763F; background: rgba(37,168,98,.16); box-shadow: inset 0 0 0 1.5px rgba(37,168,98,.55); } html[data-theme$="night"] .pt-veg[aria-pressed="true"] { color: #6FE0A2; } .pt-chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 calc(var(--gutter, 16px) * -1); padding: 2px var(--gutter, 16px) 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .pt-chips::-webkit-scrollbar { display: none; } .pt-chip { position: relative; flex: none; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: calc(13px * var(--fs)); font-weight: 700; color: var(--ink-2); background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .pt-chips .pt-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--h, 24) 78% 52%); } .pt-chips .pt-chip:first-child::before { display: none; } .pt-src .pt-chips .pt-chip::before { display: none; } .pt-chip em { font-style: normal; font-size: calc(11px * var(--fs)); font-weight: 800; padding: 2px 7px; border-radius: 999px; background: rgba(var(--shadow-rgb), .13); } .pt-chip .dot { position: absolute; top: 3px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #E5560B; box-shadow: 0 0 0 2px var(--bg); } .pt-chip[aria-pressed="true"] { color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 8px 16px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.3); } .pt-chip[aria-pressed="true"]::before { background: #fff; } .pt-chip[aria-pressed="true"] em { color: #fff; background: rgba(255,255,255,.24); } .pt-chip[aria-pressed="true"] .dot { background: #fff; box-shadow: 0 0 0 2px #E5560B; } .pt-chip:focus-visible, .pt-veg:focus-visible, .pt-seg button:focus-visible, .pt-table:focus-visible, .pd-add:focus-visible, .op-row:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .pt-items { display: grid; gap: 16px; margin-top: 6px; } .pt-sec { display: grid; gap: 8px; } .pt-sh { display: flex; align-items: center; gap: 9px; padding: 0 2px; } .pt-sh::before { content: ''; width: 4px; height: 16px; border-radius: 3px; background: hsl(var(--h) 78% 52%); } .pt-sh b { font-family: var(--display); font-weight: 800; font-size: calc(15px * var(--fs)); letter-spacing: -.02em; } .pt-sh small { font-size: calc(12px * var(--fs)); font-weight: 700; color: var(--ink-2); } .pt-rows { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .pd { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 64px; padding: 9px 10px 9px 14px; border-radius: 16px; background: var(--raised); box-shadow: var(--sh-sm); } .pd.in { box-shadow: var(--sh-sm), inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); } .pd.out { opacity: .55; } .pd .rv-diet { align-self: start; margin-top: 4px; } .pd .bd { min-width: 0; display: grid; gap: 2px; } .pd .bd b { font-family: var(--display); font-weight: 750; font-size: calc(15.5px * var(--fs)); letter-spacing: -.02em; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pd .bd small { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); } .pd .pr { flex: none; font-family: var(--display); font-weight: 800; font-size: calc(13.5px * var(--fs)); letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; } .pd .op { flex: none; font-size: calc(10.5px * var(--fs)); font-weight: 750; padding: 1px 7px; border-radius: 999px; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); } .pd .ds { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pd-add { all: unset; box-sizing: border-box; cursor: pointer; position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--link, var(--blue)); background: rgba(var(--accent-rgb), .13); box-shadow: inset 0 0 0 1.5px rgba(var(--accent-rgb), .55); -webkit-tap-highlight-color: transparent; } .pd-add .rv-icon { width: 20px; height: 20px; } .pd-add:active { color: #fff; background: var(--blue); } .pd-add .n { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: calc(11px * var(--fs)); font-weight: 800; color: #fff; background: #E5560B; box-shadow: 0 0 0 2px var(--c1, var(--bg)); } .pd .rv-stepper button { width: 38px; height: 38px; } .pd-out { font-size: calc(11.5px * var(--fs)); font-weight: 750; padding: 5px 11px; border-radius: 999px; color: var(--red, #B3261E); background: rgba(179,38,30,.12); } html[data-theme$="night"] .pd-out { color: #FF8A80; } .op-list { display: grid; gap: 8px; } .op-row { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--raised); box-shadow: var(--sh-sm); -webkit-tap-highlight-color: transparent; } .op-row .mk { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(var(--shadow-rgb), .55); } .op-row .mk.sq { border-radius: 7px; } .op-row .l { flex: 1; min-width: 0; font-size: calc(15px * var(--fs)); font-weight: 650; } .op-row .p { flex: none; font-size: calc(13.5px * var(--fs)); font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; } .op-row[aria-pressed="true"] { box-shadow: var(--sh-sm), inset 0 0 0 1.5px rgba(var(--accent-rgb), .6); background: linear-gradient(145deg, rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .04)), var(--raised); } .op-row[aria-pressed="true"] .mk { background: var(--blue); box-shadow: none; } .op-row[aria-pressed="true"] .mk::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .op-row[aria-pressed="true"] .mk.sq::after { width: 10px; height: 6px; margin-top: -2px; border-radius: 0; background: none; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); } @media (min-width: 900px) { .pt-tools { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } .pt-chips { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; flex-wrap: wrap; overflow: visible; } } .pd:not(.out) { cursor: pointer; user-select: none; -webkit-user-select: none; } .pt-flash { position: fixed; z-index: 80; left: 50%; top: calc(10px + env(safe-area-inset-top)); width: min(456px, calc(100% - 24px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 18px; color: #fff; background: #1B1C21; box-shadow: 0 16px 36px rgba(0,0,0,.34), inset 0 0 0 1px rgba(255,255,255,.08); opacity: 0; translate: -50% -18px; scale: .98; pointer-events: none; transition: opacity .22s ease, translate .32s cubic-bezier(.22, 1, .36, 1), scale .32s cubic-bezier(.22, 1, .36, 1); } .pt-flash.show { opacity: 1; translate: -50% 0; scale: 1; } .pt-flash .rv-diet { flex: none; } .pt-flash .nm { flex: 1; min-width: 0; display: grid; font-family: var(--display); font-weight: 750; font-size: 16px; letter-spacing: -.02em; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pt-flash .nm small { font-family: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; color: rgba(255,255,255,.6); overflow: hidden; text-overflow: ellipsis; } .pt-flash .q { flex: none; min-width: 52px; height: 34px; padding: 0 12px; border-radius: 999px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 6px 14px rgba(229,86,11,.4); } .pt-flash.bump .q { animation: pt-bump .34s cubic-bezier(.34, 1.56, .64, 1); } @keyframes pt-bump { 0% { transform: scale(.7); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .pt-flash, .pt-flash.show { transition: opacity .01s; } .pt-flash.bump .q { animation: none; } } .pd .qb { position: absolute; z-index: 2; top: -10px; right: -6px; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 0 0 3px var(--bg), 0 6px 14px rgba(var(--accent-rgb), .4); pointer-events: none; } .st-wrap { display: grid; gap: 14px; margin-top: 8px; } .st-card { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 20px 18px; min-height: 108px; border-radius: 26px; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; transition: scale .16s cubic-bezier(.2, .8, .2, 1), box-shadow .2s; } .st-card:active { scale: .98; } .st-card:focus-visible, .st-src:focus-visible, .tt:focus-visible, .st-back:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .st-card .ic { width: 62px; height: 62px; border-radius: 20px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .32), inset 0 1px 0 rgba(255,255,255,.35); } .st-card.take .ic { background: linear-gradient(145deg, #5B8DEF, #2F54D6); box-shadow: 0 10px 22px rgba(47,84,214,.3), inset 0 1px 0 rgba(255,255,255,.35); } .st-card .ic .rv-icon { width: 28px; height: 28px; } .st-card .tx { display: grid; gap: 3px; min-width: 0; } .st-card .tx b { font-family: var(--display); font-weight: 800; font-size: calc(23px * var(--fs)); letter-spacing: -.04em; line-height: 1.1; } .st-card .tx small { font-size: calc(13.5px * var(--fs)); font-weight: 600; line-height: 1.35; color: var(--ink-2); } .st-card .pl { padding: 5px 12px; border-radius: 999px; font-size: calc(12px * var(--fs)); font-weight: 750; color: #11763F; background: rgba(37,168,98,.15); white-space: nowrap; } .st-card .ch, .st-src .ch { font-style: normal; font-size: 26px; line-height: 1; color: var(--ink-2); opacity: .6; } .st-tables { display: grid; gap: 14px; margin-top: 4px; } .st-back { all: unset; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 4px; font-size: calc(14px * var(--fs)); font-weight: 700; color: var(--link, var(--blue)); -webkit-tap-highlight-color: transparent; } .st-back .rv-icon { width: 18px; height: 18px; } .tt-sum { display: flex; align-items: baseline; gap: 8px; } .tt-sum b { font-family: var(--display); font-weight: 800; font-size: calc(28px * var(--fs)); letter-spacing: -.045em; color: #11763F; } .tt-sum span { font-size: calc(13.5px * var(--fs)); font-weight: 650; color: var(--ink-2); } html[data-theme$="night"] .tt-sum b { color: #6FE0A2; } .tt-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tt { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; align-content: center; justify-items: start; gap: 2px; min-height: 88px; padding: 12px 14px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; transition: scale .16s cubic-bezier(.2, .8, .2, 1); } .tt:active { scale: .96; } .tt b { font-family: var(--display); font-weight: 800; font-size: calc(21px * var(--fs)); letter-spacing: -.035em; } .tt small { font-size: calc(12px * var(--fs)); font-weight: 650; color: var(--ink-2); } .tt .dot { position: absolute; top: 12px; right: 12px; width: 9px; height: 9px; border-radius: 50%; background: #25A862; box-shadow: 0 0 0 3px rgba(37,168,98,.2); } .tt.free { box-shadow: var(--sh-md), inset 0 0 0 1.5px rgba(37,168,98,.45); } .tt.busy { opacity: .72; } .tt.busy .dot { background: #F0A02B; box-shadow: 0 0 0 3px rgba(240,160,43,.2); } .tt.s-bill .dot { background: var(--blue); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .2); } .tt.s-late .dot { background: var(--red, #B3261E); box-shadow: 0 0 0 3px rgba(179,38,30,.2); } .st-srcs { display: grid; gap: 10px; } .st-src { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px; border-radius: 20px; background: var(--raised); box-shadow: var(--sh-md); -webkit-tap-highlight-color: transparent; transition: scale .16s cubic-bezier(.2, .8, .2, 1); } .st-src:active { scale: .98; } .st-src .tx { display: grid; gap: 2px; min-width: 0; } .st-src .tx b { font-family: var(--display); font-weight: 800; font-size: calc(19px * var(--fs)); letter-spacing: -.03em; } .st-src .tx small { font-size: calc(13px * var(--fs)); font-weight: 600; color: var(--ink-2); } @media (min-width: 640px) { .tt-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } @media (min-width: 900px) { .st-wrap { grid-template-columns: 1fr 1fr; gap: 18px; } .st-card { min-height: 150px; grid-template-columns: auto 1fr auto; align-content: center; } .st-card .pl { grid-column: 1 / 3; justify-self: start; } .st-card .ch { display: none; } .st-srcs { grid-template-columns: 1fr 1fr; } } .st-card .pl.none { visibility: hidden; padding: 0; width: 0; } .pt-hint { position: fixed; z-index: 79; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); width: min(456px, calc(100% - 24px)); display: flex; align-items: center; gap: 11px; padding: 9px 9px 9px 14px; border-radius: 16px; background: var(--raised-hi, var(--raised)); box-shadow: 0 14px 34px rgba(var(--shadow-rgb), .28), 0 0 0 1px rgba(var(--accent-rgb), .25); opacity: 0; translate: -50% 14px; pointer-events: none; transition: opacity .22s ease, translate .32s cubic-bezier(.2, .8, .2, 1); } .pt-hint.show { opacity: 1; translate: -50% 0; pointer-events: auto; } .pt-hint .rv-diet { flex: none; } .pt-hint .tx { flex: 1; min-width: 0; display: grid; gap: 1px; } .pt-hint .tx small { font-size: 11.5px; font-weight: 700; color: var(--link, var(--blue)); } .pt-hint .tx b { font-family: var(--display); font-weight: 750; font-size: 15px; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-hint .ad { all: unset; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px; border-radius: 12px; font-size: 13.5px; font-weight: 750; color: #fff; background: linear-gradient(135deg, #E5560B, #FF7A29); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .3); } .pt-hint .ad .rv-icon { width: 15px; height: 15px; } .pt-hint .x { all: unset; cursor: pointer; flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 20px; color: var(--ink-2); } .pt-hint .ad:focus-visible, .pt-hint .x:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } @media (min-width: 900px) { .pt-hint { bottom: 28px; } } @media (prefers-reduced-motion: reduce) { .pt-hint { transition: opacity .01s; } }
.sb { --sbc: #fff; --sbl: rgba(var(--shadow-rgb), .26); } html[data-theme$="night"] .sb { --sbc: rgba(255,255,255,.05); --sbl: rgba(255,255,255,.14); } .sb.rv-screen.no-tabs { max-width: 1120px; } .sb-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-bottom: 130px; } .sb-body > * { min-width: 0; } .sb-hero { --st: #1F9D5B; display: grid; gap: 14px; padding: 16px 18px 18px; border-radius: 20px; color: var(--ink); background: var(--raised); box-shadow: var(--sh-md); } .sb-hero.st-expiring { --st: #D98A0B; } .sb-hero.st-expired { --st: #D92D20; } .sb-hero.st-free { --st: #8A93A3; } html[data-theme$="night"] .sb-hero { --st: #4FD39A; } html[data-theme$="night"] .sb-hero.st-expiring { --st: #FFB547; } html[data-theme$="night"] .sb-hero.st-expired { --st: #FF7A70; } html[data-theme$="night"] .sb-hero.st-free { --st: #9AA3B2; } .sb-hero .top { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .sb-hero .tx { min-width: 0; display: grid; gap: 3px; justify-items: start; } .sb-hero .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: calc(11.5px * var(--fs)); font-weight: 750; color: var(--st); background: color-mix(in srgb, var(--st) 14%, transparent); } .sb-hero .chip i { width: 6px; height: 6px; border-radius: 50%; background: var(--st); } .sb-hero h2 { margin: 3px 0 0; font-family: var(--display); font-weight: 800; font-size: calc(22px * min(var(--fs), 1.1)); letter-spacing: -.035em; line-height: 1.1; } .sb-hero p { margin: 0; font-size: calc(13px * var(--fs)); font-weight: 550; line-height: 1.4; color: var(--ink-2); } .sb-hero .meter { display: grid; gap: 8px; } .sb-hero .meter .row { display: flex; align-items: baseline; justify-content: space-between; gap: 4px 12px; flex-wrap: wrap; } .sb-hero .meter .row b { font-size: calc(14px * var(--fs)); font-weight: 800; color: var(--st); } .sb-hero .meter .row span { font-size: calc(12.5px * var(--fs)); font-weight: 550; color: var(--ink-2); } .sb-hero .bar { height: 5px; border-radius: 5px; background: var(--track); overflow: hidden; } .sb-hero .bar i { display: block; height: 100%; border-radius: inherit; background: var(--st); transform-origin: left; } @media (prefers-reduced-motion: no-preference) { .sb-hero .bar i { animation: mp-fill 1s .2s cubic-bezier(.22, 1, .36, 1) both; } } #sb-renew-wrap { display: none; } .sb-hero .rn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 13px; text-decoration: none; font-size: calc(14px * var(--fs)); font-weight: 750; color: #fff; background: linear-gradient(90deg, #1FA855, #25D366); box-shadow: 0 8px 18px rgba(37, 211, 102, .24); } .sb-hero .rn .rv-icon { width: 18px; height: 18px; } .sb-tools { display: grid; gap: 12px; } .sb-cyc { display: flex; gap: 4px; padding: 4px; border-radius: 16px; background: var(--pressed); box-shadow: var(--sh-in-sm, none); } .sb-cyc button { all: unset; cursor: pointer; flex: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 46px; padding: 4px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 700; color: var(--ink-2); -webkit-tap-highlight-color: transparent; } .sb-cyc button em { font-style: normal; white-space: nowrap; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px; color: #11763F; background: rgba(37,168,98,.16); } .sb-cyc button[aria-selected="true"] { color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 6px 14px rgba(var(--accent-rgb), .3); } .sb-cyc button[aria-selected="true"] em { color: #fff; background: rgba(255,255,255,.22); } .sb-cyc button:focus-visible, .sb-cp button:focus-visible, .sb-card .hd:focus-visible, .sb-card .go:focus-visible, .sb-bar .go:focus-visible, .sb-cmp summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .sb-cp-open { all: unset; cursor: pointer; justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; font-size: 14px; font-weight: 700; color: var(--link, var(--blue)); -webkit-tap-highlight-color: transparent; } .sb-cp .tk, .sb-cp-open .tk { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 900; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); } .sb-cp { display: grid; gap: 6px; } .sb-cp .row { display: flex; gap: 8px; } .sb-cp input { flex: 1; min-width: 0; height: 48px; padding: 0 16px; border: 0; outline: 0; border-radius: 15px; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .06em; color: var(--ink); background: var(--pressed); box-shadow: var(--sh-in-sm, none); } .sb-cp input:focus { box-shadow: var(--sh-in-sm, none), 0 0 0 2px var(--blue); } .sb-cp .ap { all: unset; cursor: pointer; flex: none; display: grid; place-items: center; padding: 0 22px; border-radius: 15px; font-size: 14.5px; font-weight: 750; color: #fff; background: linear-gradient(90deg, #E5560B, #FF7A29); box-shadow: 0 8px 18px rgba(var(--accent-rgb), .28); } .sb-cp .ap:disabled { opacity: .6; } .sb-cp .er { margin: 0 2px; font-size: 12.5px; font-weight: 650; color: var(--red, #B3261E); } .sb-cp .er:empty { display: none; } .sb-cp.on { grid-auto-flow: column; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: rgba(37,168,98,.12); box-shadow: inset 0 0 0 1.5px rgba(37,168,98,.45); } .sb-cp.on .tk { background: #25A862; } .sb-cp.on .tx { display: grid; gap: 1px; min-width: 0; } .sb-cp.on b { font-size: 14.5px; letter-spacing: .03em; } .sb-cp.on small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .sb-cp.on .lk { all: unset; cursor: pointer; font-size: 13px; font-weight: 750; color: var(--link, var(--blue)); padding: 6px 4px; } .sb-plans { display: grid; gap: 12px; } .sb-card { position: relative; border-radius: 22px; background: var(--sbc); border: 1.5px solid var(--sbl); transition: border-color .2s, box-shadow .25s, background-color .2s; } .sb-card.on { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 5%, var(--sbc)); box-shadow: 0 10px 28px rgba(var(--accent-rgb), .16); } .sb-card .hd { all: unset; box-sizing: border-box; width: 100%; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; -webkit-tap-highlight-color: transparent; } .sb-card .rd { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(var(--shadow-rgb), .55); display: grid; place-items: center; transition: box-shadow .2s, background-color .2s; } .sb-card.on .rd { background: var(--blue); box-shadow: none; } .sb-card.on .rd::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; } .sb-card .nm { display: grid; gap: 2px; min-width: 0; } .sb-card .nm b { font-family: var(--display); font-weight: 800; font-size: 18px; letter-spacing: -.03em; } .sb-card .nm small { font-size: 12.5px; font-weight: 600; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-card .pr { display: grid; justify-items: end; gap: 1px; text-align: right; } .sb-card .pr s { font-size: 12.5px; font-weight: 650; color: var(--ink-2); } .sb-card .pr b { font-family: var(--display); font-weight: 800; font-size: 21px; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; } .sb-card .pr span { font-size: 12px; font-weight: 650; color: var(--ink-2); margin-top: -1px; } .sb-card .pr small { font-size: 12px; font-weight: 700; color: #11763F; } html[data-theme$="night"] .sb-card .pr small { color: #6FE0A2; } .sb-card .flag { position: absolute; z-index: 1; top: -10px; right: 16px; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 5px 12px rgba(var(--accent-rgb), .3); } .sb-card .flag.g { background: #25A862; box-shadow: 0 5px 12px rgba(37,168,98,.3); } .sb-card .bd { display: none; padding: 0 16px 16px 52px; } .sb-card.on .bd { display: block; animation: sb-open .28s cubic-bezier(.22, 1, .36, 1); } @keyframes sb-open { from { opacity: 0; translate: 0 -6px; } } .sb-card ul { margin: 0; padding: 12px 0 0; list-style: none; display: grid; gap: 9px; border-top: 1px dashed rgba(var(--shadow-rgb), .3); } .sb-card li { position: relative; padding-left: 26px; font-size: 13.5px; font-weight: 550; line-height: 1.35; } .sb-card li::before { content: '\2713'; position: absolute; left: 0; top: -1px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 900; color: #fff; background: #25A862; } .sb-card .bd .go, .sb-card .who { display: none; } .sb-bar { position: fixed; z-index: 30; left: 50%; bottom: 0; translate: -50% 0; width: min(100%, 520px); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgb(var(--glass-rgb)); border-top: 1px solid rgba(var(--shadow-rgb), .2); box-shadow: 0 -12px 30px rgba(var(--shadow-rgb), .2); } .sb-bar[hidden] { display: none; } .sb-bar .sum { display: grid; gap: 1px; min-width: 0; } .sb-bar .sum small { font-size: 12px; font-weight: 700; color: var(--ink-2); } .sb-bar .sum b { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; } .sb-bar .sum b span { margin-left: 3px; font-family: inherit; font-size: 12.5px; font-weight: 650; letter-spacing: 0; color: var(--ink-2); } .sb-bar .sum em { font-style: normal; font-size: 12px; font-weight: 700; color: #11763F; } html[data-theme$="night"] .sb-bar .sum em { color: #6FE0A2; } .sb-bar .go, .sb-card .go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 20px; border-radius: 16px; text-decoration: none; font-size: 15px; font-weight: 750; color: #fff; background: linear-gradient(90deg, #E5560B, #FF7A29); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .3); -webkit-tap-highlight-color: transparent; } .sb-bar .go { flex: none; } .sb-bar .go.renew, .sb-card .go.renew { background: linear-gradient(90deg, #1FA855, #25D366); box-shadow: 0 10px 22px rgba(37,211,102,.28); } .sb-bar .go .rv-icon, .sb-card .go .rv-icon { width: 19px; height: 19px; } .sb-cmp { border-radius: 22px; background: var(--sbc); border: 1.5px solid var(--sbl); overflow: hidden; } .sb-cmp summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; font-family: var(--display); font-weight: 750; font-size: calc(16px * var(--fs)); letter-spacing: -.02em; } .sb-cmp summary::-webkit-details-marker { display: none; } .sb-cmp summary::after { content: '\203A'; font-size: 22px; color: var(--ink-2); transition: rotate .2s; } .sb-cmp[open] summary::after { rotate: 90deg; } .sb-cmp .wrap { overflow-x: auto; padding: 0 6px 12px; } .sb-cmp table { border-collapse: collapse; width: 100%; min-width: 400px; table-layout: fixed; font-size: 12.5px; } .sb-cmp table th:first-child { width: 38%; } .sb-cmp th, .sb-cmp td { padding: 11px 6px; text-align: center; border-top: 1px solid rgba(var(--shadow-rgb), .16); font-weight: 600; } .sb-cmp thead th { border-top: 0; font-family: var(--display); font-size: 13.5px; font-weight: 800; color: var(--ink-2); } .sb-cmp tbody th { text-align: left; font-weight: 650; color: var(--ink); } .sb-cmp .y { color: #11763F; font-weight: 900; font-size: 15px; } .sb-cmp .n { color: var(--ink-2); opacity: .55; } html[data-theme$="night"] .sb-cmp .y { color: #6FE0A2; } .sb-cmp .cur { background: rgba(37,168,98,.1); } .sb-cmp thead th.cur { color: #11763F; } .sb-foot { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); } @media (min-width: 900px) { .sb-body { gap: 26px; padding-bottom: 48px; } .sb-hero { padding: 20px 26px 22px; gap: 16px; } .sb-hero h2 { font-size: 26px; } .sb-hero .meter .row b { font-size: 15px; } #sb-renew-wrap { display: block; } #sb-renew-wrap:empty { display: none; } .sb-tools { grid-template-columns: auto minmax(280px, 400px); justify-content: space-between; align-items: start; } .sb-cyc { width: 440px; } .sb-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; padding-top: 6px; } .sb-card { display: flex; flex-direction: column; } .sb-card:hover { translate: 0 -3px; box-shadow: 0 14px 34px rgba(var(--shadow-rgb), .22); } .sb-card .hd { cursor: default; grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 26px 22px 10px; } .sb-card .rd { display: none; } .sb-card .pr { justify-items: start; text-align: left; gap: 2px; } .sb-card .pr b { font-size: 36px; } .sb-card .pr s { font-size: 14px; } .sb-card .pr span { font-size: 13px; } .sb-card .pr small { font-size: 12.5px; } .sb-card .flag { right: auto; left: 22px; top: -11px; } .sb-card.on { background: var(--sbc); box-shadow: none; border-color: var(--sbl); } .sb-card.best { border-color: var(--blue); box-shadow: 0 12px 30px rgba(var(--accent-rgb), .18); } .sb-card.cur { border-color: #25A862; } .sb-card .bd, .sb-card.on .bd { display: flex; flex-direction: column; flex: 1; padding: 0 22px 22px; animation: none; } .sb-card ul { flex: 1; margin-bottom: 18px; } .sb-card .bd .go { display: flex; margin-top: auto; } .sb-card .who { display: block; margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ink-2); } .sb-bar { display: none !important; } .sb-cmp table { min-width: 0; font-size: 14px; } .sb-cmp th, .sb-cmp td { padding: 13px 10px; } } .mo-plan { --tier: #B7791F; --st: #1F9D5B; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 14px 15px; border-radius: 18px; text-decoration: none; color: var(--ink); background: var(--raised); box-shadow: var(--sh-md); overflow: hidden; -webkit-tap-highlight-color: transparent; transition: box-shadow .2s ease; } .mo-plan:active { box-shadow: var(--sh-in-sm); } .mo-plan.pl-free { --tier: #6B7280; } .mo-plan.pl-starter { --tier: #B5683A; } .mo-plan.pl-chain { --tier: #4F63D6; } .mo-plan.st-expiring { --st: #D98A0B; } .mo-plan.st-expired { --st: #D92D20; } .mo-plan.st-free { --st: #8A93A3; } html[data-theme$="night"] .mo-plan { --st: #4FD39A; --tier: #E6B85C; } html[data-theme$="night"] .mo-plan.st-expiring { --st: #FFB547; } html[data-theme$="night"] .mo-plan.st-expired { --st: #FF7A70; } html[data-theme$="night"] .mo-plan.pl-free { --tier: #9AA3B2; } html[data-theme$="night"] .mo-plan.pl-starter { --tier: #F0A070; } html[data-theme$="night"] .mo-plan.pl-chain { --tier: #9DB0FF; } .mo-plan .tx { display: grid; gap: 2px; min-width: 0; } .mo-plan .tx b .ic { width: 15px; height: 15px; margin: -2px 6px 0 0; vertical-align: middle; fill: color-mix(in srgb, var(--tier) 18%, transparent); stroke: var(--tier); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .mo-plan .tx b { font-family: var(--display); font-weight: 800; font-size: calc(16.5px * var(--fs)); letter-spacing: -.03em; line-height: 1.15; color: var(--ink); } .mo-plan .tx b i { font-style: normal; font-weight: 600; font-size: calc(13px * var(--fs)); letter-spacing: 0; color: var(--ink-2); } .mo-plan .tx small { font-size: calc(12px * var(--fs)); font-weight: 550; color: var(--ink-2); line-height: 1.3; } .mo-plan .tx small em { font-style: normal; font-weight: 750; color: var(--st); } .mo-plan .go { display: inline-flex; align-items: center; gap: 2px; padding: 7px 8px 7px 13px; border-radius: 999px; font-size: calc(13px * var(--fs)); font-weight: 750; color: var(--link, var(--blue)); background: var(--pressed); box-shadow: var(--sh-in-sm); } .mo-plan .go svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .mo-plan.st-expiring .go, .mo-plan.st-expired .go { color: #fff; background: linear-gradient(145deg, #FF8A3D, #E5560B); box-shadow: 0 6px 14px rgba(229, 86, 11, .3); } .mo-plan .bar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 3px; border-radius: 3px; background: var(--track); overflow: hidden; } .mo-plan .bar i { display: block; height: 100%; border-radius: inherit; background: var(--st); transform-origin: left; } @media (prefers-reduced-motion: no-preference) { .mo-plan .bar i { animation: mp-fill 1s .2s cubic-bezier(.22, 1, .36, 1) both; } } @keyframes mp-fill { from { transform: scaleX(0); } }
html[data-ui="v2"] :is(.rv-tabbar, .rv-sheet, .rv-glass, .rv-order-right, .rv-sidebar, .mg:not(.au) .mg-tabs, .bl-bar, .os-bar, .pt-tools) { -webkit-backdrop-filter: none; backdrop-filter: none; } html[data-ui="v2"] .rv-tabbar { background: rgba(var(--glass-rgb), .97); } html[data-ui="v2"] .rv-sheet { background: rgb(var(--glass-rgb)); } html[data-ui="v2"] :is(.bl-bar, .os-bar) { background: color-mix(in srgb, var(--bg) 94%, transparent); } html[data-ui="v2"] .pt-tools { background: color-mix(in srgb, var(--bg) 95%, transparent); } html[data-ui="v2"] .mg:not(.au) .mg-tabs { background: rgba(var(--glass-rgb), .96); } html[data-ui="v2"] .rv-skeleton { background: var(--track); animation: mt-breathe 1.3s ease-in-out infinite; } @keyframes mt-breathe { 50% { opacity: .5; } } html[data-ui="v2"] :is(a, button, [role="button"], input, select, label, summary) { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } :where(html[data-ui="v2"]) :where(a, button, [role="button"], .rv-chip, .pd, .mn-dish, .ol-t, .ft, .fc, .rv-row, .rv-tile) { transition: scale .16s cubic-bezier(.2, .8, .2, 1), translate .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease, opacity .2s ease; } :where(html[data-ui="v2"]) :where(button, a.rv-btn, .rv-chip, .pd-add, .mn-chip, .pt-chip, .rv-icon-btn, .rv-tabbar a, .mo-quick a, .mn-st, .rv-fab):active { scale: .955; } :where(html[data-ui="v2"]) :where(.pd, .mn-dish, .ol-t, .ft, .rv-row, .mo-list > *):active { scale: .985; } @media (hover: hover) { :where(html[data-ui="v2"]) :where(.ol-t, .mn-dish, .pd, .ft, .mo-quick a):hover { translate: 0 -2px; } } html[data-ui="v2"] .rv-sheet { transition: transform .36s cubic-bezier(.22, 1, .36, 1); } html[data-ui="v2"] .rv-scrim { transition: opacity .28s ease; } html[data-ui="v2"] .rv-toast { transition: opacity .24s ease, transform .3s cubic-bezier(.22, 1, .36, 1); } html[data-ui="v2"] .rv-tabbar { transition: translate .32s cubic-bezier(.22, 1, .36, 1); } html[data-ui="v2"] .rv-fab { transition: translate .32s cubic-bezier(.22, 1, .36, 1), scale .16s cubic-bezier(.2, .8, .2, 1); } html.mt-nav-hide[data-ui="v2"] .rv-tabbar { translate: 0 105%; } html.mt-nav-hide[data-ui="v2"] .rv-fab { translate: 0 calc(var(--tabbar-h) - 4px); } @keyframes mt-rise { from { opacity: 0; translate: 0 16px; } } html.mt-first[data-ui="v2"] :is(.rv-head, .mn-stats > *, .pt-top, .pt-tools, .mo-prof, .mo-search, .mo-chips, .mo-grp, .ol-t, .ft, .fc, .pd, .mn-dish, .mn-gh, .rv-card, .rv-row, .rv-item, .rv-tile, .dv-p) { animation: mt-rise .46s cubic-bezier(.22, 1, .36, 1) backwards; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-row, .rv-item, .rv-tile, .mn-stats > *, .mo-grp):nth-child(2) { animation-delay: 45ms; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-row, .rv-item, .rv-tile, .mn-stats > *, .mo-grp):nth-child(3) { animation-delay: 90ms; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-row, .rv-item, .rv-tile, .mn-stats > *, .mo-grp):nth-child(4) { animation-delay: 135ms; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-row, .rv-item, .rv-tile, .mn-stats > *, .mo-grp):nth-child(5) { animation-delay: 180ms; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-row, .rv-item, .rv-tile, .mn-stats > *, .mo-grp):nth-child(6) { animation-delay: 225ms; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-row, .rv-item, .rv-tile, .mn-stats > *, .mo-grp):nth-child(n+7) { animation-delay: 270ms; } @supports (animation-timeline: view()) { @keyframes mt-scroll-in { from { opacity: 0; translate: 0 26px; scale: .975; } } html[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-card, .rv-row, .rv-item, .mo-grp, .mn-grp, .pt-sec, .mo-prof, .au-list, .mg-table) { animation: mt-scroll-in linear backwards; animation-timeline: view(); animation-range: entry 0% entry 45%; } html.mt-first[data-ui="v2"] :is(.ol-t, .ft, .fc, .pd, .mn-dish, .rv-card, .rv-row, .rv-item, .mo-grp, .mn-grp, .pt-sec, .mo-prof, .au-list, .mg-table) { animation-timeline: auto; } } } @view-transition { navigation: auto; } html[data-ui="v2"] .rv-tabbar { view-transition-name: rv-tabbar; } html[data-ui="v2"] .rv-sidebar { view-transition-name: rv-sidebar; } ::view-transition-old(root) { animation: mt-vt-out .14s ease both; } ::view-transition-new(root) { animation: mt-vt-in .24s ease both; } @keyframes mt-vt-out { to { opacity: 0; } } @keyframes mt-vt-in { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0s !important; } } .lx-brand .m2 .bar i, .lb-ticket .bar i { width: 88%; transform-origin: left center; animation-name: mt-bar !important; } @keyframes mt-bar { from { transform: scaleX(.43); } to { transform: scaleX(1); } } .lx-hero .b1, .lx-hero .b2, .lx-brand .b1, .lx-brand .b2, .lx-brand .b3 { will-change: transform; }
html[data-ui="v2"]:not([data-theme$="night"]) { --shadow-rgb: 165,145,122; --hi: rgba(255,255,255,.95); --hi-2: rgba(255,255,255,.88); --c0: #FFFFFF; --c1: #FEFCF9; --c2: #ECE6DD; --c3: #F8F4EE; --c4: #FFFEFC; --c5: #E9E3DA; --raised: linear-gradient(145deg, var(--c1), var(--c2)); --raised-hi: linear-gradient(145deg, var(--c0), var(--c3)); --raised-btn: linear-gradient(145deg, var(--c4), var(--c5)); --pressed: #E8E2D9; --track: #E0D9CE; --skel: #EFEAE2; --ring: inset 0 0 0 1px rgba(255,255,255,.7); --ring-soft: rgba(255,255,255,.6); --sh-lg: 8px 8px 18px rgba(var(--shadow-rgb), .42), -8px -8px 18px var(--hi); --sh: 7px 7px 15px rgba(var(--shadow-rgb), .45), -7px -7px 15px var(--hi); --sh-md: 5px 5px 11px rgba(var(--shadow-rgb), .45), -5px -5px 11px var(--hi); --sh-sm: 4px 4px 9px rgba(var(--shadow-rgb), .42), -4px -4px 9px var(--hi); --sh-in: inset 5px 5px 10px rgba(var(--shadow-rgb), .42), inset -5px -5px 10px var(--hi-2); --sh-in-md: inset 4px 4px 8px rgba(var(--shadow-rgb), .42), inset -4px -4px 8px var(--hi-2); --sh-in-sm: inset 3px 3px 6px rgba(var(--shadow-rgb), .42), inset -3px -3px 6px var(--hi-2); --sh-seg: 3px 3px 8px rgba(var(--shadow-rgb), .4), -2px -2px 6px var(--hi-2); } html[data-ui="v2"][data-theme="classic"] { --bg: #F2EDE6; --page-desk: #E9E3DA; --glass-rgb: 242,237,230; } html[data-ui="v2"]:not([data-theme$="night"]) :is(.rv-card, .rv-menu, .au-list, .mg-table, .dv-p, .fl-sum, .fc, .ft, .ol-t, .rv-item, .dv-actions .a, .rv-icon-btn, .rv-btn.soft, .rv-tile, .rv-kpi, .au-kpi, .rv-row, .lg-g) { background: var(--raised); box-shadow: var(--sh-md); } html[data-ui="v2"]:not([data-theme$="night"]) :is(.dv-p, .rv-card, .fl-sum) { box-shadow: var(--sh-lg); } html[data-ui="v2"]:not([data-theme$="night"]) :is(.fc, .ft, .ol-t, .rv-item, .dv-actions .a, .rv-icon-btn, .rv-btn.soft) { box-shadow: var(--sh-md); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-btn.soft { color: var(--ink); } html[data-ui="v2"]:not([data-theme$="night"]) :is(.rv-input, .lg-field) { background: var(--pressed); box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) :is(.rv-input:focus, .lg-field:focus-within) { box-shadow: var(--sh-in-sm), 0 0 0 2px var(--blue); } html[data-ui="v2"]:not([data-theme$="night"]) :is(.rv-seg, .dv-toggle) { background: var(--pressed); box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) :is(.rv-seg button[aria-selected="true"], .dv-toggle button[aria-pressed="true"]) { background: var(--raised-hi); box-shadow: var(--sh-seg); } html[data-ui="v2"]:not([data-theme$="night"]) .fc[aria-pressed="true"] { background: var(--pressed); box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-chip { background: var(--raised); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-chip[aria-pressed="true"] { background: var(--pressed); color: var(--link, var(--blue)); box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .fl-tabs button { background: var(--raised); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .fl-tabs button[aria-selected="true"] { background: var(--pressed); color: var(--link, var(--blue)); box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .mg-tabs button { background: var(--raised); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .mg-tabs button[aria-selected="true"] { background: var(--blue); color: #fff; box-shadow: 0 8px 18px rgba(var(--accent-rgb), .3); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-pad button { background: var(--raised); box-shadow: var(--sh-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-pin-dots i { box-shadow: var(--sh-in-sm); background: var(--pressed); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-pin-dots i.on { background: var(--blue); box-shadow: none; } html[data-ui="v2"]:not([data-theme$="night"]) .lg-check i { background: var(--pressed); box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .lg-check input:checked + i { background: var(--blue); box-shadow: none; } html[data-ui="v2"]:not([data-theme$="night"]) .ft.ordered { background: linear-gradient(145deg, #FFF6E6, #FBE8CC); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.bill { background: linear-gradient(145deg, #FFEFE3, #FBDCC6); } html[data-ui="v2"]:not([data-theme$="night"]) .ft.late { background: linear-gradient(145deg, #FFE9E7, #F9D0CC); box-shadow: var(--sh-md); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-attn:not(.ok) { background: linear-gradient(145deg, #FFF8EA, #FBEBCF) !important; box-shadow: var(--sh-md); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-attn.ok { box-shadow: var(--sh-in-sm); background: var(--pressed) !important; } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket { box-shadow: var(--sh-lg); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .perf::before, html[data-ui="v2"]:not([data-theme$="night"]) .dv-ticket .perf::after { box-shadow: var(--sh-in-sm); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-actions .a.main { background: linear-gradient(90deg, #E5560B, #FF7A29); box-shadow: 0 10px 22px rgba(var(--accent-rgb), .32), inset 0 1px 0 rgba(255,255,255,.3); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-btn:not(.soft) { box-shadow: 0 10px 22px rgba(var(--accent-rgb), .3), inset 0 1px 0 rgba(255,255,255,.28); } html[data-ui="v2"]:not([data-theme$="night"]) .dv-week .c i { box-shadow: inset 1px 1px 2px rgba(255,255,255,.5); } html[data-ui="v2"]:not([data-theme$="night"]) .rv-tabbar { box-shadow: 0 -1px 0 rgba(255,255,255,.7), 0 -6px 18px rgba(var(--shadow-rgb), .18); } html[data-ui="v2"]:not([data-theme$="night"]) #bill-root .rv-hero { box-shadow: var(--sh-lg); }
:root { --st-new-t: #2F54D6; --st-new-f: #2F54D6; --st-cook-t: #8A5A00; --st-cook-f: #E0A100; --st-ready-t: #14774F; --st-ready-f: #1A8F52; --st-late-t: #B3261E; --st-late-f: #D8412F; --paper: #ECE8DD; --paper-ink: #1A1B1E; --paper-mut: #6B6A63; --paper-line: #9A978C; --pp-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace; } .pp-rail { position: relative; padding-top: 16px; } .pp-rail::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 7px; border-radius: 4px; z-index: 1; background: linear-gradient(180deg, #4A525C, #2B3036 55%, #3A4048); box-shadow: 0 2px 0 rgba(0, 0, 0, .35); } .pp-tks { display: grid; gap: 22px; padding: 2px 2px 14px; } .pp-tks.h { grid-auto-flow: column; grid-auto-columns: minmax(176px, 72%); gap: 12px; overflow-x: auto; overflow-y: hidden; padding-bottom: 18px; scroll-snap-type: x proximity; scrollbar-width: thin; } .pp-tks.h > * { scroll-snap-align: start; } @media (min-width: 700px) { .pp-tks.h { grid-auto-columns: minmax(190px, 250px); } } .pp-tk { position: relative; background: var(--paper); color: var(--paper-ink); border-radius: 4px 4px 0 0; font-family: var(--pp-mono); } .pp-tk::before { content: ''; position: absolute; left: 50%; top: -14px; width: 10px; height: 18px; margin-left: -5px; border-radius: 3px; z-index: 2; background: linear-gradient(90deg, #8A939E, #C9D0D8 50%, #8A939E); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .pp-torn::after, .pp-tk::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0H12L6 8Z' fill='%23ECE8DD'/%3E%3C/svg%3E") repeat-x left top / 12px 8px; } .pp-tk.swing { animation: ppswing .9s ease-out both; transform-origin: top center; } @keyframes ppswing { from { transform: rotate(-3deg) translateY(-6px); opacity: 0; } 60% { transform: rotate(1.2deg); } to { transform: none; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pp-tk.swing { animation: none; } } .pp-bar2 { height: 3px; border-radius: 2px; margin-top: 10px; background: rgba(26, 27, 30, .1); overflow: hidden; } .pp-bar2 i { display: block; height: 100%; border-radius: 2px; background: #1F9D5B; transition: width .6s linear, background .3s; } .pp-tk[data-a="mid"] .pp-bar2 i { background: #E0A100; } .pp-tk[data-a="late"] .pp-bar2 i { background: var(--st-late-f); } .pp-chip { display: inline-block; font: 600 10px var(--font, system-ui), sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; color: var(--st-t, var(--paper-mut)); background: color-mix(in srgb, var(--st-f, transparent) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-f, var(--paper-line)) 50%, transparent); } html[data-ui="v2"] .rv-kitchen-board { gap: 18px; } html[data-ui="v2"] .rv-kitchen-board .rv-ticket { position: relative; overflow: visible; gap: 8px; padding: 18px 15px 14px; border-radius: 4px 4px 0 0; background: var(--paper); color: var(--paper-ink); box-shadow: inset 0 4px 0 var(--st-f), 0 14px 22px -14px rgba(0, 0, 0, .55); } .rv-kitchen-board .rv-ticket.kt-new { --st-t: var(--st-new-t); --st-f: var(--st-new-f); } .rv-kitchen-board .rv-ticket.kt-preparing { --st-t: var(--st-cook-t); --st-f: var(--st-cook-f); } .rv-kitchen-board .rv-ticket.kt-ready { --st-t: var(--st-ready-t); --st-f: var(--st-ready-f); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket::before { content: ''; position: absolute; left: 50%; top: -14px; bottom: auto; width: 10px; height: 18px; margin-left: -5px; border-radius: 3px; z-index: 2; background: linear-gradient(90deg, #8A939E, #C9D0D8 50%, #8A939E); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); } .rv-kitchen-board .rv-ticket { --ink: var(--paper-ink); --ink-2: var(--paper-mut); --ink-3: var(--paper-mut); --link: #B8420A; --shadow-rgb: 26, 27, 30; --title: var(--paper-ink); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .top { align-items: baseline; padding-bottom: 10px; border-bottom: 1.5px dashed var(--paper-line); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .tbl { font-family: var(--display); font-size: calc(26px * var(--fs)); font-weight: 650; letter-spacing: -.04em; } .rv-kitchen-board .rv-ticket .meta { font-family: var(--pp-mono); font-size: calc(11.5px * var(--fs)); font-weight: 500; color: var(--paper-mut); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .kotno { margin-top: 5px; padding: 0; border-radius: 0; font-family: var(--pp-mono); font-size: calc(11.5px * var(--fs)); font-weight: 500; letter-spacing: .04em; color: var(--paper-mut); background: none; } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .rv-timer { height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-family: var(--pp-mono); font-size: calc(15px * var(--fs)); font-weight: 600; letter-spacing: 0; } .rv-kitchen-board .rv-ticket[data-a="ok"] .rv-timer { color: var(--st-ready-t) !important; } .rv-kitchen-board .rv-ticket[data-a="mid"] .rv-timer { color: var(--st-cook-t) !important; } .rv-kitchen-board .rv-ticket[data-a="late"] .rv-timer { color: var(--st-late-t) !important; font-weight: 700; } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .li { font-family: var(--pp-mono); font-size: calc(16px * var(--fs)); font-weight: 800; padding: 1px 0; } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .li .q { width: auto; min-width: 2.4ch; font-family: var(--pp-mono); color: #1A1B1E; } .rv-kitchen-board .rv-ticket .rv-tag { font: 700 9.5px var(--font, system-ui), sans-serif; letter-spacing: .06em; color: #B3261E; background: none; box-shadow: inset 0 0 0 1px currentColor; padding: 2px 6px; border-radius: 4px; vertical-align: middle; } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .note { background: rgba(224, 161, 0, .2); color: #5A3A00; border-radius: 4px; box-shadow: none; font-family: var(--pp-mono); font-size: calc(13.5px * var(--fs)); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket.is-extra-ticket { outline: 0; } .rv-kitchen-board .rv-ticket .pp-ft { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .rv-kitchen-board .rv-ticket .rv-eyebrow { color: var(--paper-mut); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .rv-btn.block, html[data-ui="v2"] .rv-kitchen-board .rv-ticket.kt-preparing .rv-btn.block:not(.soft) { margin-top: 6px; min-height: 46px; border-radius: 8px; box-shadow: none; font: 600 14px var(--font, system-ui), sans-serif; letter-spacing: .01em; } html[data-ui="v2"] .rv-kitchen-board .rv-ticket.kt-new .rv-btn.block:not(.soft) { color: #6B4600; background: color-mix(in srgb, var(--st-cook-f) 22%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-cook-f) 60%, transparent); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket.kt-preparing .rv-btn.block:not(.soft) { color: #0F5A35; background: color-mix(in srgb, var(--st-ready-f) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-ready-f) 55%, transparent); } html[data-ui="v2"] .rv-kitchen-board .rv-ticket .rv-btn.soft { background: none; color: var(--paper-ink); box-shadow: inset 0 0 0 1px var(--paper-line); min-height: 42px; font-weight: 600; } .rv-kitchen-board .rv-ticket .rv-btn:active { transform: translateY(1px); } @media (min-width: 900px) { .rv-kitchen-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; } } .rv-kitchen-board .pp-colh { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 12px; font: 600 12px var(--font, system-ui), sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); } .rv-kitchen-board .pp-colh::before { content: ''; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--st-f); } .rv-kitchen-board .pp-colh { justify-content: flex-start; } .rv-kitchen-board .pp-colh b { margin-left: auto; } .rv-kitchen-board .pp-colh.new { --st-f: var(--st-new-f); } .rv-kitchen-board .pp-colh.cook { --st-f: var(--st-cook-f); } .rv-kitchen-board .pp-colh.ready { --st-f: var(--st-ready-f); } .rv-kitchen-board .pp-colh b { min-width: 24px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); } .pp-rc { position: relative; padding: 24px 22px 28px; font-family: var(--pp-mono); font-size: 12.5px; line-height: 1.4; background: var(--paper); color: var(--paper-ink); border-radius: 6px 6px 0 0; box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .6); margin-bottom: 26px; } .pp-rc .st { text-align: center; } .pp-rc .st b { display: block; font: 650 14px var(--display, var(--font)); letter-spacing: .14em; } .pp-rc .st span { display: block; margin-top: 3px; color: var(--paper-mut); font-size: 11.5px; } .pp-rc hr { border: 0; border-top: 1.5px dashed var(--paper-line); margin: 13px 0; } .pp-rc .ln { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; } .pp-rc .ln span:last-child { font-variant-numeric: tabular-nums; } .pp-rc .tot { text-align: center; padding: 6px 0 2px; } .pp-rc .tot small { display: block; letter-spacing: .2em; font-size: 11px; color: var(--paper-mut); } .pp-rc .tot b { display: block; margin-top: 4px; font: 650 48px/1.05 var(--font, system-ui), sans-serif; letter-spacing: -.045em; } .pp-rc .bc { height: 32px; margin: 16px 0 8px; opacity: .85; background: repeating-linear-gradient(90deg, #1A1B1E 0 2px, transparent 2px 4px, #1A1B1E 4px 5px, transparent 5px 8px, #1A1B1E 8px 11px, transparent 11px 13px); } .pp-rc .ty { margin: 0; text-align: center; font-size: 11.5px; color: #4A4A45; } .pp-rc .chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .pp-rc .chips .pp-chip { font-size: 10px; } @media (min-width: 1000px) { .pp-bills { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 26px; align-items: start; } .pp-bills > .pp-left { position: sticky; top: 16px; max-height: calc(100dvh - 32px); overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } } .pp-left { margin: 0 -8px; padding: 0 8px 18px; } .pp-bills .pp-side { display: grid; gap: 18px; min-width: 0; } .pp-wait { display: block; padding: 14px 13px 12px; text-decoration: none; color: var(--paper-ink); } .pp-wait .hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1.5px dashed var(--paper-line); } .pp-wait .hd b { font: 650 20px var(--display, var(--font)); letter-spacing: -.04em; } .pp-wait .hd span { font-size: 11px; color: var(--paper-mut); } .pp-wait .nt { font-size: 12px; color: var(--paper-mut); } .pp-wait .am { margin-top: 2px; font: 650 16px var(--font, system-ui), sans-serif; letter-spacing: -.03em; } .pp-wait .pp-ftr { display: flex; justify-content: flex-end; margin-top: 10px; } .pp-wait:active { transform: translateY(2px); } .pp-wait:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .pp-h { margin: 0 0 6px 2px; font: 800 12px var(--font, system-ui), sans-serif; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-2); } .pp-tape { position: relative; margin-bottom: 14px; background: var(--paper); color: var(--paper-ink); border-radius: 6px 6px 0 0; box-shadow: 0 20px 34px -22px rgba(0, 0, 0, .6); font-family: var(--pp-mono); --ink: var(--paper-ink); --ink-2: var(--paper-mut); } .pp-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 16px; text-decoration: none; color: var(--paper-ink); } .pp-row + .pp-row { border-top: 1.5px dashed var(--paper-line); } .pp-row .tb { font: 650 18px var(--display, var(--font)); letter-spacing: -.04em; } .pp-row .tx b { display: block; font-size: 13.5px; font-weight: 600; } .pp-row .tx small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--paper-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pp-row .am { text-align: right; } .pp-row .am b { display: block; font: 650 16px var(--font, system-ui), sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .pp-row .am i { display: inline-block; margin-top: 3px; font: 600 9.5px var(--font, system-ui), sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; } .pp-row .am i.paid { color: var(--st-ready-t); background: color-mix(in srgb, var(--st-ready-f) 15%, transparent); } .pp-row .am i.open { color: var(--st-cook-t); background: color-mix(in srgb, var(--st-cook-f) 22%, transparent); } .pp-row:hover { background: rgba(26, 27, 30, .04); } .pp-row:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; } .pp-tape .pp-empty { padding: 26px 16px; text-align: center; color: var(--paper-mut); } html[data-ui="v2"] .bl-ticket { --ink: var(--paper-ink); --ink-2: var(--paper-mut); --link: #B8420A; --shadow-rgb: 26, 27, 30; background: var(--paper); color: var(--paper-ink); border-radius: 6px 6px 0 0; padding: 24px 20px 30px; font-family: var(--pp-mono); box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .6); margin-bottom: 22px; } html[data-ui="v2"] .bl-ticket::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 8px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M0 0H12L6 8Z' fill='%23ECE8DD'/%3E%3C/svg%3E") repeat-x left top / 12px 8px; } .bl-ticket .rc-st { text-align: center; margin-bottom: 6px; } .bl-ticket .rc-st b { display: block; font: 650 14px var(--display, var(--font)); letter-spacing: .14em; } .bl-ticket .rc-st span { display: block; margin-top: 3px; font-size: 11.5px; color: var(--paper-mut); } html[data-ui="v2"] .bl-ticket h3 { font: 700 11px var(--pp-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--paper-mut); } html[data-ui="v2"] .bl-ticket .hd { padding-top: 10px; border-top: 1.5px dashed var(--paper-line); margin-top: 10px; } html[data-ui="v2"] .bl-ticket .its li + li { border-top: 1px dotted rgba(26, 27, 30, .22); } html[data-ui="v2"] .bl-ticket .q { font-family: var(--pp-mono); color: var(--paper-ink); letter-spacing: 0; } html[data-ui="v2"] .bl-ticket .n b { font-family: var(--pp-mono); font-size: calc(13.5px * var(--fs)); font-weight: 800; } html[data-ui="v2"] .bl-ticket .its em { font-family: var(--pp-mono); font-weight: 500; letter-spacing: 0; } html[data-ui="v2"] .bl-ticket .its li.g { font-family: var(--pp-mono); letter-spacing: .1em; } html[data-ui="v2"] .bl-ticket .perf { border-top: 1.5px dashed var(--paper-line); margin: 12px 0; } html[data-ui="v2"] .bl-ticket .perf::before, html[data-ui="v2"] .bl-ticket .perf::after { display: none; } html[data-ui="v2"] .bl-ticket .sm { font-size: calc(13px * var(--fs)); } html[data-ui="v2"] .bl-ticket .tot { border-top: 1.5px dashed var(--paper-line); flex-direction: column; align-items: center; text-align: center; gap: 2px; } html[data-ui="v2"] .bl-ticket .tot span { font: 700 11px var(--pp-mono); letter-spacing: .22em; text-transform: uppercase; color: var(--paper-mut); } html[data-ui="v2"] .bl-ticket .tot b { font-family: var(--font, system-ui), sans-serif; font-size: calc(46px * var(--fs)); font-weight: 650; letter-spacing: -.045em; } .bl-ticket .rc-bc { height: 30px; margin: 16px 0 8px; opacity: .85; background: repeating-linear-gradient(90deg, #1A1B1E 0 2px, transparent 2px 4px, #1A1B1E 4px 5px, transparent 5px 8px, #1A1B1E 8px 11px, transparent 11px 13px); } .bl-ticket .rc-ty { margin: 0; text-align: center; font-size: 11.5px; color: #4A4A45; } .bl-ticket .rc-stamp { position: absolute; right: 12px; bottom: 82px; padding: 1px 10px; border: 2px solid var(--st-ready-f); border-radius: 6px; font: 650 22px var(--font, system-ui), sans-serif; letter-spacing: .14em; color: var(--st-ready-f); transform: rotate(-10deg); opacity: .5; pointer-events: none; mix-blend-mode: multiply; z-index: 1; } html[data-ui="v2"] .bl-ticket .more { color: #B8420A; font-family: var(--pp-mono); } html[data-ui="v2"] .bl-ticket .bk-empty { color: var(--paper-mut); } .rv-loaderr { display: grid; gap: 10px; padding: 22px 18px; text-align: center; } .rv-loaderr b { font: 800 17px var(--display, var(--font, system-ui)); letter-spacing: -.02em; } .rv-loaderr p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); } .rv-loaderr small { font: 600 11.5px var(--pp-mono); color: var(--ink-3, var(--ink-2)); word-break: break-word; } .rv-loaderr .rv-btn { background: #1A1B1E; color: #ECE8DD; box-shadow: none; font-weight: 600; min-height: 46px; border-radius: 10px; } html[data-ui="v2"] .bl-ticket { padding: 20px 18px 18px; } html[data-ui="v2"] .bl-ticket .rc-st b { font: 600 12px var(--display, var(--font)); letter-spacing: .16em; } html[data-ui="v2"] .bl-ticket .rc-st span { font-size: 10.5px; } html[data-ui="v2"] .bl-ticket h3 { font: 600 10px var(--pp-mono); letter-spacing: .14em; } html[data-ui="v2"] .bl-ticket .hd span { font-size: 10.5px; font-weight: 500; } html[data-ui="v2"] .bl-ticket .its li.g, html[data-ui="v2"] .bl-ticket .its li.g.k { color: var(--paper-mut); font-size: 10px; font-weight: 600; } html[data-ui="v2"] .bl-ticket .its li { padding: 8px 0; } html[data-ui="v2"] .bl-ticket .q { font-size: calc(14px * var(--fs)); font-weight: 800; } html[data-ui="v2"] .bl-ticket .n b { font-size: calc(15px * var(--fs)); font-weight: 800; } html[data-ui="v2"] .bl-ticket .n small { font-size: 10.5px; } html[data-ui="v2"] .bl-ticket .its em { font-size: calc(15px * var(--fs)); font-weight: 800; } html[data-ui="v2"] .bl-ticket .sm { font-size: calc(11.5px * var(--fs)); } html[data-ui="v2"] .bl-ticket .sm span { font-weight: 400; } html[data-ui="v2"] .bl-ticket .sm b { font-weight: 500; } html[data-ui="v2"] .bl-ticket .tot span { font-size: 10px; letter-spacing: .2em; } html[data-ui="v2"] .bl-ticket .tot b { font-size: calc(40px * var(--fs)); font-weight: 750; } html[data-ui="v2"] .bl-ticket .rc-bc { height: 20px; opacity: .4; margin: 12px 0 6px; } html[data-ui="v2"] .bl-ticket .rc-ty { font-size: 10.5px; color: var(--paper-mut); } html[data-ui="v2"] .bl-ticket .more { font-size: 11px; font-weight: 500; } html[data-ui="v2"] .bl-tiles { gap: 8px; } html[data-ui="v2"] .bl-tile { padding: 8px 10px; gap: 8px; border-radius: 12px; box-shadow: var(--sh-sm); } html[data-ui="v2"] .bl-tile .gl { width: 24px; height: 24px; border-radius: 8px; font-size: 12px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); } html[data-ui="v2"] .bl-tile .gl svg { width: 13px; height: 13px; } html[data-ui="v2"] .bl-tile small { font-size: 9.5px; font-weight: 600; } html[data-ui="v2"] .bl-tile b { font-size: calc(12px * var(--fs)); font-weight: 600; } html[data-ui="v2"] .bl-tile.on { box-shadow: inset 0 0 0 1.5px var(--ink-2); background: var(--raised); } html[data-ui="v2"] .bl-pay { padding: 14px; gap: 10px; border-radius: 16px; } html[data-ui="v2"] .bl-pay .hd span { font-size: 10px; font-weight: 600; } html[data-ui="v2"] .bl-pay .hd b { font-size: calc(24px * var(--fs)); font-weight: 750; letter-spacing: -.04em; } html[data-ui="v2"] .bl-seg { padding: 3px; border-radius: 12px; } html[data-ui="v2"] .bl-seg button { min-height: 36px; font-size: calc(12.5px * var(--fs)); font-weight: 600; border-radius: 9px; } html[data-ui="v2"] .bl-pay .fld > span { font-size: calc(10.5px * var(--fs)); font-weight: 500; } html[data-ui="v2"] .bl-pay .rv-input.big { min-height: 50px; font-size: calc(22px * var(--fs)); font-weight: 700; } html[data-ui="v2"] .bl-pay .rs i { font-size: calc(18px * var(--fs)); font-weight: 600; } html[data-ui="v2"] .bl-chips button { min-height: 30px; padding: 0 12px; font-size: calc(12px * var(--fs)); font-weight: 600; } html[data-ui="v2"] .bl-chips button:first-child { color: var(--ink); } html[data-ui="v2"] .bl-pay .hint, html[data-ui="v2"] .bl-pay .chg { font-size: calc(12px * var(--fs)); font-weight: 500; } html[data-ui="v2"] .bl-two b { font-size: calc(15px * var(--fs)); font-weight: 700; } html[data-ui="v2"] .bl-two span { font-size: 10px; font-weight: 600; } html[data-ui="v2"] .bl-go { min-height: 50px; border-radius: 12px; font-size: calc(15px * var(--fs)); font-weight: 600; letter-spacing: .01em; color: #F4F0E8; background: #1A1B1E; box-shadow: none; } html[data-ui="v2"] .bl-go:disabled { opacity: .4; } html[data-ui="v2"] .bl-bar { padding: 8px; border-radius: 18px; } html[data-ui="v2"] .bl-void { font-size: calc(12px * var(--fs)); font-weight: 500; } html[data-ui="v2"] .bl-info > button { min-height: 42px; font-size: calc(12.5px * var(--fs)); font-weight: 600; } html[data-ui="v2"] .bl-info .r { font-size: calc(12px * var(--fs)); } html[data-ui="v2"] .bl-acts { padding: 14px; gap: 10px; border-radius: 16px; } html[data-ui="v2"] .bl-acts .hd { font-size: calc(13px * var(--fs)); font-weight: 600; } html[data-ui="v2"] .bl-act { padding: 9px 10px; font-size: calc(12px * var(--fs)); font-weight: 600; border-radius: 12px; } html[data-ui="v2"] .bl-act .ic { width: 26px; height: 26px; color: var(--ink-2); background: rgba(var(--shadow-rgb), .1); } html[data-ui="v2"] .bl-act .ic svg { width: 14px; height: 14px; } html[data-ui="v2"] .bl-acts .int { font-size: calc(11.5px * var(--fs)); } .pp-rc .st b { font-size: 12px; font-weight: 600; } .pp-rc .st span, .pp-rc .ty { font-size: 10.5px; } .pp-rc .ln { font-size: 11.5px; } .pp-rc .ln span:first-child { color: var(--paper-mut); } .pp-rc .tot small { font-size: 10px; } .pp-rc .tot b { font-size: 40px; font-weight: 750; } .pp-rc .bc { height: 20px; opacity: .4; margin: 12px 0 6px; } .pp-h { font-size: 10.5px; font-weight: 600; } .pp-wait .hd span, .pp-wait .nt { font-size: 10.5px; } .pp-wait .am { font-size: 16px; font-weight: 750; } .pp-row .tx b { font-size: 13px; font-weight: 700; } .pp-row .tx small { font-size: 10.5px; } .pp-row .am b { font-size: 16px; font-weight: 750; } .ox-quick { display: inline-flex; gap: 2px; } .pp-tools { display: grid; gap: 10px; margin-bottom: 14px; } @media (min-width: 700px) { .pp-tools { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; } } .pp-q { min-height: 40px; width: 100%; font-size: calc(13px * var(--fs)); border-radius: 12px; } .pp-day { padding: 8px 16px; background: rgba(26, 27, 30, .06); font: 600 10px var(--pp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--paper-mut); border-top: 1.5px dashed var(--paper-line); } .pp-tape > .pp-day:first-child { border-top: 0; border-radius: 6px 6px 0 0; } .pp-day + .pp-row { border-top: 0; } .pp-more { all: unset; box-sizing: border-box; cursor: pointer; display: block; width: 100%; margin: 6px 0 14px; min-height: 42px; padding: 0 16px; text-align: center; line-height: 42px; border-radius: 10px; font-size: calc(12.5px * var(--fs)); font-weight: 600; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .25); } .pp-more:disabled { opacity: .5; cursor: default; } .pp-more:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .pp-busy { opacity: .55; transition: opacity .15s; pointer-events: none; } .pp-row { cursor: pointer; } @media (min-width: 1000px) { .pp-row.sel { background: rgba(26, 27, 30, .08); box-shadow: inset 3px 0 0 var(--paper-ink); } } .pp-rc .chips { display: flex; justify-content: center; margin-top: 8px; } .pp-rc .its { display: grid; gap: 1px; } .pp-rc .it { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; } .pp-rc .it .q { min-width: 2.4ch; font-weight: 800; } .pp-rc .it .n { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 800; line-height: 1.3; } .pp-rc .it .n small { display: block; margin-top: 1px; font-size: 10.5px; font-weight: 500; color: var(--paper-mut); } .pp-rc .it .p { font-weight: 800; font-variant-numeric: tabular-nums; } .pp-rc .kot { margin: 8px 0 2px; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: var(--paper-mut); } .pp-rc .ln.q2 { font-size: 11.5px; } .pp-rc .ln.q2 span:last-child { font-weight: 500; } .pp-rc .pays { margin-top: 10px; padding-top: 8px; border-top: 1.5px dashed var(--paper-line); } .pp-back { all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; margin: -6px 0 8px -6px; padding: 4px 6px; border-radius: 6px; font: 600 11px var(--font, system-ui), sans-serif; letter-spacing: .04em; color: var(--paper-mut); } .pp-back:hover { color: var(--paper-ink); background: rgba(26, 27, 30, .06); } .pp-back:focus-visible, .pp-open:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .pp-open { display: block; margin-top: 12px; min-height: 44px; line-height: 44px; text-align: center; text-decoration: none; border-radius: 8px; background: #1A1B1E; color: #ECE8DD; font: 600 13.5px var(--font, system-ui), sans-serif; letter-spacing: .01em; } .pp-open:active { transform: translateY(1px); } html[data-ui="v2"] .bl-paid { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 16px 12px 20px; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb), .16); } html[data-ui="v2"] .bl-paid::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; height: auto; background: var(--st-ready-f); } html[data-ui="v2"] .bl-paid::after { display: none; } html[data-ui="v2"] .bl-paid .ok { width: 34px; height: 34px; margin: 0; animation: none; color: var(--st-ready-t); background: color-mix(in srgb, var(--st-ready-f) 14%, transparent); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--st-ready-f) 45%, transparent); } html[data-ui="v2"] .bl-paid .ok svg { width: 18px; height: 18px; } html[data-ui="v2"] .bl-paid .tx { min-width: 0; } html[data-ui="v2"] .bl-paid .tx b { display: block; font: 650 14px var(--font, system-ui), sans-serif; letter-spacing: -.01em; color: var(--ink); } html[data-ui="v2"] .bl-paid .tx small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 500; line-height: 1.35; color: var(--ink-2); overflow-wrap: anywhere; } html[data-ui="v2"] .bl-paid .am { font: 750 26px var(--font, system-ui), sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--ink); } html[data-theme$="night"][data-ui="v2"] .bl-paid { background: rgba(255, 255, 255, .05); } @media (max-width: 380px) { html[data-ui="v2"] .bl-paid .am { font-size: 22px; } html[data-ui="v2"] .bl-paid { gap: 10px; padding-right: 12px; } }