/* Cocktail Exchange 0.3 — scoped, container-responsive interface. */
#ce-app.ce {
  --ce-accent:#a8e8c0; --ce-bg:#101112; --ce-panel:#1b1c1e;
  --ce-text:#f5f5f7; --ce-muted:#a1a1aa; --ce-line:rgba(255,255,255,.085);
  container:cocktail / inline-size; position:relative; isolation:isolate;
  width:100%; max-width:100%; min-width:0; margin:0 auto; overflow:clip;
  background:var(--ce-bg); color:var(--ce-text); color-scheme:dark;
  border:1px solid var(--ce-line); border-radius:24px;
  font:400 14px/1.5 -apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased; text-align:left; letter-spacing:-.015em;
}
#ce-app *,#ce-app *::before,#ce-app *::after {box-sizing:border-box;}
#ce-app :is(h1,h2,h3,p,figure) {margin:0; padding:0; color:inherit; font-family:inherit;}
#ce-app :is(button,a,input) {font:inherit; letter-spacing:inherit; -webkit-tap-highlight-color:transparent;}
#ce-app button {appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:5px; min-height:44px; max-width:100%; margin:0; padding:10px 16px; border:1px solid var(--ce-line); border-radius:12px; background:rgba(255,255,255,.035); color:var(--ce-text); cursor:pointer; text-transform:none; line-height:1.25; font-weight:500; box-shadow:none; transition:background .2s,transform .2s,border-color .2s; touch-action:manipulation;}
#ce-app button:hover {background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.16);}
#ce-app button:active {transform:scale(.97);}
#ce-app button:disabled {opacity:.35; cursor:not-allowed; transform:none;}
#ce-app :is(button,a,input):focus-visible {outline:2px solid var(--ce-accent); outline-offset:4px;}
#ce-app a {color:inherit; text-decoration:none;}
#ce-app .up {color:var(--ce-accent);}
#ce-app .down {color:#ffb5a6;}
#ce-app .ce-header {display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:22px; padding:22px 32px; border-bottom:1px solid var(--ce-line);}
#ce-app .ce-brand {display:flex; align-items:center; gap:12px; min-width:0; font-size:14px; font-weight:650; letter-spacing:.09em;}
#ce-app .ce-brand>span:last-child {display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#ce-app .ce-brand small {display:block; margin-top:4px; color:var(--ce-muted); font-size:8px; letter-spacing:.19em; font-weight:500;}
#ce-app .ce-brand img {width:38px; height:38px; flex:0 0 38px; object-fit:contain; border-radius:10px;}
#ce-app .ce-symbol {display:inline-grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:12px; background:var(--ce-accent); color:#15231b; font-size:26px; font-weight:450; letter-spacing:0;}
#ce-app nav {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px; min-width:0; padding:4px; border:1px solid var(--ce-line); border-radius:15px; background:#08090970;}
#ce-app nav button {min-height:38px; border:0; padding:9px 15px; border-radius:10px; background:transparent; color:var(--ce-muted); font-size:12px; white-space:nowrap;}
#ce-app nav .selected {background:#343537; color:#fff; box-shadow:0 1px 4px #0004,inset 0 1px 0 #ffffff0a;}
#ce-app .ce-header-tools {display:flex; align-items:center; justify-content:flex-end; gap:16px; min-width:0;}
#ce-app .ce-header-tools>button {white-space:nowrap; font-size:12px;}
#ce-app .ce-live {display:inline-flex; align-items:center; gap:7px; white-space:nowrap; color:var(--ce-muted); font-size:8px; font-weight:550; letter-spacing:.07em;}
#ce-app .ce-live i {width:5px; height:5px; border-radius:50%; background:var(--ce-accent); box-shadow:0 0 8px #a8e8c040; animation:ce-live-pulse 3s ease-in-out infinite;}
/* Two identical groups create a seamless loop. The rail is preserved on refresh. */
#ce-app .ce-ticker {position:relative; display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:stretch; height:46px; overflow:hidden; border-bottom:1px solid var(--ce-line); background:#161719;}
#ce-app .ce-ticker-viewport {overflow:hidden; min-width:0; mask-image:linear-gradient(to right,transparent,#000 24px,#000 calc(100% - 24px),transparent);}
#ce-app .ce-ticker-track {display:flex; width:max-content; height:100%; will-change:transform; animation:ce-ticker-loop 44s linear infinite;}
#ce-app .ce-ticker-group {display:flex; align-items:center; justify-content:space-around; flex:0 0 auto; min-width:100cqw; gap:0;}
#ce-app .ce-ticker-item {display:flex; align-items:center; justify-content:center; gap:12px; padding:0 25px; white-space:nowrap; font-size:11px; font-variant-numeric:tabular-nums; letter-spacing:.01em;}
#ce-app .ce-ticker-item>span {color:var(--ce-muted); font-size:10px; letter-spacing:.08em;}
#ce-app .ce-ticker-item b {font-weight:550; color:var(--ce-text);}
#ce-app .ce-ticker-item em {font-style:normal; font-size:10px;}
#ce-app .ce-ticker .ce-ticker-toggle {z-index:1; min-height:0; height:100%; width:44px; padding:0; border:0; border-left:1px solid var(--ce-line); border-radius:0; background:#191a1c; color:var(--ce-muted); font-size:12px;}
#ce-app .ce-ticker-paused .ce-ticker-track,#ce-app .ce-ticker-viewport:hover .ce-ticker-track,#ce-app .ce-ticker:focus-within .ce-ticker-track {animation-play-state:paused;}
#ce-app .ce-main {width:100%; max-width:1320px; min-width:0; margin:0 auto; padding:36px 32px 32px;}
#ce-app .ce-heading {display:grid; grid-template-columns:minmax(0,1fr) 240px; align-items:center; gap:40px; padding:16px 0 32px;}
#ce-app .ce-heading>div {min-width:0;}
#ce-app .ce-eyebrow {margin-bottom:16px; color:var(--ce-muted); font-size:9px; font-weight:600; letter-spacing:.13em; line-height:1.6;}
#ce-app h1 {font-size:clamp(36px,4.6cqw,60px); line-height:1.05; font-weight:600; letter-spacing:-.055em; margin-bottom:16px; text-wrap:balance;}
#ce-app h1 span {color:#929397;}
#ce-app .ce-heading p:not(.ce-eyebrow) {max-width:48ch; color:var(--ce-muted); font-size:13px; line-height:1.6; text-wrap:pretty;}
#ce-app .ce-clock {display:grid; justify-items:center; gap:10px; min-width:0; padding:24px 18px; background:linear-gradient(145deg,#242527,#1b1c1e); border:1px solid var(--ce-line); border-radius:20px; text-align:center;}
#ce-app .ce-clock>span {font-size:9px; color:var(--ce-muted); font-weight:600; letter-spacing:.12em;}
#ce-app .ce-clock strong {font-size:44px; line-height:1.15; font-weight:500; font-variant-numeric:tabular-nums; letter-spacing:-.045em; color:var(--ce-accent);}
#ce-app .ce-clock small {max-width:24ch; color:var(--ce-muted); font-size:10px; line-height:1.5;}
#ce-app .ce-clock button {width:100%; min-height:36px; padding:9px; font-size:11px;}
#ce-app .ce-stats {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; padding:1px; margin:0 0 32px; overflow:hidden; border:1px solid var(--ce-line); border-radius:18px; background:var(--ce-line);}
#ce-app .ce-stats>div {display:flex; flex-direction:column; justify-content:space-between; min-width:0; min-height:106px; padding:20px; background:#18191b;}
#ce-app .ce-stats span {color:var(--ce-muted); font-size:9px; font-weight:550; letter-spacing:.075em;}
#ce-app .ce-stats strong {display:flex; align-items:baseline; flex-wrap:wrap; gap:6px; min-width:0; font-size:27px; line-height:1.25; font-weight:550; letter-spacing:-.035em; font-variant-numeric:tabular-nums;}
#ce-app .ce-stats small {font-size:11px; font-weight:400; letter-spacing:0; color:var(--ce-muted);}
#ce-app .ce-stats small.up {color:var(--ce-accent);}
#ce-app .ce-stats small.down {color:#ffb5a6;}
#ce-app .ce-stats .ce-feature {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; line-height:1.8; letter-spacing:-.025em;}
#ce-app .ce-section-title {display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px 20px; margin-bottom:18px;}
#ce-app h2 {font-size:21px; line-height:1.3; font-weight:550; letter-spacing:-.035em; text-wrap:balance;}
#ce-app .ce-section-title>span {font-size:11px; color:var(--ce-muted);}
#ce-app .ce-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; gap:16px;}
#ce-app .ce-card {display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:24px 52px 36px 64px 62px 28px; gap:8px; min-width:0; padding:22px; overflow:hidden; border:1px solid var(--ce-line); border-radius:22px; background:linear-gradient(155deg,#242527,#1b1c1e 75%); box-shadow:0 4px 12px #0000000c; transition:border-color .2s,box-shadow .2s;}
#ce-app .ce-card:hover {border-color:#ffffff20; box-shadow:0 8px 24px #0002;}
#ce-app .ce-card-top {display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0;}
#ce-app .ce-code {font-size:10px; font-weight:550; letter-spacing:.1em; color:#c7c7cd;}
#ce-app .ce-code small {margin-left:5px; font-size:9px; color:#7d7e87;}
#ce-app .ce-change {border-radius:7px; padding:4px 7px; background:#ffffff06; white-space:nowrap; font-size:10px; font-variant-numeric:tabular-nums;}
#ce-app h3 {font-size:20px; line-height:1.25; font-weight:550; letter-spacing:-.035em;}
#ce-app .ce-drink-name {align-self:center; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-wrap:balance;}
#ce-app .ce-ingredients {align-self:start; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; color:var(--ce-muted); font-size:11px; line-height:1.6;}
#ce-app .ce-graph {min-width:0; height:64px; margin:0 -8px; opacity:.85;}
#ce-app .spark {display:block; width:100%; height:100%; overflow:visible;}
#ce-app .ce-price-row {display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0;}
#ce-app .ce-price-row>div:first-child {min-width:0;}
#ce-app .ce-price-row strong {display:block; font-size:30px; line-height:1.15; font-weight:550; letter-spacing:-.05em; font-variant-numeric:tabular-nums; white-space:nowrap;}
#ce-app .ce-price-row small {display:block; margin-top:6px; color:var(--ce-muted); font-size:10px;}
#ce-app .ce-quantity {display:flex; align-items:center; gap:8px; flex-shrink:0; font-size:13px; font-variant-numeric:tabular-nums;}
#ce-app .ce-quantity button {min-width:40px; min-height:40px; width:40px; height:40px; border-radius:50%; padding:0; background:#ffffff09; color:var(--ce-accent); font-size:23px; font-weight:400;}
#ce-app .ce-quantity button:hover {background:#ffffff16;}
#ce-app .ce-range {display:flex; justify-content:space-between; align-items:flex-end; gap:10px; padding-top:9px; border-top:1px solid var(--ce-line); color:#a0a0aa; font-size:9px; font-variant-numeric:tabular-nums;}
#ce-app .sold-out {opacity:.5;}
#ce-app .ce-stock {font-size:9px; font-weight:550; letter-spacing:.03em; color:var(--ce-muted);}
#ce-app .ce-explainer {display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:20px; padding:24px; margin-top:24px; border:1px solid var(--ce-line); border-radius:20px; background:#18191b;}
#ce-app .ce-explainer h3 {font-size:16px; line-height:1.4;}
#ce-app .ce-explainer p {color:var(--ce-muted); font-size:12px; line-height:1.65; margin-top:6px; max-width:66ch;}
#ce-app .ce-explainer button {font-size:12px; white-space:nowrap;}
#ce-app footer {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px 28px; align-items:start; margin-top:28px; color:#94949d; font-size:9px; line-height:1.6;}
#ce-app footer span {min-width:0; overflow-wrap:anywhere;}
#ce-app footer span:last-child {text-align:right; font-size:8px; letter-spacing:.04em;}
#ce-app .ce-primary {display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:12px 18px; border:1px solid transparent; border-radius:12px; background:var(--ce-accent); color:#13251b; font-size:13px; font-weight:600; line-height:1.3;}
#ce-app .ce-primary:hover {background:var(--ce-accent); filter:brightness(1.06); border-color:transparent;}
#ce-app.ce-has-cart .ce-main {padding-bottom:28px;}
#ce-app .ce-cart {position:sticky; bottom:max(16px,env(safe-area-inset-bottom)); z-index:5; display:grid; grid-template-columns:minmax(0,1fr) auto auto 36px; align-items:center; gap:16px; width:calc(100% - 64px); max-width:680px; min-width:0; margin:0 auto 20px; padding:14px 16px; border:1px solid #ffffff25; border-radius:20px; background:#2b2c2feF; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); box-shadow:0 12px 40px #0006;}
#ce-app .ce-cart>div {min-width:0;}
#ce-app .ce-cart b {font-size:13px; font-weight:550;}
#ce-app .ce-cart small {display:block; margin-top:3px; color:#c1c1c8; font-size:10px; line-height:1.4;}
#ce-app .ce-cart>strong {white-space:nowrap; font-size:19px; font-weight:550; letter-spacing:-.04em; font-variant-numeric:tabular-nums;}
#ce-app .ce-cart>button:last-child {min-height:36px; width:36px; padding:0; border:0; background:#ffffff08; border-radius:50%; font-size:20px;}
#ce-app .ce-notice {display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:16px; padding:14px 18px; margin-bottom:24px; border:1px solid #a8e8c02b; border-radius:14px; background:#a8e8c00b; font-size:13px; overflow-wrap:anywhere;}
#ce-app .ce-notice button {border:0; background:transparent; min-width:36px; padding:0; font-size:21px;}
#ce-app .ce-empty {padding:56px 24px; border:1px solid var(--ce-line); border-radius:20px; text-align:center; color:var(--ce-muted);}
#ce-app .ce-orders {display:grid; gap:14px;}
#ce-app .ce-order {display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:24px; min-width:0; padding:24px; border:1px solid var(--ce-line); border-radius:20px; background:var(--ce-panel);}
#ce-app .ce-order>div {min-width:0; overflow-wrap:anywhere;}
#ce-app .ce-order h3 {margin:9px 0; font-size:20px;}
#ce-app .ce-order p,#ce-app .ce-order small {color:var(--ce-muted); font-size:12px;}
#ce-app .ce-order>strong {font-size:21px; white-space:nowrap; font-variant-numeric:tabular-nums;}
#ce-app .ce-crash {display:grid; grid-template-columns:minmax(0,1fr) 150px; align-items:center; gap:24px; min-width:0; padding:22px 24px; margin-bottom:28px; border:1px solid #a8e8c026; border-radius:20px; background:linear-gradient(115deg,#a8e8c00b,#1b1d1d);}
#ce-app .ce-crash .ce-eyebrow {display:block; margin-bottom:7px; font-size:9px;}
#ce-app .ce-crash h2 {font-size:19px;}
#ce-app .ce-crash p {margin-top:7px; color:var(--ce-muted); font-size:11px; line-height:1.6; max-width:70ch;}
#ce-app .ce-crash>div:last-child {border-left:1px solid var(--ce-line); text-align:center; padding-left:24px;}
#ce-app .ce-crash>div:last-child span {display:block; font-size:8px; font-weight:550; letter-spacing:.09em; color:var(--ce-muted);}
#ce-app .ce-crash strong {display:block; margin-top:6px; font-size:32px; line-height:1.2; font-weight:500; letter-spacing:-.04em; color:var(--ce-accent); font-variant-numeric:tabular-nums;}
#ce-app .ce-crash.active {border-color:#ffb5a638; background:linear-gradient(115deg,#ffb5a612,#1f1c1b); animation:ce-crash-glow 3s ease-in-out infinite alternate;}
#ce-app .ce-crash.active strong {color:#ffc6b5;}
#ce-app .ce-board {grid-template-columns:repeat(2,minmax(0,1fr));}
#ce-app .ce-board .ce-card {grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:26px 48px 36px 66px 28px; gap:8px 24px;}
#ce-app .ce-board .ce-card-top {grid-column:1 / -1;}
#ce-app .ce-board .ce-drink-name {grid-column:1; grid-row:2;}
#ce-app .ce-board .ce-ingredients {grid-column:1; grid-row:3;}
#ce-app .ce-board .ce-graph {grid-column:2; grid-row:2 / 4; height:92px; align-self:center; margin:0;}
#ce-app .ce-board .ce-price-row {grid-column:1 / -1; grid-row:4;}
#ce-app .ce-board .ce-range {grid-column:1 / -1; grid-row:5;}
#ce-app.ce-screen .ce-main {max-width:1800px;}
#ce-app:fullscreen {width:100%; height:100%; max-width:none; overflow:auto; border:0; border-radius:0;}
#ce-app .ce-dialog {width:min(480px,calc(100vw - 32px)); max-width:calc(100vw - 32px); max-height:calc(100dvh - 32px); margin:auto; padding:30px; overflow:auto; overscroll-behavior:contain; border:1px solid #ffffff22; border-radius:24px; background:#222325; color:var(--ce-text); box-shadow:0 30px 100px #0009; font-family:inherit;}
#ce-app .ce-dialog::backdrop {background:#050608a8; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);}
#ce-app .ce-dialog h2 {font-size:28px; margin-bottom:20px;}
#ce-app .ce-dialog p {margin:14px 0; color:#b7b7c0; font-size:12px; line-height:1.8;}
#ce-app .ce-dialog label {display:block; margin:18px 0; font-size:12px; color:#d8d8de;}
#ce-app .ce-dialog input:not([type=checkbox]):not([type=radio]) {appearance:none; display:block; width:100%; min-width:0; min-height:48px; margin:8px 0 0; padding:12px 14px; border:1px solid #ffffff1a; border-radius:12px; background:#141517; color:#fff; font-size:16px; line-height:1.5; box-shadow:none;}
#ce-app .ce-check {display:flex!important; align-items:flex-start; gap:12px; line-height:1.6;}
#ce-app .ce-check input {flex:0 0 18px; width:18px; height:18px; margin:2px 0 0; accent-color:var(--ce-accent);}
#ce-app .ce-modal-total {display:flex; justify-content:space-between; align-items:center; gap:20px; padding-top:18px; border-top:1px solid var(--ce-line);}
#ce-app .ce-modal-total strong {color:var(--ce-text); font-size:27px; letter-spacing:-.04em; font-variant-numeric:tabular-nums;}
#ce-app .ce-dialog form>button {margin:4px 8px 4px 0;}
#ce-app .ce-auth [data-auth-mode] {font-size:12px; margin:0 8px 8px 0;}
#ce-app .ce-auth a {color:var(--ce-accent); display:inline-block; font-size:12px;}
#ce-app .ce-error {color:#ffb5a6!important;}
#ce-app .ce-price-changed .ce-price-row strong {animation:ce-price-flash 1.4s ease-out both;}
#ce-app.ce-view-enter .ce-heading {animation:ce-enter .4s ease-out both;}
@keyframes ce-ticker-loop {from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes ce-live-pulse {0%,100%{opacity:1}50%{opacity:.4}}
@keyframes ce-crash-glow {to{box-shadow:0 0 24px #ffb5a60c}}
@keyframes ce-price-flash {0%{color:var(--ce-accent);text-shadow:0 0 18px #a8e8c040}100%{color:var(--ce-text);text-shadow:none}}
@keyframes ce-enter {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
/* Layout depends on the plugin column, including narrow WordPress templates. */
@container cocktail (max-width:1100px) {
  #ce-app .ce-header {grid-template-columns:minmax(0,1fr) auto; gap:18px; padding:20px 28px;}
  #ce-app nav {grid-column:1 / -1; grid-row:2; width:100%; max-width:440px; justify-self:center;}
  #ce-app .ce-header-tools {grid-column:2; grid-row:1;}
  #ce-app .ce-main {padding:28px;}
  #ce-app .ce-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
  #ce-app .ce-heading {gap:28px; grid-template-columns:minmax(0,1fr) 220px;}
  #ce-app .ce-stats>div {padding:18px;}
  #ce-app .ce-stats .ce-feature {font-size:16px;}
  #ce-app .ce-explainer {grid-template-columns:38px minmax(0,1fr);}
  #ce-app .ce-explainer button {grid-column:2; justify-self:start;}
  #ce-app footer {grid-template-columns:minmax(0,1fr);}
  #ce-app footer span:last-child {text-align:left;}
}
@container cocktail (max-width:760px) {
  #ce-app .ce-header {padding:20px;}
  #ce-app .ce-main {padding:24px 20px;}
  #ce-app .ce-heading {grid-template-columns:minmax(0,1fr) 180px; gap:20px; padding:12px 0 24px;}
  #ce-app h1 {font-size:42px;}
  #ce-app .ce-clock {padding:20px 12px;}
  #ce-app .ce-clock strong {font-size:36px;}
  #ce-app .ce-stats {grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:26px;}
  #ce-app .ce-stats>div {min-height:98px;}
  #ce-app .ce-grid {gap:14px;}
  #ce-app .ce-card {padding:18px;}
  #ce-app .ce-price-row strong {font-size:26px;}
  #ce-app .ce-quantity {gap:6px;}
  #ce-app .ce-quantity button {width:36px; min-width:36px; height:40px;}
  #ce-app .ce-board {grid-template-columns:minmax(0,1fr);}
  #ce-app .ce-crash {padding:20px; grid-template-columns:minmax(0,1fr) 110px; gap:18px;}
  #ce-app .ce-crash>div:last-child {padding-left:18px;}
  #ce-app .ce-crash strong {font-size:27px;}
  #ce-app .ce-order {grid-template-columns:minmax(0,1fr) auto; gap:16px; padding:20px;}
  #ce-app .ce-order>button {grid-column:1 / -1; width:100%;}
}
@container cocktail (max-width:580px) {
  #ce-app .ce-header {grid-template-columns:minmax(0,1fr) auto; gap:18px 12px; padding:18px 16px;}
  #ce-app .ce-brand {font-size:12px; gap:10px; letter-spacing:.045em;}
  #ce-app .ce-brand small {font-size:7px; letter-spacing:.1em;}
  #ce-app .ce-symbol,#ce-app .ce-brand img {width:34px; height:34px; flex-basis:34px; border-radius:10px;}
  #ce-app .ce-header-tools {gap:0;}
  #ce-app .ce-header-tools .ce-live {display:none;}
  #ce-app .ce-header-tools>button {padding:10px 12px; min-height:40px; font-size:11px;}
  #ce-app nav {max-width:none;}
  #ce-app nav button {min-height:40px; padding:9px 6px; font-size:11px;}
  #ce-app .ce-main {padding:22px 16px;}
  #ce-app .ce-heading {grid-template-columns:minmax(0,1fr); gap:22px; padding:8px 0 24px;}
  #ce-app h1 {font-size:44px; max-width:14ch; margin-bottom:14px;}
  #ce-app .ce-eyebrow {font-size:8px; letter-spacing:.1em; margin-bottom:14px;}
  #ce-app .ce-heading p:not(.ce-eyebrow) {font-size:12px; max-width:38ch;}
  #ce-app .ce-clock {grid-template-columns:minmax(0,1fr) auto; justify-items:start; gap:5px 18px; padding:17px 18px; border-radius:16px; text-align:left;}
  #ce-app .ce-clock>span {grid-row:1; grid-column:1; font-size:8px;}
  #ce-app .ce-clock small {grid-row:2; grid-column:1; max-width:28ch; font-size:9px;}
  #ce-app .ce-clock strong {grid-row:1 / 3; grid-column:2; font-size:34px;}
  #ce-app .ce-clock button {grid-column:1 / -1; margin-top:7px; min-height:40px;}
  #ce-app .ce-stats {border-radius:16px;}
  #ce-app .ce-stats>div {padding:16px; min-height:96px;}
  #ce-app .ce-stats span {font-size:8px; letter-spacing:.045em;}
  #ce-app .ce-stats strong {font-size:25px;}
  #ce-app .ce-stats small {font-size:10px;}
  #ce-app .ce-stats .ce-feature {font-size:16px;}
  #ce-app .ce-section-title {display:grid; gap:7px; margin-bottom:16px;}
  #ce-app h2 {font-size:20px;}
  #ce-app .ce-section-title>span {font-size:10px;}
  #ce-app .ce-grid {grid-template-columns:minmax(0,1fr); gap:14px;}
  #ce-app .ce-card {grid-template-rows:24px 48px 34px 64px 62px 28px; padding:20px; border-radius:20px;}
  #ce-app .ce-drink-name {font-size:22px;}
  #ce-app .ce-price-row strong {font-size:32px;}
  #ce-app .ce-quantity button {width:44px; min-width:44px; height:44px; min-height:44px;}
  #ce-app .ce-quantity {gap:9px;}
  #ce-app .ce-range {font-size:10px;}
  #ce-app .ce-board .ce-card {grid-template-columns:minmax(0,1fr); grid-template-rows:24px 48px 34px 64px 62px 28px; gap:8px;}
  #ce-app .ce-board .ce-card>* {grid-column:auto; grid-row:auto;}
  #ce-app .ce-board .ce-graph {height:64px; margin:0 -8px;}
  #ce-app .ce-explainer {padding:20px; gap:16px; grid-template-columns:34px minmax(0,1fr); border-radius:18px;}
  #ce-app .ce-explainer h3 {font-size:15px;}
  #ce-app .ce-explainer p {font-size:11px;}
  #ce-app .ce-explainer button {grid-column:1 / -1; width:100%;}
  #ce-app .ce-crash {grid-template-columns:minmax(0,1fr); gap:16px; padding:18px; margin-bottom:22px; border-radius:18px;}
  #ce-app .ce-crash h2 {font-size:18px;}
  #ce-app .ce-crash p {font-size:11px;}
  #ce-app .ce-crash>div:last-child {display:flex; align-items:center; justify-content:space-between; gap:16px; border-left:0; border-top:1px solid var(--ce-line); padding:14px 0 0; text-align:left;}
  #ce-app .ce-crash strong {font-size:29px; margin:0;}
  #ce-app .ce-cart {grid-template-columns:minmax(0,1fr) auto 32px; width:calc(100% - 24px); gap:12px; padding:14px; bottom:max(10px,env(safe-area-inset-bottom)); border-radius:18px; margin-bottom:12px;}
  #ce-app .ce-cart>div {grid-column:1; grid-row:1;}
  #ce-app .ce-cart>strong {grid-column:2; grid-row:1; font-size:20px;}
  #ce-app .ce-cart>button:last-child {grid-column:3; grid-row:1; width:32px; height:36px;}
  #ce-app .ce-cart .ce-primary {grid-column:1 / -1; grid-row:2; width:100%; min-height:44px;}
  #ce-app .ce-cart small {font-size:9px;}
  #ce-app .ce-notice {padding:14px; font-size:12px;}
}
@container cocktail (max-width:360px) {
  #ce-app .ce-header {padding:16px 12px; gap:16px 8px;}
  #ce-app .ce-main {padding:20px 12px;}
  #ce-app .ce-brand {font-size:11px; gap:8px;}
  #ce-app h1 {font-size:39px;}
  #ce-app .ce-stats>div {padding:14px 12px;}
  #ce-app .ce-card {padding:18px;}
  #ce-app .ce-price-row strong {font-size:28px;}
}
@container cocktail (min-width:1500px) {
  #ce-app.ce-screen h1 {font-size:66px;}
  #ce-app.ce-screen .ce-card {grid-template-rows:28px 68px 42px 95px 80px 34px; padding:28px; gap:12px;}
  #ce-app.ce-screen .ce-drink-name {font-size:30px;}
  #ce-app.ce-screen .ce-ingredients {font-size:14px;}
  #ce-app.ce-screen .ce-graph {height:95px;}
  #ce-app.ce-screen .ce-price-row strong {font-size:44px;}
  #ce-app.ce-screen .ce-board .ce-card {grid-template-rows:30px 68px 44px 90px 36px;}
  #ce-app.ce-screen .ce-board .ce-graph {height:120px;}
}
/* A contained plugin can have a narrow dialog even on a wide desktop. */
@media(max-width:580px) {#ce-app.ce{border-radius:20px;}#ce-app .ce-dialog{padding:24px 20px;border-radius:22px;}#ce-app .ce-dialog h2{font-size:26px;}}
@media(prefers-reduced-motion:reduce) {#ce-app *,#ce-app *::before,#ce-app *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important;}#ce-app .ce-ticker-viewport{overflow-x:auto;mask-image:none;}#ce-app .ce-ticker-group[aria-hidden]{display:none;}#ce-app .ce-ticker .ce-ticker-toggle{display:none;}#ce-app .ce-ticker{grid-template-columns:minmax(0,1fr);}}
@container cocktail (max-width:580px) {
  #ce-app .ce-crash:not(.active) {grid-template-columns:minmax(0,1fr) 88px; gap:14px; padding:17px 18px;}
  #ce-app .ce-crash:not(.active) h2 {font-size:15px; text-wrap:pretty;}
  #ce-app .ce-crash:not(.active) p {display:none;}
  #ce-app .ce-crash:not(.active) .ce-eyebrow {font-size:7px; margin-bottom:6px;}
  #ce-app .ce-crash:not(.active)>div:last-child {display:block; border-top:0; border-left:1px solid var(--ce-line); padding:0 0 0 14px; text-align:center;}
  #ce-app .ce-crash:not(.active) strong {font-size:24px; margin-top:6px;}
  #ce-app .ce-crash:not(.active)>div:last-child span {font-size:7px;}
}

/* Customer navigation contains only the menu and orders. */
#ce-app nav{grid-template-columns:repeat(2,minmax(0,1fr));}
/* 0.5: edge-to-edge app, stable DOM updates and a ticket wallet. */
html:has(body.ce-app-document){margin:0!important;padding:0!important;background:#101112;scroll-behavior:auto}
body.ce-app-document{margin:0!important;padding:0!important;min-height:100dvh;background:#101112;overflow-x:clip}
#ce-app.ce{width:100%;max-width:none;min-height:100vh;min-height:100dvh;border:0;border-radius:0!important;margin:0;overflow-anchor:none}
#ce-app nav{grid-template-columns:repeat(3,minmax(0,1fr))}
#ce-app .ce-account{max-width:560px;min-height:55vh;padding:36px 0;margin:0 auto}
#ce-app .ce-account h1{font-size:44px;margin-bottom:16px}#ce-app .ce-account>p:not(.ce-eyebrow){color:var(--ce-muted);margin-bottom:24px}
#ce-app .ce-auth h2{font-size:32px;margin:12px 0 24px}
#ce-app .ce-auth label{display:block;font-size:12px;margin:18px 0;color:#d8d8de}
#ce-app .ce-auth input{appearance:none;display:block;width:100%;min-height:48px;margin-top:8px;padding:12px 14px;background:#191a1c;color:#fff;border:1px solid #ffffff20;border-radius:12px;font-size:16px;line-height:1.5;box-shadow:none}
#ce-app .ce-auth>button{margin:6px 8px 6px 0}#ce-app .ce-form-message{font-size:12px;line-height:1.7;margin:14px 0;color:#ffd0bf}
#ce-app .ce-account-actions{display:flex;flex-wrap:wrap;gap:12px}
#ce-app .ce-wallet-help{color:var(--ce-muted);font-size:13px;max-width:80ch;margin:0 0 24px;line-height:1.7}
#ce-app .ce-ticket-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}
#ce-app .ce-ticket{display:flex;flex-direction:column;gap:14px;padding:22px;min-width:0;border:1px solid var(--ce-line);border-radius:20px;background:linear-gradient(140deg,#252729,#1b1c1e)}
#ce-app .ce-ticket h2{font-size:22px}#ce-app .ce-ticket>strong{font-size:30px;font-weight:550;letter-spacing:-.04em}#ce-app .ce-ticket>p,#ce-app .ce-ticket>small{font-size:11px;color:var(--ce-muted)}
#ce-app .ce-ticket-status{font-size:9px;padding:5px 8px;border:1px solid var(--ce-line);border-radius:100px;white-space:nowrap;color:var(--ce-muted)}#ce-app .ce-ticket-available .ce-ticket-status{color:var(--ce-accent);border-color:#a8e8c02a}#ce-app .ce-ticket-redeemed{opacity:.5}
#ce-app .ce-ticket-actions{margin-top:auto;display:grid;gap:14px}#ce-app .ce-ticket-actions button{width:100%}#ce-app .ce-ticket-actions label{display:flex;gap:10px;align-items:center;font-size:11px;color:#c1c1c9}#ce-app .ce-ticket-actions input{width:18px;height:18px;accent-color:var(--ce-accent)}
#ce-app .ce-wallet-selection{position:sticky;bottom:16px;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px;border-radius:18px;border:1px solid #ffffff25;background:#2b2c2ff5;backdrop-filter:blur(20px)}#ce-app .ce-wallet-selection>span{font-size:12px}
#ce-app .ce-qr-view{text-align:center}#ce-app .ce-qr-image{background:#fff;padding:20px;border-radius:18px;max-width:320px;margin:24px auto;color:#000}#ce-app .ce-qr-image svg{display:block;width:100%;height:auto;max-width:none;aspect-ratio:1}
#ce-app .ce-qr-view p{font-size:12px;color:var(--ce-muted);line-height:1.7;margin:16px 0}#ce-app .ce-qr-view details{font-size:11px;text-align:left;margin:16px 0}#ce-app .ce-qr-view textarea{width:100%;height:90px;margin-top:12px;padding:12px;background:#111;color:white;border:1px solid #ffffff20;border-radius:10px;font-size:11px;resize:none;word-break:break-all}
@container cocktail (max-width:1100px){#ce-app .ce-ticket-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container cocktail (max-width:580px){#ce-app .ce-ticket-grid{grid-template-columns:minmax(0,1fr)}#ce-app .ce-wallet-selection{flex-wrap:wrap;gap:12px;padding:14px}#ce-app .ce-wallet-selection .ce-primary{flex:1}#ce-app .ce-wallet-selection>span{width:100%}#ce-app .ce-account{padding:20px 0}#ce-app .ce-account h1{font-size:36px}#ce-app .ce-auth>button[type=submit]{width:100%}#ce-app.ce{border-radius:0!important}#ce-app .ce-qr-image{padding:14px}}
@container cocktail (max-width:580px){#ce-app .ce-qr-view textarea{font-size:16px;height:120px}}

#ce-app .ce-grid>.ce-empty{grid-column:1/-1}
/* One payment QR per unpaid purchase; unit tickets appear only after payment. */
#ce-app .ce-purchases-pending{margin:30px 0}#ce-app .ce-purchases-pending>h2,#ce-app .ce-wallet-tickets-heading{margin-bottom:18px;font-size:21px}
#ce-app .ce-purchase-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#ce-app .ce-purchase{display:flex;flex-direction:column;gap:20px;padding:24px;border:1px solid #a8e8c021;border-radius:21px;background:linear-gradient(140deg,#222a25,#1b1d1e)}
#ce-app .ce-purchase h3{font-size:20px;line-height:1.3}#ce-app .ce-purchase>small{font-size:10px;color:var(--ce-muted);line-height:1.6;text-align:center}
#ce-app .ce-purchase-lines{display:grid;gap:11px;margin:4px 0 10px}#ce-app .ce-purchase-lines>p{display:flex;justify-content:space-between;align-items:baseline;gap:18px;font-size:12px;line-height:1.6;color:#b4bdba;margin:0}#ce-app .ce-purchase-lines>p>span{min-width:0}#ce-app .ce-purchase-lines b{white-space:nowrap;font-size:12px;font-weight:500;color:#d9e3dd;font-variant-numeric:tabular-nums}
#ce-app .ce-purchase-total{display:flex;align-items:center;justify-content:space-between;gap:18px;border-top:1px solid #ffffff10;padding-top:18px;margin-top:auto}#ce-app .ce-purchase-total>span{font-size:11px;color:var(--ce-muted)}#ce-app .ce-purchase-total>strong{font-size:28px;font-weight:550;letter-spacing:-.045em;font-variant-numeric:tabular-nums;white-space:nowrap}
@container cocktail (max-width:760px){#ce-app .ce-purchase-grid{grid-template-columns:minmax(0,1fr)}#ce-app .ce-purchase{padding:20px}}
/* Customer canvas: edge-to-edge, near black, with the signage's green glow. */
#ce-app.ce:not(.ce-bar){--ce-bg:#030504;--ce-panel:#0b100d;background:radial-gradient(ellipse at 70% 10%,#101c16 0,transparent 58%),#030504;min-height:100dvh}
#ce-app:not(.ce-bar) .ce-card{background:linear-gradient(145deg,#111714,#080b09)}
#ce-app:not(.ce-bar) .ce-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
#ce-app:not(.ce-bar) .ce-main{padding-top:24px}
#ce-app .ce-live.is-closed{color:#ff453a}
#ce-app .ce-live.is-closed i{background:#ff453a;animation:none;box-shadow:none}
@container cocktail (max-width:580px){#ce-app:not(.ce-bar) .ce-stats{grid-template-columns:minmax(0,1fr)}#ce-app:not(.ce-bar) .ce-stats>div{min-height:72px}}
#ce-app .ce-funds{display:grid;gap:32px;min-width:0}
#ce-app .ce-funds h1{font-size:clamp(28px,4cqw,52px);letter-spacing:-.045em;line-height:1.1}
#ce-app .ce-funds h2{font-size:22px;margin-bottom:18px}
#ce-app .ce-funds-heading{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:32px;border:1px solid #a8e8c025;border-radius:24px;background:radial-gradient(ellipse at top left,#17342388,transparent),#080e0b}
#ce-app .ce-funds-heading strong{display:block;margin:20px 0;font-size:clamp(42px,6cqw,76px);font-weight:550;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
#ce-app .ce-funds p{color:var(--ce-muted);font-size:13px;line-height:1.7}
#ce-app .ce-funds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
#ce-app .ce-funds-form,#ce-app .ce-funds-online{display:grid;align-content:start;gap:18px;padding:26px;border-radius:22px;border:1px solid var(--ce-line);background:#0b100d}
#ce-app .ce-funds-form label,#ce-app .ce-credit-form>label{display:grid;gap:10px;font-size:13px}
#ce-app .ce-funds-form input,#ce-app .ce-credit-form input[name=amount]{width:100%;padding:16px;border-radius:12px;border:1px solid var(--ce-line);background:#030604;color:var(--ce-text);font:inherit;font-size:22px}
#ce-app .ce-funds-history,#ce-app .ce-funds-pending{display:grid;gap:12px}
#ce-app :is(.ce-funds-history,.ce-funds-pending)>article{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px;border-bottom:1px solid var(--ce-line)}
#ce-app :is(.ce-funds-history,.ce-funds-pending) small{display:block;color:var(--ce-muted);font-size:11px;margin-top:6px}
#ce-app .ce-funds-pending strong{font-size:24px;font-weight:550}
#ce-app .ce-payment-options{display:grid;gap:14px;border:1px solid var(--ce-line);padding:18px;border-radius:14px;margin:20px 0}
#ce-app .ce-payment-options legend{font-size:13px;padding:0 8px}#ce-app .ce-payment-options label{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.5}
#ce-app .ce-payment-options input{accent-color:var(--ce-accent)}
#ce-app .ce-credit-form{display:grid;gap:24px;margin:24px 0}#ce-app .ce-credit-form .ce-check{display:flex;align-items:start;gap:12px;font-size:13px;line-height:1.7}
@container cocktail (max-width:700px){#ce-app .ce-funds-heading{display:block;padding:24px}#ce-app .ce-funds-grid{grid-template-columns:minmax(0,1fr)}#ce-app .ce-funds-heading .ce-account-actions{margin-top:22px}#ce-app .ce-funds-pending>article{flex-wrap:wrap}#ce-app .ce-funds-pending button{width:100%}}
/* Native payment controls keep an independent hit target and never inherit text-field sizing. */
#ce-app .ce-dialog .ce-payment-options{gap:12px;padding:18px;margin:24px 0}
#ce-app .ce-dialog .ce-payment-options label{display:flex;align-items:flex-start;gap:14px;margin:0;padding:16px;border:1px solid #ffffff18;border-radius:14px;line-height:1.7;cursor:pointer;min-height:60px}
#ce-app .ce-dialog .ce-payment-options label:has(input:checked){border-color:#a8e8c080;background:#a8e8c00c}
#ce-app .ce-dialog .ce-payment-options input[type=radio]{appearance:auto;display:inline-block;flex:0 0 20px;width:20px;height:20px;min-height:20px;padding:0;margin:2px 0 0;border:0;border-radius:50%;box-shadow:none;accent-color:var(--ce-accent);cursor:pointer}
#ce-app .ce-dialog form>button{margin:8px 8px 8px 0;min-height:46px}
#ce-app .ce-account-actions{display:flex;flex-wrap:wrap;gap:12px}
#ce-app .ce-header-tools{gap:12px}
#ce-app .ce-section-title{gap:18px;flex-wrap:wrap}
#ce-app .ce-notice{padding:16px 20px;line-height:1.7}
#ce-app .ce-cart{background:linear-gradient(130deg,#ffffff18,#1c2821a6);border:1px solid #ffffff38;box-shadow:0 16px 50px #0006,inset 0 1px 0 #ffffff26;backdrop-filter:blur(30px) saturate(160%);-webkit-backdrop-filter:blur(30px) saturate(160%);gap:20px;padding:18px 20px}
#ce-app .ce-wallet-selection{background:#17231cb3;border:1px solid #ffffff30;backdrop-filter:blur(28px) saturate(150%);-webkit-backdrop-filter:blur(28px) saturate(150%);box-shadow:0 12px 38px #0005,inset 0 1px 0 #ffffff20;gap:16px}
#ce-app .ce-qr-view>button{margin-top:18px}
@container cocktail (max-width:580px){#ce-app .ce-cart{gap:14px;padding:16px}#ce-app .ce-header-tools{gap:6px}#ce-app .ce-dialog form>button{width:100%;margin:8px 0}#ce-app .ce-account-actions>button{flex:1 1 140px}#ce-app .ce-funds-history article{align-items:flex-start;flex-wrap:wrap}#ce-app .ce-wallet-selection{padding:18px;gap:14px}}
@media(prefers-reduced-transparency:reduce){#ce-app .ce-cart,#ce-app .ce-wallet-selection{background:#17201b;backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Open dialogs on a non-interactive title rather than selecting the first disclosure/input. */
#ce-app .ce-dialog h2[tabindex="-1"]:focus{outline:none;box-shadow:none}
#ce-app :is(button,a,input,select,summary):focus:not(:focus-visible){outline:none}
#ce-app :is(button,a,input,select,summary):focus-visible{outline:2px solid var(--ce-accent);outline-offset:4px}