input[type=search]::-ms-clear {display:none; width:0; height:0;}
input[type=search]::-ms-reveal {display:none; width:0; height:0;}
input[type=search]::-webkit-search-decoration,
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-results-button,
input[type=search]::-webkit-search-results-decoration {display:none;}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance:none; margin:0;}
input[type=number] {-moz-appearance:textfield;}
input:-webkit-autofill::first-line, input:-webkit-autofill {font-family:inherit !important;}

/* EXAMPLE VARIABLES, MEANT TO BE REPLACED BY THE MAIN.CSS FILE */
:root {
    --gutter-width:15px;
    --header-height:50px;
    --font:-apple-system, BlinkMacSystemFont, sans-serif;
    --font-title:var(--font);
    --font-size:15px;
    --input-height:34px;
    --separator-height:1px;
    --shade-color:rgba(30, 31, 34, .8);
    --window-width:640px;
    --alert-width:300px;
    --bg-primary:#000;
    --bg-secondary:#222;
    --primary:#fff;
    --accent:#4169e1;
    --subtle:rgba(255, 255, 255, .1);
    --muted:#888;
    --radius:8px;
    --progress-bar-radius:999px;
    --input-color:#aaa;
    --success:#22c55e;
    --warning:#f59e0b;
    --error:#f33;
    --well:rgba(255, 255, 255, .05);
}

:root {
    --safe-area-inset-bottom:env(safe-area-inset-bottom);
}

.safe-padding {padding-bottom:var(--safe-area-inset-bottom);}

