/* Geometry and type ported from coffeeos-showcase-count-menus-preview.html. */
#showcase-count-dialog{position:fixed;inset:0 0 0 auto;margin:0;width:min(100%,440px);max-width:100%;height:100dvh;max-height:100dvh;padding:0;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);overflow:auto}
#showcase-count-dialog .count-preview{min-height:100%;display:flex;flex-direction:column;padding:16px 18px 24px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom));font-family:var(--font-ui);letter-spacing:0}
#showcase-count-dialog .count-topbar{margin-bottom:24px;min-height:48px;display:flex;justify-content:space-between;align-items:center;gap:8px}
#showcase-count-dialog .count-back{display:flex;gap:6px;align-items:center;color:var(--sand);font:600 .875rem/1.25rem var(--font-ui);padding:0;min-height:44px}
#showcase-count-dialog .count-logo{width:112px;height:35px;flex-shrink:0;background:var(--ink);mask:url('/ui-next/reliz-logo.png') center/contain no-repeat;-webkit-mask:url('/ui-next/reliz-logo.png') center/contain no-repeat}
#showcase-count-dialog .count-close{width:44px;height:44px;flex-shrink:0;border:1px solid var(--line);border-radius:12px;color:var(--sand);padding:10px}
#showcase-count-dialog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
#showcase-count-dialog #count-title{font:700 1.75rem/2.25rem var(--font-accent);letter-spacing:0;margin:0 0 8px;overflow-wrap:anywhere}
#showcase-count-dialog .count-subtitle{font:400 .9375rem/1.5rem var(--font-ui);color:var(--sand);margin:0 0 20px}
#showcase-count-dialog .count-intro{font:500 .875rem/1.25rem var(--font-ui);color:var(--sand);margin:0 0 20px}
#showcase-count-dialog .count-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:4px 0 16px}
#showcase-count-dialog .count-category-menu{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:8px;min-height:122px;padding:12px 10px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:600 .875rem/1.25rem var(--font-ui);min-width:0;overflow-wrap:anywhere}
#showcase-count-dialog .count-category-menu small{font:500 .75rem/1rem var(--font-service);color:var(--sand)}
#showcase-count-dialog .count-category-menu svg{width:18px;height:18px;margin-top:auto;align-self:flex-end;color:var(--sand)}
#showcase-count-dialog .count-end{margin-top:auto;padding-top:32px}
#showcase-count-dialog .count-card{padding:16px;border-radius:20px;margin:0;border:1px solid var(--line);background:var(--paper)}
#showcase-count-dialog .count-columns{display:flex;justify-content:space-between;color:var(--sand);font:500 .75rem/1rem var(--font-service);margin-bottom:16px;gap:12px}
#showcase-count-dialog .count-item{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:12px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
#showcase-count-dialog .count-item:last-child{border-bottom:0;padding-bottom:2px}
#showcase-count-dialog .count-name{display:block;font:600 1rem/1.5rem var(--font-ui);margin:0 0 4px;overflow-wrap:anywhere}
#showcase-count-dialog .count-calculated{font:500 .875rem/1.25rem var(--font-ui);color:var(--sand)}
#showcase-count-dialog .count-fact{width:72px;height:48px;min-width:0;border:1px solid var(--line);border-radius:12px;background:var(--field);text-align:center;color:var(--ink);font:600 1.25rem/1.75rem var(--font-ui);padding:8px;appearance:textfield}
#showcase-count-dialog input::-webkit-inner-spin-button,#showcase-count-dialog input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
#showcase-count-dialog .count-fact::placeholder{color:var(--sand)}
#showcase-count-dialog .count-state{margin-top:7px;font:500 .75rem/1rem var(--font-ui);display:flex;gap:5px;align-items:center}
#showcase-count-dialog .count-state svg{width:14px;height:14px}
#showcase-count-dialog .is-equal{color:var(--green)}#showcase-count-dialog .is-different{color:var(--warning)}
#showcase-count-dialog .count-result{padding:16px;background:var(--raised);border-radius:16px}
#showcase-count-dialog .count-result>div{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
#showcase-count-dialog .count-result strong{font:600 1rem/1.5rem var(--font-ui)}
#showcase-count-dialog .count-result span{font:500 .75rem/1rem var(--font-service);color:var(--sand)}
#showcase-count-dialog .count-result p,#showcase-count-dialog .count-review-item p{font:500 .875rem/1.25rem var(--font-ui);color:var(--sand);margin:6px 0 0}
#showcase-count-dialog .count-primary{width:100%;margin-top:16px;min-height:48px;border-radius:12px;background:var(--selected);border:1px solid #8b8e77;color:var(--ink);font:600 .875rem/1.25rem var(--font-ui);padding:12px}
#showcase-count-dialog .count-secondary{width:100%;margin-top:12px;min-height:48px;border:1px solid var(--line);border-radius:12px;font:600 .875rem/1.25rem var(--font-ui);color:var(--sand)}
#showcase-count-dialog .count-after{font:500 .75rem/1rem var(--font-ui);color:var(--sand);margin:12px 0 0;text-align:center}
#showcase-count-dialog .count-field{display:flex;flex-direction:column;gap:8px;font:500 .875rem/1.25rem var(--font-ui);margin:18px 0 0;min-width:0}
#showcase-count-dialog .count-field input,#showcase-count-dialog .count-field textarea{width:100%;max-width:100%;min-width:0;padding:12px;background:var(--field);border:1px solid var(--line);border-radius:12px;font:400 1rem/1.5rem var(--font-ui);color:var(--ink);min-height:48px}
#showcase-count-dialog .count-review-item{padding:16px 0;border-bottom:1px solid var(--line)}#showcase-count-dialog .count-review-item:first-child{padding-top:0}#showcase-count-dialog .count-review-item:last-child{border:0;padding-bottom:0}
#showcase-count-dialog .count-review-item strong{font:600 1rem/1.5rem var(--font-ui);overflow-wrap:anywhere}
#showcase-count-dialog .count-error{font:500 .875rem/1.25rem var(--font-ui);background:var(--error-surface);color:var(--danger);padding:12px;border-radius:12px;margin:12px 0 20px}
#showcase-count-dialog :is(button,input,textarea):focus-visible{outline:2px solid var(--sand);outline-offset:2px}
@media(min-width:761px){#showcase-count-dialog{border-radius:24px 0 0 24px}}