@keyframes spin {
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes fade {
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes alert {
    0% {opacity:0; transform:scale(0.9);}
    100% {opacity:1; transform:scale(1);}
}
@keyframes alertBackDrop {
    0% {background:rgba(0, 0, 0, 0);}
    100% {background:rgba(0, 0, 0, .8);}
}
@keyframes btnProgress {
    0% {transform:translateX(-100%);}
    100% {transform:translateX(0);}
}

html, body {overscroll-behavior:none; height:100%; overflow:hidden; position:relative; width:100%;}
body {
    margin:0;
    background:var(--bg-primary);
    cursor:default;
    font-family:var(--font), sans-serif;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    user-select:none;
}
* {box-sizing:border-box; outline:none; margin:0; font-synthesis:none;}
body, input, select, button {font-size:var(--font-size); padding:0; color:var(--primary);}
code {font-family:Inconsolata, "Courier New", monospace; color:var(--accent); background:var(--bg-secondary); padding:2px 5px; border-radius:2px;}
hr {border:none; border-top:var(--separator-height) solid var(--subtle); margin:0 var(--gutter-width);}
input {width:100%;}
button, select, input, textarea {border:none; outline:none; background:transparent; font-family:inherit;}
a {color:var(--accent); text-decoration:none; cursor:default;}
img, svg {display:block; max-width:100%;}
p {margin:0;}
.inactive {filter:grayscale(1) opacity(0.3);}
.material-symbols {font-variation-settings:"FILL" 1;}
.padding {padding:10px var(--gutter-width);}
.padding-horizontal {padding:0 var(--gutter-width);}
.full-width {width:100%;}

.global-loading {
    height:100vh;
    width:100vw;
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    z-index:100;
    background:var(--shade-color);
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
    gap:5px;
    text-transform:capitalize;
}

/* TEXT INPUT */
.text-input {display:flex; align-items:center; border-radius:calc(var(--radius) / 2); padding:0 calc(var(--gutter-width) / 2); overflow:hidden; background:var(--subtle); gap:5px;}
.text-input.search {border-radius:var(--radius);}
.text-input-icon {color:var(--muted);}
.text-input .text.disabled {opacity:.5;}

span.text-input-icon {font-weight:bold; padding-left:5px; font-size:16px;}
.text-input-spinner {margin:0 10px;}
i.text-input-clear {font-size:18px;}
.text-input .text {vertical-align:top; text-align:left; width:100%; padding:0 10px; position:relative; align-items:center; border:none; font-size:var(--font-size); font-family:inherit; background:transparent; color:inherit;}
.text-input textarea.text {padding:10px; outline:none; min-height:65px;}
/*.text-input.textarea-input {align-items:stretch;}*/
.text-input.textarea-input textarea.text {touch-action:pan-y; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; resize:vertical;}
.text-input.textarea-input textarea.text.auto-expand {max-height:33vh; overflow-y:auto; resize:none;}

.text-input .text-input-country {display:flex; align-items:center; padding:0 10px; height:34px; margin-left:-5px; gap:5px;}
.text-input .text-input-country.touched {background:#222; opacity:1;}
.text-input .text-input-country .emoji {font-size:18px;}

.text-input .meta {white-space:nowrap;}

/* CUSTOM KEYBOARD */
.keyboard {position:fixed; left:0; right:0; bottom:0;
    padding:8px max(8px, env(safe-area-inset-left)) calc(8px + var(--safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    background:var(--bg-primary); transform:translateY(100%);}
.keyboard-row {display:grid; gap:6px; max-width:900px; margin:0 auto 6px;}
.keyboard-row.top {grid-template-columns:repeat(10, minmax(0, 1fr));}
.keyboard-row.middle {grid-template-columns:repeat(9, minmax(0, 1fr)); max-width:810px;}
.keyboard-row.bottom {grid-template-columns:1.5fr repeat(7, minmax(0, 1fr)) 1.5fr;}
.keyboard-actions {display:flex; gap:6px; max-width:900px; margin:auto;}
.keyboard-actions .mode {flex:0 0 70px;}
.keyboard-actions .punctuation {flex:0 0 45px;}
.keyboard-actions .space {flex:1;}
.touchable.keyboard-key {height:clamp(38px, 6vw, 52px); border-radius:var(--radius); color:var(--primary); font-weight:bold; align-items:center; justify-content:center;}
.touchable.keyboard-key.letter, .touchable.keyboard-key.space {background:var(--bg-secondary);}
.keyboard-key.shift.active {color:var(--accent);}

/* NUMBER INPUT */
.number-input {display:flex; align-items:center; background:var(--accent); border-radius:calc(var(--radius) / 2); height:var(--input-height);}
.number-input-value {text-align:center; color:var(--bg-primary);}

/* SLIDER */
.slider {appearance:none; -webkit-appearance:none; height:20px; cursor:pointer;}
.slider:disabled {opacity:.5; cursor:default;}
.slider::-webkit-slider-runnable-track {height:5px; border-radius:var(--progress-bar-radius); background:linear-gradient(to right, var(--accent) var(--slider-percent), var(--subtle) var(--slider-percent));}
.slider::-webkit-slider-thumb {-webkit-appearance:none; width:20px; height:20px; margin-top:-7.5px; border-radius:50%; background:var(--accent);}
.slider::-moz-range-track {height:5px; border-radius:var(--progress-bar-radius); background:var(--subtle);}
.slider::-moz-range-progress {height:5px; border-radius:var(--progress-bar-radius); background:var(--accent);}
.slider::-moz-range-thumb {width:20px; height:20px; border:none; border-radius:50%; background:var(--accent);}
.slider-container {display:flex; flex-direction:column; gap:2px; width:100%;}
.slider-container.disabled .slider-labels {opacity:.5;}
.slider-labels {display:grid; grid-template-columns:repeat(3, 1fr); color:var(--muted); font-size:12px;}
.slider-labels span:nth-child(2) {color:var(--primary); font-weight:bold; text-align:center;}
.slider-labels span:last-child {text-align:right;}

/* PHONE INPUT */
.phone-input {display:grid; gap:12px; max-width:360px; width:100%;}
.phone-input .text-input {height:56px;}
.phone-input .text-input .text {font-size:28px; text-align:center;}

/* NUMBER PAD */
.number-pad {display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
.number-pad-key.btn {height:64px; font-size:28px;}

/* DATE INPUT CALENDAR */
.date-input {display:flex; flex-direction:column; gap:10px;}
.date-input-top {display:flex; align-items:center; justify-content:space-between; gap:10px;}
.date-input-title {font-weight:bold;}
.date-input-grid {display:grid; grid-template-columns:repeat(7, 1fr); gap:6px;}
.date-input-weekday {text-align:center; font-size:11px;}

.date-input-day {padding:10px 0 !important;}
.date-input-day.highlight-week {background:var(--subtle);}
.date-input-day.has-dot::after {content:""; position:absolute; left:50%; bottom:4px; width:4px; height:4px; border-radius:50%; background:var(--accent); transform:translateX(-50%);}
.date-input-day.active.has-dot::after {background:var(--bg-secondary);}

/* CHIPS */
.chips-input {display:flex; align-items:center; flex-wrap:wrap; gap:5px; flex:1; background:var(--subtle); border-radius:calc(var(--radius) / 2); padding:0 calc(var(--gutter-width) / 2); width:100%;}
.chips-input .tag-container {max-width:100%;}
.chips-entry {display:flex; align-items:center; flex:1; min-width:80px;}
.chips-entry-input {width:100%; min-width:80px; border:none; background:transparent; color:inherit; font:inherit; padding:4px 6px; outline:none;}
.chips-entry-input::placeholder {color:#666;}

.text {padding:0 10px; height:var(--input-height); border:none; width:100%;}
.text:-webkit-autofill,
.text:-webkit-autofill:hover,
.text:-webkit-autofill:focus,
.text:-webkit-autofill:active {-webkit-text-fill-color:var(--primary) !important; caret-color:var(--primary); background-color:var(--subtle) !important; transition:background-color 9999s ease-in-out 0s;}
.text::placeholder {opacity:0.3; color:var(--input-color);}

.text.select {background:var(--subtle); border-radius:calc(var(--radius) / 2); filter:saturate(0);}

/* TOUCHABLE */
.touchable {
    transition:opacity .1s;
    text-decoration:none;
    appearance:none;
    border:none;
    background:none;
    margin:0;
    touch-action:manipulation;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    display:flex;
}
button.touchable, a.touchable {cursor:pointer;}
.touchable.touched, .touchable.disabled {opacity:.3;}
.touchable.disabled, .touchable.disabled * {pointer-events:none;}
.touchable img {display:block;}
.touchable.disable-menu {user-select:none;}

/* HIGHLIGHT */
.touchable-highlight.touched {opacity:1; background:var(--subtle);}
.touchable-highlight.highlight, .touchable-highlight.active {background:var(--subtle);}

/* TOUCHABLE ROW */
.touchable-row {width:100%; text-align:left; white-space:normal; position:relative;}
.touchable-row.swipeable {overflow:hidden;}
.touchable-row.caret .touchable-row-body {padding-right:calc(var(--gutter-width) / 2);}
.touchable-row-body {display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter-width); gap:10px; position:relative; will-change:transform; min-height:44px; min-width:0;}
.touchable-row-swipe-actions {position:absolute; top:0; right:0; bottom:0; width:0; overflow:hidden; display:flex; justify-content:flex-end; align-items:stretch; -webkit-mask-image:linear-gradient(to right, transparent, #000 10px); mask-image:linear-gradient(to right, transparent, #000 10px);}
.touchable-row-swipe-actions-inner {display:flex; align-items:stretch; flex:0 0 auto; padding:5px var(--gutter-width);}

@media (min-width: 600px) {
    .touchable-row-swipe-actions-inner {padding-left:0;}
}

.touchable-row-swipe-actions .btn {height:100%; border:none; color:var(--primary);}

.touchable-row-button {flex:1; min-width:0; padding:10px 0; text-align:left; color:inherit; display:flex; align-items:center;}
.touchable-row-button.touched {opacity:1;}
.touchable-row.dragging > * {opacity:.3;}
.touchable-row-drag-handle {flex:0 0 24px; display:flex; align-items:center; justify-content:center; color:var(--muted); cursor:grab; user-select:none; touch-action:none; margin-left:calc(-1 * var(--gutter-width) / 2);}
.touchable-row-drag-handle:active {cursor:grabbing;}
.touchable-row.drop-before::before, .touchable-row.drop-after::after {content:""; position:absolute; left:var(--gutter-width); right:var(--gutter-width); height:2px; background:var(--accent); z-index:1;}
.touchable-row.drop-before::before {top:0;}
.touchable-row.drop-after::after {bottom:0;}

/* META */
.meta {color:var(--muted);}
.meta:empty {display:none;}
.meta i {font-size:16px;}

/* AVATAR */
.avatar {background:#000; position:relative; aspect-ratio:1; border-radius:100%;}
.avatar img {display:block; height:100%; width:100%; border-radius:50%;}
.avatar .badge {position:absolute; bottom:-2px; right:-2px; font-size:10px;}

/* CONNECTION INDICATOR */
.connection-indicator {pointer-events:none; position:absolute; top:35px; left:0; right:0; text-align:center;}
.connection-indicator .bubble {background:var(--bg-secondary); color:var(--primary); height:35px; padding:0 10px; border-radius:24px; display:inline-flex; align-items:center; gap:10px; text-transform:capitalize;}

/* BUTTONS */
.btn, .fab {--color:var(--accent);}
.btn {transition:opacity .15s; display:flex; height:var(--input-height); white-space:nowrap; font-size:var(--font-size); position:relative; border-radius:calc(var(--radius) / 2); overflow:hidden; padding:0 var(--gutter-width);}
.btn.outline {border:1px solid var(--color); color:var(--color);}
.btn.solid {background:var(--color); color:var(--bg-secondary);}
.btn.loading, .btn.disabled {opacity:.3; pointer-events:none;}
.btn.square {width:var(--input-height); padding:0; flex:0 0 var(--input-height);}
.btn.round {height:26px; width:26px; border-radius:50%; padding:0;}
.btn.round .material-symbols {font-size:20px;}
.btn.muted {opacity:.3;}
.btn i {color:inherit;}
.btn-inner {flex:1; text-align:center; display:flex; align-items:center; justify-content:center; height:100%; gap:5px;}
.btn.loading .btn-inner {opacity:0;}
.btn-layer {display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; right:0; bottom:0; gap:10px;}
.btn-progress {background:var(--color); opacity:.2; transform:translateX(0); transform-origin:left; animation:btnProgress linear forwards;}
.btn.solid .btn-progress {background:var(--bg-secondary);}

.btn-primary {--color:var(--accent); font-weight:bold;}
.btn-success, .fab-success {--color:var(--success);}
.btn-warning, .fab-warning {--color:var(--warning);}
.btn-error, .fab-error {--color:var(--error);}
.btn.btn-glass {--color:rgba(255, 255, 255, .3); background:var(--color); border:none; color:var(--primary); backdrop-filter:blur(2px);}
.btn.borderless {border:none;}
.btn.full-width {padding:0;}
/* SCROLLER */
.scroller-container {position:relative; overflow:hidden; width:100%; flex-shrink:0;}
.scroller-container.vertical {flex:1;}
.scroller-container.vertical > .scroller {display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;}
.scroller::-webkit-scrollbar {display:none;}
.scroller {overflow:hidden; height:100%; width:100%;}
.scroller-container.pills .scroller {display:flex; align-items:center; gap:10px;}

/* FLEX STACK LAYOUT */
.frame {height:100%; width:100%; overflow:hidden; flex:1;}
.spacer {display:flex; flex:1;}
.stack {display:flex;}
.stack:empty {display:none;}
.stack.v {flex-direction:column;}
.stack.h {flex-direction:row;}
.stack.z {position:relative; pointer-events:none;}
.stack.z > * {pointer-events:auto; position:absolute; top:0; left:0; right:0; bottom:0;}
.stack.distributed > * {flex:1; width:100%;}
.stack.h > .text {min-width:0;}
.stack.h > .text.select {width:auto; flex:1;}

@media (max-width:640px) {
    .stack.h.collapse {flex-direction:column;}
}

.spacing {gap:10px;}
.stack.safe {padding-bottom:var(--safe-area-inset-bottom);}

.stack.align-leading {align-items:flex-start;}
.stack.align-trailing {align-items:flex-end;}
.stack.align-center {align-items:center;}

.stack.justify-leading {justify-content:flex-start;}
.stack.justify-trailing {justify-content:flex-end;}
.stack.justify-center {justify-content:center;}
.stack.justify-between {justify-content:space-between;}

/* ROW */
.row {display:flex; gap:10px; align-items:center; flex:1 1 0; min-width:0;}
.row.highlight {background:var(--bg-secondary);}
.row-left {display:flex; align-items:center; justify-content:center;}
.row-left:empty {display:none;}
.row-left .avatar {height:34px; width:34px;}
.row-left > img {height:24px; width:24px;}
.row-body {flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; gap:10px; width:100%; align-items:flex-start;}
.row-header {width:100%; overflow:hidden; flex:1;}
.row-title > .meta:before {content:"·"; margin:0 5px;}
.row-title, .row-subtitle {text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
.row.multi-line .row-title, .row.multi-line .row-subtitle {text-overflow:clip; overflow:visible; white-space:normal;}
.row-subtitle {color:var(--primary); font-size:calc(var(--font-size) - 2px);}
.row-subtitle i {font-size:16px;}
.row-subtitle ul {padding-left:var(--gutter-width);}

.row .text-input {width:200px;}

/* Pull Indicator */
.scroller-pull {position:absolute; height:70px; top:0; left:0; right:0; pointer-events:none; z-index:1; overflow:hidden;}
.pull-indicator {background:var(--accent); height:40px; width:40px; border-radius:20px; margin:-40px auto 0 auto; opacity:0; display:flex; align-items:center; justify-content:center;}
.pull-indicator i {color:var(--bg-secondary);}

/* Percent */
.percent-bar {background:rgba(255, 255, 255, .1); display:block; height:5px; width:100%; border-radius:var(--progress-bar-radius); position:relative; overflow:hidden;}
.percent-bar-inner, .percent-bar-segment {height:5px; background:var(--accent); border-radius:var(--progress-bar-radius);}
.percent-bar-segment {position:absolute;}

/* PROGRESS INDICATOR */
.progress-indicator {border-radius:50%; width:20px; height:20px; min-width:20px; border:2px solid rgba(255, 255, 255, .1); border-left:2px solid #fff; animation:spin 2s infinite linear;}

/* PROGRESS RING */
.progress-ring {position:relative;}
.progress-ring-content {position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;}

/* ACTIVITY INDICATOR */
.activity-indicator {display:block; position:relative; min-width:16px; min-height:16px;}
.activity-indicator div {animation:spin 1.2s linear infinite; display:block; position:absolute; top:0; background:var(--primary);}

/* SHADES */
.shade {position:absolute; top:0; left:0; bottom:0; right:0; background:var(--shade-color); opacity:0; will-change:opacity;}
.shade-bottom-sheet {background:rgba(10, 0, 10, .8); pointer-events:all;}
.handle {position:absolute; top:5px; left:50%; margin-left:-20px; width:40px; height:4px; border-radius:5px; background:#999;}

/* DIFFERENT STACK TYPES */
.layer {position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; color:var(--primary);}
.layer-inactive {pointer-events:none;}

/* BLACK OUT */
.layer-fullscreen .shade {background:#000;}
.layer-fullscreen .window {box-shadow:none;}

.card {position:absolute; top:0; left:0; bottom:0; right:0; height:100%; width:100vw; background:var(--bg-primary); display:flex; flex-direction:column; pointer-events:auto; will-change:transform;}
.card.animate {transform:translateX(100%);}
.card-content {flex:1; display:flex; min-height:0; overflow:hidden;}
.card-sidebar {display:none;}
.card-main-sidebar {display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--subtle);}
.card > .header {position:relative; z-index:3;}
.card-body {flex:1; padding-bottom:env(keyboard-inset-height); display:flex; flex-direction:column; min-height:0; position:relative; overflow:hidden;}
.fullscreen {position:absolute; top:0; left:0; right:0; background:#000; height:100%; display:flex; flex-direction:column;}
.window {position:absolute; top:100%; left:0; right:0; height:100svh; pointer-events:auto; max-width:100%; display:flex; flex-direction:column; margin:0 auto; overflow:hidden; touch-action:pan-y; will-change:transform;}
.window-modal {height:calc(100% - 10px); width:var(--window-width); background:var(--bg-secondary); border-top-left-radius:var(--radius); border-top-right-radius:var(--radius);}

.reveal {pointer-events:auto; overflow:hidden; background:var(--accent); will-change:clip-path;}

/* FILE UPLOAD */
.drop-zone {position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(255, 255, 255, .2); pointer-events:none;}
.image-upload {display:block; position:relative; width:100%; padding:0; border:none; border-radius:calc(var(--radius) / 2); background:var(--subtle); cursor:pointer; text-align:inherit; overflow:hidden; aspect-ratio:16 / 9;}
.image-upload.dropping {outline:2px solid var(--accent);}
.image-upload-input {display:none;}
.image-upload-surface {height:100%; width:100%; position:relative; background:rgba(255, 255, 255, .06); background-size:contain;}
.image-upload.loading .image-upload-surface:after {content:""; position:absolute; inset:0; background:rgba(0, 0, 0, .35);}
.image-upload-surface .img {height:100%; object-fit:contain; object-position:center; margin:0 auto;}
.image-upload-loading {position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;}
.image-upload-corner {position:absolute; right:10px; bottom:10px; height:34px; width:34px; border-radius:17px; display:flex; align-items:center; justify-content:center; background:var(--accent); color:var(--bg-primary);}
.image-upload:focus-visible {outline:2px solid rgba(255, 255, 255, .5); outline-offset:2px;}

/* HEADER */
.header {
    display:flex;
    align-items:center;
    justify-content:space-around;
    min-height:var(--header-height);
    padding-left:env(titlebar-area-x, 0);
    padding-right:calc(100% - env(titlebar-area-width, 100%) - env(titlebar-area-x, 0));
}
.header-middle {flex:1; min-width:0;}
.header-title {font-size:calc(var(--font-size) + 2px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-title), sans-serif;}
.header-subtitle {margin-top:3px;}
.header-image {width:36px; height:36px; flex-shrink:0; border-radius:var(--border-radius); overflow:hidden;}
.header-image > * {width:100%; height:100%;}

/* HEADER BUTTONS */
.header-spacer {min-width:var(--header-height); display:flex; justify-content:center; align-items:center;}
.header-button {display:flex; font-size:16px; color:var(--primary); min-width:var(--header-height); height:var(--header-height); position:relative; justify-content:center; align-items:center; gap:3px;}
.header-text-button {padding:0 6px;}
.header-text-button .header-button-title {display:flex; align-items:center; height:36px; padding:0 14px; border-radius:18px; background:var(--primary); color:var(--bg-primary); white-space:nowrap;}
.header-button .avatar {height:24px; width:24px;}
.header-button.card-sidebar-toggle .touchable {width:36px; height:36px; background:var(--accent); display:flex; align-items:center; justify-content:center; border-radius:50%; color:var(--bg-primary);}
.header-button .badge {background:var(--error); padding:0 5px; font-size:calc(var(--font-size) - 4px); border-radius:8px; height:16px;}

/* HEADER SEARCH AREA */
.header-search {padding:0 var(--gutter-width) 10px var(--gutter-width); display:flex; flex-direction:column; gap:10px;}
.header-search > .scroller-container.horizontal {margin:0 calc(-1 * var(--gutter-width)); width:calc(100% + (2 * var(--gutter-width)));}
.header-search > .scroller-container.horizontal > .scroller {padding:0 var(--gutter-width);}

/* DROPDOWNS */
.dropdown {position:relative;}
.dropdown-content {position:absolute; min-width:150px; z-index:2; background-color:var(--bg-secondary); border-radius:4px; overflow:hidden; opacity:0; transition:all .1s; color:var(--primary); box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);}
.dropdown-content.visible {opacity:1;}
.dropdown-content.hidden {opacity:0; pointer-events:none;}
.dropdown-content.top-left {top:100%; left:0;}
.dropdown-content.top-right {top:100%; right:0;}
.dropdown-content.bottom-right {bottom:100%; right:0;}
.dropdown-content .material-symbols {font-size:16px;}
.dropdown-item {justify-content:flex-start; min-height:unset;}

/* TOAST */
.toast-container {position:fixed; bottom:20%; left:0; width:100%; text-align:center;}
.toast {padding:7px 15px; display:inline-block; background:#fff; color:#000; border-radius:calc(var(--radius) / 2);}

/* VIEW PAGER */
.pager {display:flex; position:relative; flex-shrink:0;}
.pager-content {flex:1; min-height:0; min-width:0; display:flex;}
.pager.show-sidebar-always > .pager-tabs {display:none;}
.pager .card-sidebar {position:relative;}
.pager .card-sidebar .list {position:relative;}
.pager-sidebar-accent {position:absolute; left:0; right:0; top:0; display:flex; align-items:center; justify-content:flex-end; pointer-events:none; will-change:transform, height; border:2px solid var(--accent); border-radius:var(--radius);}
.pager-scroller {flex:1; position:relative; overflow:hidden; display:flex; height:100%;}
.pager.vertical {touch-action:pan-x; width:100%; min-width:0;}
.pager.vertical .pager-scroller {flex-direction:column;}
.pager.horizontal {touch-action:pan-y; flex-direction:column;}
.pager-page {width:100%; position:relative; white-space:normal; overflow:hidden; flex:0 0 100%; flex-shrink:0; display:flex; flex-direction:column;}
.pager-page .header-search {padding:10px var(--gutter-width);}

/* VIEW PAGER TABS */
.pager-tabs {display:flex; position:relative; white-space:nowrap; overflow:hidden; height:32px;}
.pager-tab {flex:1; position:relative; height:100%;}
.pager-tab-title {height:100%; padding:0 10px; opacity:1; color:var(--primary); display:flex; gap:10px; justify-content:center; align-items:center;}
.pager-tab-badge {display:flex; height:16px; min-width:16px; border-radius:var(--radius); background:var(--error); align-items:center; justify-content:center; font-size:10px;}

.pager-tab-indicator-track {position:absolute; height:var(--separator-height); bottom:0; left:0; right:0; overflow:hidden;}
.pager-tab-indicator {position:absolute; height:inherit; background:var(--accent); bottom:0; left:100%; width:100%;}

/* VIEW PAGER DOTS */
.pager-dots {position:absolute; bottom:10px; left:0; right:0; gap:5px; display:flex; justify-content:center;}
.pager-dot {height:6px; width:6px; background:rgba(128, 128, 128, .5); border-radius:3px;}
.pager-buttons {position:absolute; inset:10px; pointer-events:none; display:flex; justify-content:space-between; align-items:center; gap:10px;}
.pager-button {font-size:24px; pointer-events:auto;}

/* LIST */
.list {width:100%; display:flex; flex-direction:column;}
.padding .list {margin:0 calc(var(--gutter-width) * -1); width:calc(100% + 2 * var(--gutter-width));}
.list > .touchable-row {border-bottom:2px solid var(--subtle); height:44px;}

.list-header {border-bottom:var(--separator-height) solid var(--subtle); display:flex; justify-content:space-between; align-items:center;}
.list-title {padding:10px var(--gutter-width); font-weight:bold; color:var(--accent); font-size:calc(var(--font-size) - 2px);}
.list-footer {padding:20px 0; text-align:center; color:var(--muted);}
.list.grid .list-body {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));}
.list.grid .list-body > hr {display:none;}
.list.grid .list-footer {grid-column:1 / -1;}

.list.well {padding:0 var(--gutter-width);}
.list.well .list-body {background:var(--subtle); border-radius:var(--radius); overflow:hidden;}
.list.well .list-header {border-bottom:none;}

.horizontal-list {min-width:0;}
.horizontal-list > .list-body > .scroller {display:flex; flex-wrap:nowrap;}
.horizontal-list-item {box-sizing:border-box; flex:0 0 300px; width:300px; min-width:0;}
.horizontal-list > .show-separators > .scroller > .horizontal-list-item + .horizontal-list-item {border-inline-start:var(--separator-height) solid var(--subtle);}
.horizontal-list.well.safe-padding {padding-bottom:var(--safe-area-inset-bottom);}

@media (max-width:699px) {
    .list.grid .list-body {display:block;}

    .list.grid .list-body > hr {display:block;}
}

/* PLACEHOLDER */
.placeholder {padding:40px 20px; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; flex:1; width:100%; height:100%; gap:5px;}
.placeholder-message {opacity:.5;}

/* ACTION SHEET */
.sheet {background-color:var(--bg-secondary); pointer-events:all; padding-bottom:var(--safe-area-inset-bottom); border-top-right-radius:var(--radius); border-top-left-radius:var(--radius);}
.action-sheet-title {padding:10px; text-align:center; border-bottom:var(--separator-height) solid var(--subtle); margin:0 var(--gutter-width);}
.sheet .touchable-row .material-symbols {font-size:16px;}
.sheet-container {max-width:420px; margin:0 auto; position:absolute; top:100%; left:0; right:0; max-height:calc(100vh - 10px);}

/* SEGMENTED CONTROLLER */
.segmented {padding:2px; height:30px; flex:0 0 auto; background:var(--muted); display:inline-flex; align-items:center; border-radius:var(--radius); white-space:nowrap; position:relative; font-family:var(--font), sans-serif;}
.segmented .touchable {flex:1; height:100%; color:var(--accent); padding:2px 15px; position:relative; text-align:center; display:flex; align-items:center; justify-content:center; gap:4px;}
.segmented .touchable.active {color:var(--bg-primary); opacity:1;}
.segmented .separator {width:1px; height:12px; background:var(--subtle);}
.segmented-indicator {height:calc(100% - 4px); border-radius:calc(var(--radius) - 2px); background:var(--primary); position:absolute; left:0; top:2px; outline:2px solid transparent;}
.segmented-badge {background:var(--error); color:#fff; padding:0 4px; min-width:14px; height:14px; border-radius:7px; font-size:calc(var(--font-size) - 5px); line-height:14px;}

/* BREADCRUMBS */
.breadcrumbs {white-space:nowrap; background:#323; height:36px;}
.breadcrumbs .touchable {color:#fff;}
.breadcrumbs .scroller {padding:0 var(--gutter-width); display:flex; gap:5px; align-items:center;}
.breadcrumbs .material-symbols {font-size:16px;}
.breadcrumbs span {color:#545;}

/* GALLERY */
.gallery-item {flex:1; height:100%; display:flex; align-items:center; justify-content:center;}
.gallery-item img {max-width:100%; max-height:100%; -webkit-user-select:none;}

/* ALERT */
.alert-backdrop {pointer-events:all; background:rgba(0, 0, 0, 0); transition:background 300ms; animation:alertBackDrop 300ms;}
.alert-backdrop.visible {background:rgba(0, 0, 0, .8);}
.alert-container {display:flex; align-items:center; justify-content:center; position:absolute; top:0; left:0; bottom:0; right:0;}
.alert {width:var(--alert-width); max-height:300px; background:var(--bg-secondary); transition:all .2s; opacity:0; transform:scale(.9); pointer-events:none; border-radius:var(--radius); display:flex; flex-direction:column; overflow:hidden;}
.no-max-height {max-height:none;}
.alert.visible {opacity:1; transform:scale(1); animation:alert .2s; pointer-events:all;}

.alert-top {padding:10px var(--gutter-width); text-align:center; gap:10px; display:flex; flex-direction:column; overflow:auto; flex-shrink:0;}
.alert-title {font-size:calc(var(--font-size) + 2px); font-weight:bold;}
.alert-content {display:flex; flex-direction:column; min-height:0;}
.alert-pin-value {min-height:56px; display:flex; align-items:center; justify-content:center; background:var(--subtle); border-radius:calc(var(--radius) / 2); font-size:28px;}
.alert-bottom {border-top:1px solid var(--subtle);}
.alert-buttons.horizontal {flex-direction:row;}
.alert-button {padding:10px; align-items:center; justify-content:center; gap:10px; width:100%; display:flex; background:var(--bg-secondary);}
.alert-button.destructive {color:var(--error); border-color:var(--error);}
.alert-bottom > .scroller {height:auto; max-height:200px;}

/* CHECKBOX */
.toggle-check {height:20px; width:20px; min-width:20px; display:flex; align-items:center; justify-content:center; border:2px solid var(--muted); color:#fff; border-radius:calc(var(--radius) / 2); flex-shrink:0;}
.toggle-check.active, .toggle-check.undetermined {background-color:var(--accent); border:none; color:var(--bg-primary);}
.toggle-check .material-symbols {font-size:20px; font-weight:600;}

/* CIRCLE CHECK */
.valid-icon {display:flex; align-items:center; justify-content:center; border-radius:10px; height:20px; width:20px; min-width:20px; background:var(--muted);}
.valid-icon.active.valid {background-color:#295;}
.valid-icon.active.invalid {background-color:#f00;}
.valid-icon i {color:#fff; font-size:16px;}

/* TOGGLE BUTTON */
.toggle-row {display:flex; gap:10px; align-items:center;}

/* RADIO */
.radio-btn.touched {background:#000;}
.radio-btn .dot {height:20px; width:20px; margin-right:10px; border:1px solid #999; border-radius:10px; padding:2px; transition:all .1s;}
.radio-btn .dot-inside {height:14px; width:14px; border-radius:7px; transform:scale(0); transition:all .1s;}
.radio-btn.active .dot {border-color:#295;}
.radio-btn.active .dot-inside {background:#295; transform:scale(1);}
.radio-btn i {font-size:16px;}
.radio-top {display:flex; align-items:center;}
.radio-subtitle {color:#888; padding-left:30px;}

/* FILTER BUTTONS */
.filter-button {background:var(--muted); height:30px; border-radius:calc(var(--radius) / 2); padding:0 10px; display:inline-flex; align-items:center; gap:5px; color:var(--primary); white-space:nowrap; flex-shrink:0; font-size:calc(var(--font-size) - 2px); backdrop-filter:blur(4px);}
.filter-button.active {background:var(--primary); color:var(--bg-primary);}
.filter-button .avatar {height:20px; width:20px;}
i.filter-button-caret {margin:0 -4px; font-size:18px;}

/* FAB */
.fab-layout {flex:1; height:100%; width:100%; overflow:hidden; position:relative; display:flex;}
.fab-container {display:flex; position:absolute; bottom:0; right:0; padding:0 20px calc(var(--safe-area-inset-bottom) + 20px) 0; gap:10px; justify-content:flex-end; align-items:flex-end; flex-direction:column; pointer-events:none;}
.fab-container > * {pointer-events:auto;}

.fab {height:54px; border-radius:27px; transition:background-color .2s; white-space:nowrap; z-index:2; box-shadow:0 2px 8px rgba(0, 0, 0, .2); font-size:18px; background:transparent; position:relative; display:flex;}
.fab.round {width:54px; padding:0;}
.fab.inactive {opacity:0.5;}
.fab-halo {display:none; position:absolute; inset:0; pointer-events:none; z-index:-1; animation:fabPulseFade 1.6s ease-out infinite; will-change:opacity;}
.fab.pulse .fab-halo {display:block;}
/* Expand a filled capsule by 12px without stretching its straight edges sideways. */
.fab-halo::before, .fab-halo::after, .fab-halo > span {position:absolute; top:0; height:54px; background:var(--color); animation:fabPulse 1.6s ease-out infinite; will-change:transform;}
.fab-halo::before, .fab-halo::after {content:""; width:54px; border-radius:50%;}
.fab-halo::before {left:0; clip-path:inset(0 50% 0 0);}
.fab-halo::after {right:0; clip-path:inset(0 0 0 50%);}
.fab-halo > span {left:27px; right:27px; animation-name:fabPulseEdges;}

@keyframes fabPulse {
    0% {transform:translateZ(0) scale(1);}
    100% {transform:translateZ(0) scale(1.444444);}
}

@keyframes fabPulseEdges {
    0% {transform:translateZ(0) scaleY(1);}
    100% {transform:translateZ(0) scaleY(1.444444);}
}

@keyframes fabPulseFade {
    0% {opacity:.7;}
    100% {opacity:0;}
}

@media (prefers-reduced-motion:reduce) {
    .fab.pulse .fab-halo {display:none;}
}

.fab-content {height:100%; display:flex; align-items:center; justify-content:center; color:var(--bg-primary); gap:10px; position:relative; background:#fff; border-radius:inherit; overflow:hidden; transform:translateZ(0);}
.fab-body {display:flex; align-items:center; justify-content:center; gap:10px; height:100%; background:var(--color); padding:0 15px; border-radius:0 27px 27px 0;}
.fab-detail {padding-right:15px;}

.fab.loading {background:var(--primary);}
.fab.loading .fab-content {opacity:0;}
.fab .activity-indicator {position:absolute; top:50%; left:50%; margin:-8px 0 0 -8px;}

/* TAG */
.tags-scroller .scroller {display:flex; gap:10px; align-items:center; white-space:nowrap;}
.tag-container {display:inline-flex; align-items:center; border-radius:11px; overflow:hidden; background:rgba(255, 255, 255, .1); flex-shrink:0;}
.tag i {font-size:16px;}
.tag, .ribbon-container {padding:0 8px; display:inline-flex; align-items:center; height:24px; justify-content:center; font-size:calc(var(--font-size) - 3px); color:var(--primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; gap:5px; position:relative; z-index:1;}
.tag {border-radius:20px; background:var(--muted); border:2px solid transparent; display:flex; color:#fff;}
.tag-count {height:16px; min-width:16px; border-radius:10px; background:var(--primary); color:var(--bg-primary); text-align:center; font-size:10px; line-height:16px; font-weight:bold; padding:0 4px; margin-right:-5px;}
.tag-meta {padding:0 10px; margin-left:-5px; font-size:10px;}
.tag-container .activity-indicator {margin:0 5px;}
.tag-progress {position:absolute; top:0; left:0; height:100%; background:var(--primary); opacity:0.2;}

.ribbon-container {transform:skewX(-10deg);}
.ribbon {transform:skewX(10deg); font-size:12px;}

/* EMOJI */
.emoji {font-family:"Apple Color Emoji", sans-serif; font-size:24px; line-height:1em;}

/* PILL */
.pill {padding:0 7px; background:#333; color:rgba(255, 255, 255, .8); border-radius:10px; font-size:10px; text-transform:capitalize; line-height:1.5;}

/* CORNER DIALOG */
.corner-dialog {position:absolute; bottom:20px; right:20px; background:#111; border-radius:var(--radius);}
.corner-dialog-title {display:flex; justify-content:space-between; padding:10px; align-items:center;}

/* NOTIFICATION */
.poon-notifications {padding:10px; font-size:13px;}
.poon-notifications .notification {background:var(--subtle); padding:14px; border-radius:24px; backdrop-filter:blur(4px); pointer-events:auto; display:flex; gap:14px; align-items:center; justify-content:space-between; margin:0 auto 10px auto; max-width:400px;}
.notification-middle {flex:1;}
.poon-notifications .notification-icon {width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--bg-primary); border-radius:9px;}
.poon-notifications .notification-title {font-weight:bold;}
.poon-notifications .notification-close {display:none;}

/* SORT FILTER BUTTON */
.sort-filter {height:40px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--gutter-width); width:100%; color:var(--accent); flex-shrink:0;}
.sort-filter-label {color:var(--accent);}
.sort-filter-value {font-weight:bold; color:var(--primary);}

/* IMAGE */
.img {position:relative; flex-shrink:0;}
.img-real, .img-inside {position:absolute; top:0; left:0; height:100%; width:100%;}
.img.cover .img-real {object-fit:cover;}
.img.contain .img-real {object-fit:contain;}
.img-inside {display:flex; align-items:center; justify-content:center;}
.img.round .img-real {border-radius:calc(var(--radius) / 2);}

.img .badge {position:absolute; right:-7px; bottom:-6px; display:flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px; border-radius:50%; background:var(--error); color:#fff; font-size:12px; font-weight:bold; line-height:1; box-shadow:0 0 2px rgba(0, 0, 0, .5);}

.form-group {width:100%;}
.form-group-top {margin-bottom:5px;}
.form-group-top label {display:block; font-weight:bold;}
.form-group-header {display:flex; justify-content:space-between;}
.form-group-body {display:flex; gap:10px; flex-direction:column;}
.form-group.well {padding:10px; background:var(--well); border-radius:var(--radius);}

/* READ MORE */
.read-more {padding:0 var(--gutter-width); display:flex; white-space:nowrap; gap:10px;}
.read-more-content {overflow:hidden; text-overflow:ellipsis; min-width:0;}
.read-more .touchable {color:var(--accent);}

/* SPRINGBOARD */
.springboard {display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); padding:10px var(--gutter-width); gap:10px; width:100%; max-width:640px; margin:0 auto;}
.springboard-icon {height:100px; min-width:0; width:100%; display:flex; flex-direction:column; gap:5px; color:var(--primary); align-items:center; justify-content:center;}
.springboard-icon .material-symbols {color:#fff; font-size:28px;}
.springboard-icon .icon-frame {background:var(--accent); border-radius:50%; height:50px; width:50px; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.springboard-icon .icon-frame .img {height:100%; width:100%;}
.springboard-icon-name {text-align:center; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; min-width:0; width:100%; max-width:100%; font-size:calc(var(--font-size) - 2px);}

/* BANNER */
.banner {background:var(--error); color:var(--primary); font-size:12px; height:24px; padding:0 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; min-height:1px;}
.banner-body {display:flex; gap:5px; align-items:center;}
.banner-body > .material-symbols {font-size:16px;}

/* INFO (Help Text) */
.info {display:flex; gap:10px; flex-direction:row; align-items:center; color:#ff8;}

/* TIMELINE */
.timeline {padding:0 10px; display:flex; flex-direction:column;}
.timeline-item {display:flex;}

/* TIMELINE - LEFT SECTION */
.timeline-item-left {display:flex; align-items:center; flex-direction:column;}
.timeline-item-icon {background:var(--subtle); border-radius:50%; height:24px; width:24px; display:flex; align-items:center; justify-content:center;}
.timeline-item-icon .material-symbols {font-size:16px;}
.timeline-item-line {flex:1; width:2px; background:var(--subtle);}
.timeline-item-line.top {min-height:10px; flex:0;}
.timeline-item:first-child .timeline-item-line:first-child, .timeline-item:last-child .timeline-item-line:last-child {opacity:0;}

/* TIMELINE - RIGHT SECTION */
.timeline-item-title {height:24px; display:flex; align-items:center; justify-content:space-between;}
.timeline-item.disabled .timeline-item-title {opacity:.3;}
.timeline-item-right {padding:10px; flex:1; display:flex; flex-direction:column; gap:10px;}

/* DRAWER */
.drawer-container {height:100vh; width:100vw; display:flex; flex-direction:row;}
.drawer-menu {width:200px; min-width:200px; max-width:200px; height:100%; background:#000;}
@media (max-width:699px) {
    .drawer-menu {position:absolute; top:0; bottom:0; left:-200px; height:100%; z-index:1;}
}
.drawer-viewport {height:100%; width:100%;}

@media (max-width:799px) {
    .card-main-sidebar {position:absolute; top:calc(var(--header-height) - 2px); right:0; bottom:80px; width:280px; z-index:8; transform:translateX(100%); transition:transform .2s ease; will-change:transform; border-radius:var(--radius); background:var(--bg-secondary);}

    .card-main-sidebar.visible {transform:translateX(0);}
}

@media (min-width:800px) {
    .touchable-row.swipeable {display:flex; align-items:stretch; overflow:visible;}

    .touchable-row.swipeable .touchable-row-body {order:1; flex:1; transform:none !important; will-change:auto;}

    .touchable-row-swipe-actions {position:static; order:2; width:auto !important; overflow:visible; -webkit-mask-image:none; mask-image:none;}
}

@media (min-width:800px) {
    .card-sidebar {display:flex; flex-direction:column; width:280px; overflow:hidden; margin:0 var(--gutter-width) 10px; background:var(--subtle); border-radius:var(--radius);}

    .pager .sidebar {width:170px;}

    .card-sidebar-toggle {display:none;}

    .pager.with-sidebar > .pager-tabs {display:none;}

    .pager.with-sidebar .card-sidebar {display:flex;}
}
.pager .card-sidebar {width:210px;}

/* CHAT BUBBLES */
.bubble-user, .bubble-other {padding:10px; background:var(--subtle); border-radius:var(--radius); max-width:90%; position:relative;}
.bubble-user::after, .bubble-other::after {content:""; position:absolute; bottom:0; width:0; height:0; border-top:8px solid transparent;}

.bubble-user {border-bottom-right-radius:0;}
.bubble-user::after {right:-8px; border-left:8px solid var(--subtle);}

.bubble-other {border-bottom-left-radius:0;}
.bubble-other::after {left:-8px; border-right:8px solid var(--subtle);}

.bubble-toolbar {display:flex; gap:10px;}
.bubble-toolbar .material-symbols {font-size:16px; color:var(--accent);}

/* OBJECTS INSIDE CHAT BUBBLES */
.bubble-content {display:flex; flex-direction:column; gap:10px; user-select:text;}
.bubble-timestamp {align-self:flex-end; color:var(--muted); font-size:11px; line-height:1;}
.bubble-content .img {min-width:150px;}
.bubble-content table {width:100%; border-collapse:collapse; font-size:calc(var(--font-size) - 2px); overflow:hidden; border-radius:var(--radius); background:var(--subtle);}
.bubble-content th, .bubble-content td {padding:6px 8px;}
.bubble-content th {font-weight:bold;}
.bubble-content tr:nth-child(odd) td {background:rgba(0, 0, 0, .2);}

/* PAGE TITLE */
.page-title .img {height:100px; width:100px;}
.page-title h1 {font-size:calc(var(--font-size) + 4px);}
.page-title h2 {color:var(--accent); font-size:inherit;}

/* SIDEBAR LAYOUT */
.sidebar-layout {display:flex; gap:20px; flex:1;}
.sidebar-layout-sidebar {flex:none; padding:0 var(--gutter-width) 10px; display:flex; flex-direction:column; min-width:300px;}
.sidebar-layout-sidebar-content {background:var(--subtle); border-radius:var(--radius); flex:1; display:flex; overflow:hidden;}
.sidebar-layout-main {flex:1;}

@media (max-width:640px) {
    .sidebar-layout-sidebar-content {flex:none;}
}

/* RRWEB */
.replayer-wrapper {position:relative}
.replayer-mouse {position:absolute;width:20px;height:20px;transition:left .05s linear, top .05s linear;background-size:contain;background-position:center center;background-repeat:no-repeat;background-image:url(data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjMDAwMDAwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDUwIDUwIiB4PSIwcHgiIHk9IjBweCI+PHRpdGxlPkRlc2lnbl90bnA8L3RpdGxlPjxwYXRoIGQ9Ik00OC43MSw0Mi45MUwzNC4wOCwyOC4yOSw0NC4zMywxOEExLDEsMCwwLDAsNDQsMTYuMzlMMi4zNSwxLjA2QTEsMSwwLDAsMCwxLjA2LDIuMzVMMTYuMzksNDRhMSwxLDAsMCwwLDEuNjUuMzZMMjguMjksMzQuMDgsNDIuOTEsNDguNzFhMSwxLDAsMCwwLDEuNDEsMGw0LjM4LTQuMzhBMSwxLDAsMCwwLDQ4LjcxLDQyLjkxWm0tNS4wOSwzLjY3TDI5LDMyYTEsMSwwLDAsMC0xLjQxLDBsLTkuODUsOS44NUwzLjY5LDMuNjlsMzguMTIsMTRMMzIsMjcuNThBMSwxLDAsMCwwLDMyLDI5TDQ2LjU5LDQzLjYyWiI+PC9wYXRoPjwvc3ZnPg==);border-color:transparent}
.replayer-mouse:after {content:"";display:inline-block;width:20px;height:20px;background:#4950f6;border-radius:100%;transform:translate(-50%, -50%);opacity:.3}
.replayer-mouse.active:after {animation:click .2s ease-in-out 1}
.replayer-mouse.touch-device {background-image:none;width:70px;height:70px;border-width:4px;border-style:solid;border-radius:100%;margin-left:-37px;margin-top:-37px;border-color:#4950f600;transition:left 0s linear, top 0s linear, border-color .2s ease-in-out}
.replayer-mouse.touch-device.touch-active {border-color:#4950f6;transition:left .25s linear, top .25s linear, border-color .2s ease-in-out}
.replayer-mouse.touch-device:after {opacity:0}
.replayer-mouse.touch-device.active:after {animation:touch-click .2s ease-in-out 1}
.replayer-mouse-tail {position:absolute;pointer-events:none}
@keyframes click {
    0% {opacity:.3;width:20px;height:20px}
    50% {opacity:.5;width:10px;height:10px}
}
@keyframes touch-click {
    0% {opacity:0;width:20px;height:20px}
    50% {opacity:.5;width:10px;height:10px}
}.event-calendar {height:100%; min-height:0; display:flex; flex-direction:column; background:var(--bg-primary);}
.event-calendar-top {display:flex; align-items:center; gap:10px; padding:10px var(--gutter-width); border-bottom:var(--separator-height) solid var(--subtle);}
.event-calendar-top .select {max-width:130px;}
.event-calendar-bottom {padding:10px var(--gutter-width); padding-bottom:calc(10px + var(--safe-area-inset-bottom)); border-top:var(--separator-height) solid var(--subtle);}
.event-calendar-intervals {gap:6px;}
.event-calendar-intervals .btn {flex:1;}
.event-calendar-intervals .btn {text-transform:capitalize;}
.event-calendar-scroll {flex:1; min-height:0;}
.event-calendar-year-grid {display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:12px; padding:10px var(--gutter-width);}
.event-calendar-month-cell {background:var(--bg-secondary); border-radius:calc(var(--radius) / 2); overflow:hidden;}
.event-calendar-month-title {font-weight:bold; padding:10px; color:var(--accent); display:flex; align-items:center; gap:6px;}
.event-calendar-month-cell.has-events .event-calendar-month-title::after {content:''; width:5px; height:5px; border-radius:50%; background:var(--accent);}
.event-calendar .pager-tab-badge {height:5px; min-width:5px; width:5px; border-radius:50%; background:var(--accent); font-size:0;}
.event-calendar-month-grid {display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:2px; padding:0 10px 10px;}
.event-calendar-weekday {height:22px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:11px;}
.event-calendar-month-day {min-height:42px; border-radius:calc(var(--radius) / 2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; color:inherit; min-width:0;}
.event-calendar-month-day.selected {background:var(--accent); color:var(--bg-primary);}
.event-calendar-month-day.has-events:not(.selected) {background:var(--subtle);}
.event-calendar-month-day.has-events::after, .event-calendar-week-date.has-events::after {content:''; width:4px; height:4px; border-radius:50%; background:var(--accent);}
.event-calendar-month-day.selected.has-events::after, .event-calendar-week-date.selected.has-events::after {background:var(--bg-primary);}
.event-calendar-month-pager, .event-calendar-week-pager, .event-calendar-date-pager {flex:1; min-height:0;}
.event-calendar-month-pager .pager-page, .event-calendar-week-pager .pager-page, .event-calendar-date-pager .pager-page {display:flex; flex-direction:column; min-height:0;}
.event-calendar-pager-content {height:100%; min-height:0;}
.event-calendar-week-strip {display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; padding:10px var(--gutter-width); border-bottom:var(--separator-height) solid var(--subtle);}
.event-calendar-week-date {height:52px; border-radius:calc(var(--radius) / 2); display:flex; flex-direction:column; align-items:center; justify-content:center; color:inherit;}
.event-calendar-week-date.selected {background:var(--accent); color:var(--bg-primary);}
.event-calendar-week-date span {font-size:11px; color:inherit; opacity:.7;}
.event-calendar-hours-scroll {flex:1; min-height:0;}
.event-calendar-all-day {display:flex; flex-wrap:wrap; gap:6px; padding:10px var(--gutter-width); border-bottom:var(--separator-height) solid var(--subtle);}
.event-calendar-week-all-day {display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); border-bottom:var(--separator-height) solid var(--subtle);}
.event-calendar-week-all-day .event-calendar-all-day {padding:6px; border-bottom:none; min-width:0; overflow:hidden;}
.event-calendar-week-all-day .event-calendar-all-day + .event-calendar-all-day {border-left:var(--separator-height) solid var(--subtle);}
.event-calendar-hours {display:grid; grid-template-columns:minmax(0, 1fr); position:relative;}
.event-calendar-week-hours {display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); position:relative;}
.event-calendar-hour-labels {position:absolute; top:0; left:0; width:var(--input-height); color:var(--muted); font-size:11px; pointer-events:none; z-index:2;}
.event-calendar-hour-label {position:absolute; left:0; width:var(--input-height); padding:5px 8px 0 0; text-align:right;}
.event-calendar-day-column {position:relative; display:grid; grid-auto-rows:var(--input-height); min-width:0; overflow:hidden;}
.event-calendar-day-column + .event-calendar-day-column {border-left:var(--separator-height) solid var(--subtle);}
.event-calendar-hour-line {border-top:var(--separator-height) solid var(--subtle);}
.event-calendar-hour-line:first-child {border-top:none;}
.event-calendar-timed-event {position:absolute; padding:1px 2px; min-width:0; max-width:100%; overflow:hidden;}
.event-calendar-scroll-marker {position:absolute; left:0; height:1px; width:1px; pointer-events:none;}
.event-calendar-event {background:var(--subtle); border-left:3px solid var(--accent); border-radius:calc(var(--radius) / 2); padding:5px 7px; min-width:0; overflow:hidden;}
.event-calendar-event.timed {height:100%;}
.event-calendar-event-title {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.event-calendar-event-time {font-size:11px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

@media (max-width:640px) {
	.event-calendar-top .select {max-width:none;}
	.event-calendar-year-grid {grid-template-columns:1fr;}
}.poon-line-chart {height:200px; width:100%;}
.poon-bar-chart {width:100%;}
.poon-bar-chart-title {font-weight:600;}
.poon-bar-chart-grid-line {stroke:var(--primary); stroke-opacity:0.05; stroke-dasharray:3 2;}
.poon-bar-chart-legend {display:flex; justify-content:center; gap:16px; color:var(--muted); font-size:12px;}
.poon-bar-chart-legend-item {display:flex; align-items:center; gap:5px; text-transform:capitalize;}
.poon-line-chart svg, .poon-bar-chart svg {display:block; overflow:visible;}
.poon-line-chart text, .poon-bar-chart text {font-family:var(--font), sans-serif;}.receipt-preview {display:block; box-sizing:content-box; padding:15px; margin:0 auto; border-radius:calc(var(--radius) / 2);}:root {
  --font: "Spectral", sans-serif;
  --font-title: "Bad Script", sans-serif;
  --gutter-width: 16px;
  --font-size: 16px;
  --header-height: 50px;
  --radius: 8px;
  --error: #e34;
  --shade-color: rgba(30, 40, 34, 0.8);
  --input-height: 34px;
  --window-width: 640px;
  --alert-width: 320px;
  --separator-color: rgba(16, 33, 16, 0.14);
  --separator-height: 1px;
  --primary: #fff;
  --accent: #0f8;
  --muted: rgba(0, 255, 100, 0.4);
  --subtle: rgba(0, 255, 100, 0.1);
  --bg-primary: #000;
  --bg-secondary: #222;
}
@media (prefers-color-scheme: light) {
  :root {
    --primary: #102110;
    --accent: #3d5031;
    --muted: rgba(24, 122, 47, 0.6);
    --subtle: rgba(24, 122, 47, 0.1);
    --bg-primary: #f6fbf4;
    --bg-secondary: #e7f1e3;
  }
}
.theme-light {
  --primary: #102110;
  --accent: #3d5031;
  --muted: rgba(24, 122, 47, 0.6);
  --subtle: rgba(24, 122, 47, 0.1);
  --bg-primary: #f6fbf4;
  --bg-secondary: #e7f1e3;
}
.theme-dark {
  --primary: #fff;
  --accent: #0f8;
  --muted: rgba(0, 255, 100, 0.4);
  --subtle: rgba(0, 255, 100, 0.1);
  --bg-primary: #000;
  --bg-secondary: #222;
}
.document {
  font: 400 14px/1.5 var(--font);
}
.document h1 {
  font-size: 20px;
}
.document h2 {
  font-size: 18px;
}
.document h3 {
  font-size: 16px;
}
.document p,
.document h1,
.document h2,
.document h3,
.document h4,
.document ul,
.document ol,
.document pre {
  margin-bottom: 10px;
}
.dashboard-logo {
  width: 36px;
  height: 36px;
  display: block;
  border-radius: 18px;
  overflow: hidden;
}
.dashboard-widgets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 0 var(--gutter-width) 10px;
  width: 100%;
}
.dashboard-widget {
  min-width: 0;
  background: var(--subtle);
  border-radius: var(--radius);
  padding: 10px var(--gutter-width);
  height: 120px;
  overflow: hidden;
}
.dashboard-widget-title {
  font-size: 16px;
  margin: 0 0 10px;
}
.dashboard-today {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dashboard-today > div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.dashboard-widget-1 {
  grid-column: span 1;
}
.dashboard-widget-2 {
  grid-column: span 2;
}
.dashboard-widget-3 {
  grid-column: span 3;
}
.dashboard-widget-4 {
  grid-column: span 4;
}
@media (max-width: 499px) {
  .dashboard-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-widget-3,
  .dashboard-widget-4 {
    grid-column: span 2;
  }
}
.profile-image-upload {
  width: 100px !important;
  height: 100px;
}
.availability-empty {
  color: var(--muted);
  height: var(--input-height);
  display: flex;
  align-items: center;
}
.slot-placeholder {
  height: var(--input-height);
  display: flex;
  align-items: center;
  justify-content: center;
}
.order-ticket-grid {
  --ticket-width: 300px;
  --ticket-gap: 10px;
  column-fill: auto;
  column-gap: var(--ticket-gap);
  column-width: var(--ticket-width);
  height: 100%;
  width: var(--ticket-width);
}
.gohano-ticket {
  background: var(--subtle);
  border-radius: var(--radius);
  break-inside: avoid;
  margin-bottom: var(--ticket-gap);
  width: 100%;
}
.gohano-ticket-header {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  padding: 10px var(--gutter-width);
  border-bottom: 1px solid var(--subtle);
}
.gohano-ticket-detail {
  color: var(--accent);
  white-space: nowrap;
}
.gohano-ticket-body {
  padding: 10px 0;
}
.order-item {
  padding: 0 var(--gutter-width);
}
.order-item + .order-item {
  margin-top: 10px;
}
.order-item-title {
  align-items: center;
  color: var(--primary);
  display: flex;
  gap: 4px;
}
.order-item-title .material-symbols {
  font-size: 18px;
}
.order-item-customizations .row {
  padding: 3px var(--gutter-width);
}
.order-ticket-options {
  color: var(--primary);
}
.order-ticket-option {
  display: flex;
  align-items: center;
  gap: 5px;
}
.order-ticket-option .material-symbols {
  font-size: 16px;
}
.order-ticket-option-add {
  color: var(--accent);
}
.order-ticket-option-remove {
  color: var(--error);
}
.thumb {
  width: 36px;
  min-width: 36px;
}
.thumb .img-real {
  border-radius: 4px;
}
.thumb.img-loading {
  background: #fff;
}
/* For the TV Screens */
.display-screen-image {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}
.chart {
  padding-bottom: 10px;
}
.chart-tooltip {
  background: var(--bg-secondary);
  border: 1px solid var(--separator-color, rgba(128, 255, 128, 0.2));
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--primary);
  min-width: 160px;
  padding: 10px 12px;
}
.chart-tooltip-title {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
}
.chart-tooltip-row {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}
.chart-tooltip-label {
  color: var(--muted);
  font-size: 12px;
}
.chart-tooltip-value {
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  text-align: right;
}
.message-composer-image {
  height: 44px;
  width: 44px;
}
.message-read-on {
  color: var(--primary);
  font-size: 12px;
}
.message-read-on.unread {
  color: var(--muted);
}
.list > .touchable-row:has(.schedule-row-chart) {
  height: auto;
}
.schedule-row-chart {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
}
.schedule-row-track {
  display: grid;
  row-gap: 4px;
  position: relative;
}
.schedule-grid-lines {
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
}
.schedule-grid-line {
  background: var(--subtle);
  bottom: 0;
  position: absolute;
  top: 0;
  width: 1px;
}
.schedule-grid-labels {
  height: 12px;
  pointer-events: none;
  position: relative;
}
.schedule-grid-labels span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1;
  position: absolute;
  transform: translateX(-50%);
}
.touchable.schedule-shift {
  align-items: center;
  background: var(--muted);
  border: 1px solid var(--accent);
  border-radius: 4px;
  color: var(--primary);
  display: flex;
  gap: 4px;
  height: 20px;
  padding: 0 5px;
  white-space: nowrap;
  font-size: 12px;
  position: relative;
}
/*.touchable.schedule-shift.mine {background:var(--subtle);}*/
.touchable.schedule-shift.unconfirmed {
  border-color: var(--error) !important;
  background: none;
}
.touchable.schedule-shift.selectable {
  cursor: pointer;
}
.touchable.schedule-shift.selected {
  outline: 1px solid var(--primary);
  border-color: var(--primary) !important;
}
.touchable.schedule-shift span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-shift-container {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.schedule-shift-container .touchable.schedule-shift {
  box-sizing: border-box;
  width: 100%;
}
.schedule-shift-time-range {
  display: flex;
  justify-content: space-between;
  line-height: 1;
  padding: 0 5px;
  width: 100%;
  font-size: 10px;
  color: var(--muted);
}
.schedule-shift-time-range span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-shift-repeat {
  font-size: 12px !important;
  margin-left: auto;
  color: var(--accent);
}
.shift-details {
  background: var(--bg-secondary);
}
.device-live-view {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
.device-live-view > .replayer-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--scale));
}
.receipt-sidebar {
  background: #fff;
  width: 320px;
}.landing-page {
    --landing-header-font:"Bad Script";
    --landing-font:Spectral, system-ui, sans-serif;
    margin:0;
    font:400 14px/1.5 var(--landing-font);
    background-repeat:repeat;
}

.landing-page h2,
.landing-page h4,
.landing-page p,
.landing-page ul {margin:0; padding:0;}

.landing-page img {
    display:block;
    max-width:100%;
}

.landing-wrapper {
    max-width:1000px;
    margin:0 auto;
}

.landing-site-header {
    position:relative;
}

.landing-site-header .landing-wrapper {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 var(--gutter-width);
    flex-wrap:wrap;
    height:128px;
}

.landing-site-header-spacer {
    flex:1;
}

.landing-site-title {
    font-size:26px;
    font-weight:300;
    font-family:var(--landing-header-font), sans-serif;
}

.landing-site-title img {
    height:80px;
}

.landing-site-nav {
    display:flex;
    align-items:center;
    gap:20px;
    justify-content:flex-end;
}

.landing-hero-container {
    min-height:400px;
    background-size:cover;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.landing-hero-primary {
    font-family:var(--landing-header-font), sans-serif;
    font-size:36px;
}

.landing-hero-secondary {
    font-size:14px;
}

.landing-home-blurbs {
    background:var(--bg-secondary);
    padding:30px 20px;
    gap:50px;
    color:var(--primary);
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
}

.landing-home-blurb-title {
    font-family:var(--landing-header-font), sans-serif;
    font-size:24px;
    margin-bottom:8px;
}

.landing-home-blurb-item {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.landing-home-blurb-item img {
    background:#222;
    width:50px;
    height:50px;
    border-radius:50%;
    padding:10px;
    margin:0 auto;
}

.landing-home-blurb-item p {
    font-size:16px;
    line-height:1.5;
}

.landing-site-footer {
    padding:30px 0;
    font-size:14px;
}

.landing-site-footer .landing-wrapper {
    display:flex;
    flex-wrap:wrap;
    gap:var(--landing-gutter);
    justify-content:space-between;
    padding:0 var(--landing-gutter);
}

.landing-footer-left {
    display:flex;
    gap:30px;
    flex-wrap:wrap;
}

.landing-footer-col ul {
    list-style:none;
}

.landing-footer-col a {
    display:flex;
    align-items:center;
    gap:8px;
}

.landing-footer-col h4 {
    margin-bottom:0;
    font-size:12px;
}

@media (min-width:800px) {
    .landing-hero {
        flex-direction:row;
    }

    .landing-home-blurbs {
        flex-direction:row;
    }

    .landing-home-blurb-item {
        max-width:33%;
    }
}

@media (max-width:640px) {
    .landing-page {
        --landing-gutter:8px;
    }

    .landing-site-footer .landing-wrapper {
        flex-direction:column;
        align-items:center;
    }
}.ordering-splash {gap:50px; background:url("wallpapers/whim.svg"); background-size:cover; overflow:hidden;}
.ordering-logo {height:220px; border-radius:50%; margin:0 auto; overflow:hidden;}

.ordering-start-button.btn {border-radius:100px; font-size:30px; height:85px; padding:0 50px;}
.ordering-card .card-sidebar {background:none;}

.ordering-category {scroll-margin-top:24px;}
.ordering-category h2 {color:var(--accent); font-size:42px; line-height:1; margin:0 0 18px 0;}

.ordering-recipe-grid {gap:20px; display:flex; flex-direction:column;}
.ordering-recipe-image {height:100px; width:100px;}

@media (min-width:640px) {
    .ordering-recipe-grid {
        display:grid;
        grid-template-columns:repeat(auto-fill, minmax(420px, 1fr));
    }

    .ordering-recipe-image {height:150px; width:150px;}
}

.ordering-recipe-card {min-height:150px; padding:10px; border-radius:20px; margin:-10px !important; text-align:left;}
.ordering-recipe-header {font-size:28px;}
.ordering-recipe-price {
    color:var(--accent);
    font-size:20px;
    font-weight:700;
    line-height:1.08;
    white-space:nowrap;
}
.ordering-recipe-content p {
    color:var(--accent);
    font-size:18px;
    line-height:1.25;
    margin:0;
}
.ordering-upsells {
    align-items:center;
    display:flex;
    flex:0 0 auto;
    flex-direction:column;
    margin-block:auto;
    text-align:center;
}
.ordering-upsells h2 {
    color:var(--accent);
    font-size:42px;
    line-height:1;
    margin:0 0 28px 0;
}
.ordering-upsell-grid {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
    width:100%;
}
.ordering-upsell-card {border-radius:20px; padding:10px; text-align:center;}
.ordering-upsell-image {height:180px; width:180px; border-radius:8px;}
.ordering-upsell-title {font-size:22px; margin:10px 0 0 0; max-width:180px;}
.ordering-checkout-form {max-width:520px; margin:0 auto; width:100%;}
.ordering-item-image {height:160px; width:160px; border-radius:8px;}
.ordering-payment h2 {font-size:32px; margin:0;}
.stripe-checkout-form h2 {font-size:32px; margin:0; text-align:center;}
.stripe-checkout-frame {height:100%; overflow:scroll;}
.ordering-summary-row .img {height:64px; width:64px;}
.ordering-confirmed {width:420px; max-width:100%; align-items:center;}
.scroller-container.order-receipt {flex:0 0 calc(318px + 2 * var(--gutter-width));}