/* ═══════════════════════════════════════════════════════════════
   app-screens.css — Phone mockup screen styles
   All selectors scoped under .app-screens to avoid conflicts
   ═══════════════════════════════════════════════════════════════ */

/* ─── Carousel Layout ─────────────────────────────────────────── */
.app-screens { position: relative; }
.app-screens .as-carousel-track {
    display: flex;
    gap: 40px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 24px 24px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.app-screens .as-carousel-track::-webkit-scrollbar { display: none; }
.app-screens .as-screen-wrap { scroll-snap-align: center; flex-shrink: 0; }
.app-screens .as-carousel-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}
.app-screens .as-carousel-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.2s; color: #F5F0E1;
}
.app-screens .as-carousel-btn:hover {
    background: #F77F00; color: #1A1A2E; border-color: #F77F00;
}

/* ─── Phone Shell ─────────────────────────────────────────────── */
.app-screens .as-screen-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}
.app-screens .as-screen-label {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8C929E;
    align-self: flex-start;
    margin-left: 10px;
}
.app-screens .as-phone {
    width: 320px;
    min-width: 320px;
    height: 660px;
    background: #1A1A2E;
    border-radius: 38px;
    padding: 12px;
    border: 2px solid #2a2a3e;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.app-screens .as-phone-notch {
    width: 90px;
    height: 22px;
    background: #0d0d1a;
    border-radius: 0 0 14px 14px;
    margin: 0 auto 8px;
    flex-shrink: 0;
}
.app-screens .as-screen {
    background: #FFFFFF;
    border-radius: 26px;
    overflow: hidden;
    flex: 1;
    position: relative;
    border: 1px solid #e0ddd4;
    display: flex;
    flex-direction: column;
}

/* ─── Shared UI Elements ──────────────────────────────────────── */
.app-screens .as-status-bar { display: flex; justify-content: space-between; align-items: center; padding: 6px 16px 4px; background: #fff; position: relative; z-index: 10; flex-shrink: 0; }
.app-screens .as-status-bar.dark { background: #1A1A2E; color: #fff; }
.app-screens .as-status-bar.dark .as-status-time,
.app-screens .as-status-bar.dark .as-status-icons .material-icons { color: #fff; }
.app-screens .as-status-time { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #1A1A2E; }
.app-screens .as-status-icons { display: flex; gap: 3px; align-items: center; }
.app-screens .as-status-icons .material-icons { font-size: 10px; color: #1A1A2E; }

.app-screens .as-nav-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-bottom: 1.5px solid #1A1A2E; background: #fff; flex-shrink: 0; }
.app-screens .as-waw-logo-img { height: 20px; object-fit: contain; }
.app-screens .as-hamburger { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.app-screens .as-hamburger div { width: 18px; height: 2px; background: #1A1A2E; }

.app-screens .as-ticker-bar { background: #EE1E24; padding: 4px 12px; overflow: hidden; white-space: nowrap; flex-shrink: 0; }
.app-screens .as-ticker-text { font-family: 'Space Mono', monospace; font-size: 8px; color: #fff; letter-spacing: 1px; animation: asTicker 14s linear infinite; display: inline-block; }
@keyframes asTicker { 0% { transform: translateX(100%); } 100% { transform: translateX(-150%); } }

.app-screens .as-scroll-content { flex: 1; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; padding-bottom: 60px; }
.app-screens .as-scroll-content::-webkit-scrollbar { display: none; }

.app-screens .as-bottom-nav { position: absolute; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1.5px solid #1A1A2E; display: flex; justify-content: space-around; align-items: center; padding: 8px 0 10px; z-index: 50; }
.app-screens .as-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.app-screens .as-nav-item .material-icons { font-size: 18px; color: #8C929E; }
.app-screens .as-nav-item.active .material-icons { color: #0072BC; }
.app-screens .as-nav-item .label { font-family: 'Space Mono', monospace; font-size: 6px; color: #8C929E; letter-spacing: 0.5px; text-transform: uppercase; }
.app-screens .as-nav-item.active .label { color: #0072BC; }
.app-screens .as-nav-home-btn { width: 44px; height: 44px; background: #0072BC; border: 2px solid #1A1A2E; display: flex; align-items: center; justify-content: center; margin-top: -18px; cursor: pointer; }
.app-screens .as-nav-home-btn .material-icons { font-size: 22px; color: #fff; }

.app-screens .as-section-label { font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 2px; text-transform: uppercase; color: #8C929E; padding: 10px 14px 4px; border-bottom: 0.5px solid #e0ddd4; display: flex; justify-content: space-between; align-items: center; }
.app-screens .as-section-label .as-see-all { color: #0072BC; font-size: 7px; font-weight: 700; cursor: pointer; }

/* Buttons */
.app-screens .as-btn-primary { background: #F77F00; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 12px; text-align: center; border: 2px solid #1A1A2E; cursor: pointer; display: block; width: 100%; }
.app-screens .as-btn-secondary { background: #1A1A2E; color: #FCBF49; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 12px; text-align: center; border: 2px solid #1A1A2E; cursor: pointer; display: block; width: 100%; }
.app-screens .as-btn-outline { background: #fff; color: #1A1A2E; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 12px; text-align: center; border: 2px solid #1A1A2E; cursor: pointer; display: block; width: 100%; }

/* Cards & Avatars */
.app-screens .as-featured-card { margin: 12px 14px 8px; border: 1.5px solid #1A1A2E; position: relative; overflow: hidden; }
.app-screens .as-featured-img { width: 100%; height: 110px; background: linear-gradient(135deg, #F77F00, #E63946); display: flex; align-items: flex-end; padding: 8px; position: relative; }
.app-screens .as-featured-img-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(0,0,0,0.08) 8px, rgba(0,0,0,0.08) 9px), repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.08) 8px, rgba(0,0,0,0.08) 9px); }
.app-screens .as-featured-badge { background: #FCBF49; color: #1A1A2E; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; letter-spacing: 1px; padding: 3px 8px; text-transform: uppercase; position: relative; z-index: 1; }
.app-screens .as-featured-info { padding: 10px 12px; background: #fff; border-top: 1.5px solid #1A1A2E; }
.app-screens .as-featured-title { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #1A1A2E; letter-spacing: 0.5px; }
.app-screens .as-featured-sub { font-size: 10px; color: #8C929E; font-weight: 300; margin-top: 2px; display: flex; align-items: center; gap: 4px; }
.app-screens .as-featured-sub .material-icons { font-size: 11px; color: #0072BC; }

.app-screens .as-spots-row { display: flex; gap: 10px; padding: 8px 14px 12px; overflow: hidden; }
.app-screens .as-spot-card { flex: 0 0 calc(50% - 5px); border: 1.5px solid #1A1A2E; }
.app-screens .as-spot-img { height: 64px; background: linear-gradient(135deg, #0072BC, #0D47A1); position: relative; overflow: hidden; display: flex; align-items: flex-end; padding: 6px; }
.app-screens .as-spot-img.warm { background: linear-gradient(135deg, #F77F00, #FCBF49); }
.app-screens .as-spot-img.cool { background: linear-gradient(135deg, #1A73E8, #0072BC); }
.app-screens .as-spot-img.dark { background: linear-gradient(135deg, #1A1A2E, #4A4A6A); }
.app-screens .as-spot-img-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(255,255,255,0.1) 7px, rgba(255,255,255,0.1) 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(255,255,255,0.1) 7px, rgba(255,255,255,0.1) 8px); }
.app-screens .as-heart-btn { position: absolute; top: 6px; right: 6px; background: #fff; width: 18px; height: 18px; border: 1px solid #1A1A2E; display: flex; align-items: center; justify-content: center; }
.app-screens .as-heart-btn .material-icons { font-size: 12px; color: #E63946; }
.app-screens .as-spot-info { padding: 6px 8px; background: #fff; border-top: 1px solid #1A1A2E; }
.app-screens .as-spot-name { font-family: 'Bebas Neue', sans-serif; font-size: 12px; color: #1A1A2E; letter-spacing: 0.5px; }
.app-screens .as-spot-cat { font-size: 8px; color: #8C929E; font-weight: 300; font-family: 'Space Mono', monospace; }

.app-screens .as-avatar { width: 24px; height: 24px; background: #0072BC; border: 1.5px solid #1A1A2E; display: flex; align-items: center; justify-content: center; font-family: 'Space Mono', monospace; font-size: 8px; color: #fff; font-weight: 700; flex-shrink: 0; }
.app-screens .as-avatar.orange { background: #F77F00; }
.app-screens .as-avatar.red { background: #E63946; }
.app-screens .as-avatar.green { background: #1D9E75; }

/* Tags & Badges */
.app-screens .as-tags-row { display: flex; flex-wrap: wrap; gap: 5px; }
.app-screens .as-tag { background: #f0ede4; border: 1px solid #1A1A2E; font-family: 'Space Mono', monospace; font-size: 8px; color: #1A1A2E; padding: 3px 8px; letter-spacing: 0.5px; }
.app-screens .as-tag.top { background: #0072BC; color: #fff; border-color: #1A1A2E; }
.app-screens .as-tag.mid { background: #FCBF49; color: #1A1A2E; }
.app-screens .as-tier-badge { background: #F77F00; color: #fff; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; padding: 3px 8px; letter-spacing: 1px; display: inline-block; border: 1px solid #1A1A2E; margin-top: 4px; }

/* ─── Chat Header ─────────────────────────────────────────────── */
.app-screens .as-chat-header { padding: 10px 14px; border-bottom: 1.5px solid #1A1A2E; background: #1A1A2E; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.app-screens .as-chat-header-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #fff; letter-spacing: 1px; }
.app-screens .as-chat-header-sub { font-family: 'Space Mono', monospace; font-size: 8px; color: #FCBF49; letter-spacing: 1px; }
.app-screens .as-chat-header .material-icons { color: #F77F00; font-size: 18px; }

/* ─── Forum CSS ───────────────────────────────────────────────── */
.app-screens .as-forum-nav { display: flex; background: #fff; border-bottom: 1.5px solid #1A1A2E; }
.app-screens .as-forum-nav-btn { flex: 1; padding: 8px; text-align: center; font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; font-weight: 700; letter-spacing: 1px; cursor: pointer; border-right: 1px solid #e0ddd4; }
.app-screens .as-forum-nav-btn:last-child { border-right: none; }
.app-screens .as-forum-nav-btn.active { background: #1A1A2E; color: #FCBF49; border-bottom: 2px solid #F77F00; }

.app-screens .as-forum-filter-scroll { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; background: #f0ede4; border-bottom: 1px solid #e0ddd4; -ms-overflow-style: none; scrollbar-width: none; }
.app-screens .as-forum-filter-scroll::-webkit-scrollbar { display: none; }
.app-screens .as-forum-tag { background: #fff; border: 1px solid #1A1A2E; padding: 4px 8px; font-family: 'Space Mono', monospace; font-size: 7px; font-weight: 700; color: #1A1A2E; white-space: nowrap; cursor: pointer; text-transform: uppercase; }
.app-screens .as-forum-tag.active { background: #EE1E24; color: #fff; border-color: #EE1E24; }

.app-screens .as-cl-post { background: #fff; border-bottom: 1.5px solid #1A1A2E; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.app-screens .as-cl-post-header { display: flex; justify-content: space-between; align-items: flex-start; }
.app-screens .as-cl-post-meta { display: flex; align-items: center; gap: 6px; font-family: 'Space Mono', monospace; font-size: 7px; color: #8C929E; text-transform: uppercase; }
.app-screens .as-cl-post-title { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 600; color: #1A1A2E; line-height: 1.4; margin-top: 4px; }
.app-screens .as-cl-post-body { font-size: 10px; color: #1A1A2E; font-weight: 300; line-height: 1.5; }
.app-screens .as-cl-post-img { width: 100%; height: 140px; background: #1A1A2E; border: 1px solid #e0ddd4; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-top: 6px; }
.app-screens .as-cl-tag-badge { font-family: 'Space Mono', monospace; font-size: 7px; font-weight: 700; padding: 2px 6px; letter-spacing: 0.5px; border: 1px solid; display: inline-block; }

.app-screens .as-poll-wrapper { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.app-screens .as-poll-option { border: 1px solid #1A1A2E; position: relative; padding: 6px 8px; font-size: 9px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; overflow: hidden; }
.app-screens .as-poll-bg { position: absolute; left: 0; top: 0; bottom: 0; background: #f0ede4; z-index: 0; }
.app-screens .as-poll-bg.winner { background: #FCBF49; }
.app-screens .as-poll-text { position: relative; z-index: 1; display: flex; justify-content: space-between; width: 100%; }

.app-screens .as-post-actions { display: flex; gap: 12px; margin-top: 6px; }
.app-screens .as-post-action { display: flex; align-items: center; gap: 4px; font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; font-weight: 700; }
.app-screens .as-post-action .material-icons { font-size: 12px; }
.app-screens .as-post-action.liked { color: #E63946; }

/* ─── Group Chat ──────────────────────────────────────────────── */
.app-screens .as-group-header { background: #1A1A2E; padding: 10px 14px; border-bottom: 2px solid #F77F00; }
.app-screens .as-group-name { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #fff; letter-spacing: 1px; }
.app-screens .as-group-meta { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.app-screens .as-green-dot { width: 6px; height: 6px; background: #1D9E75; border-radius: 50%; display: inline-block; }
.app-screens .as-event-pill { background: #F77F00; color: #fff; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; padding: 3px 8px; letter-spacing: 1px; margin: 10px 12px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #1A1A2E; }

.app-screens .as-msg-row { display: flex; gap: 8px; padding: 6px 12px 0; align-items: flex-end; }
.app-screens .as-msg-row.me { flex-direction: row-reverse; }
.app-screens .as-msg-bubble { max-width: 75%; background: #f0ede4; border: 1px solid #e0ddd4; border-bottom-left-radius: 0; padding: 8px 10px; }
.app-screens .as-msg-row.me .as-msg-bubble { background: #0072BC; border: 1px solid #1A1A2E; border-bottom-right-radius: 0; border-bottom-left-radius: 4px; }
.app-screens .as-msg-text { font-size: 9px; color: #1A1A2E; font-weight: 500; line-height: 1.5; }
.app-screens .as-msg-row.me .as-msg-text { color: #fff; }
.app-screens .as-msg-sender { font-family: 'Space Mono', monospace; font-size: 8px; color: #0072BC; font-weight: 700; margin-bottom: 3px; }
.app-screens .as-msg-time { font-family: 'Space Mono', monospace; font-size: 7px; color: #8C929E; text-align: right; margin-top: 3px; }

.app-screens .as-ghost-msg-card { margin: 10px 12px 0; background: #f0ede4; border: 1.5px solid #0072BC; padding: 8px 10px; display: flex; align-items: center; gap: 8px; }
.app-screens .as-ghost-icon { width: 30px; height: 30px; background: #0072BC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-screens .as-ghost-icon .material-icons { font-size: 16px; color: #fff; }
.app-screens .as-ghost-msg-text { flex: 1; }
.app-screens .as-ghost-msg-title { font-family: 'Bebas Neue', sans-serif; font-size: 12px; color: #0072BC; letter-spacing: 0.5px; }
.app-screens .as-ghost-msg-sub { font-size: 8px; color: #8C929E; font-family: 'Space Mono', monospace; font-weight: 400; margin-top: 2px; }
.app-screens .as-ghost-open-btn { background: #0072BC; color: #fff; font-family: 'Space Mono', monospace; font-size: 7px; font-weight: 700; padding: 5px 8px; letter-spacing: 1px; border: 1px solid #1A1A2E; white-space: nowrap; }

.app-screens .as-chat-toolbar { position: absolute; bottom: 58px; left: 0; right: 0; background: #fff; border-top: 1.5px solid #1A1A2E; padding: 8px 12px; z-index: 40; }
.app-screens .as-toolbar-row { display: flex; gap: 6px; margin-bottom: 6px; }
.app-screens .as-toolbar-btn { display: flex; align-items: center; gap: 4px; background: #f0ede4; border: 1px solid #1A1A2E; padding: 5px 8px; font-family: 'Space Mono', monospace; font-size: 8px; color: #1A1A2E; letter-spacing: 0.5px; cursor: pointer; }
.app-screens .as-toolbar-btn.ghost-toolbar { background: #0072BC; color: #fff; border-color: #1A1A2E; }
.app-screens .as-toolbar-btn.ghost-toolbar .material-icons { color: #FCBF49; }
.app-screens .as-chat-input { flex: 1; background: #f5f3ed; border: 1px solid #1A1A2E; padding: 6px 10px; font-family: 'Montserrat', sans-serif; font-size: 9px; color: #8C929E; font-weight: 500; }
.app-screens .as-send-btn { background: #0072BC; width: 26px; height: 26px; border: 1px solid #1A1A2E; display: flex; align-items: center; justify-content: center; }
.app-screens .as-send-btn .material-icons { font-size: 14px; color: #fff; }

/* ─── Analytics ────────────────────────────────────────────────── */
.app-screens .as-analytics-header { background: #1A1A2E; padding: 10px 14px; border-bottom: 3px solid #F77F00; }
.app-screens .as-analytics-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #fff; letter-spacing: 1.5px; }
.app-screens .as-analytics-sub { font-family: 'Space Mono', monospace; font-size: 8px; color: #FCBF49; letter-spacing: 1px; margin-top: 2px; }

.app-screens .as-metrics-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 12px 0; }
.app-screens .as-metric-card { background: #f5f3ed; border: 1px solid #1A1A2E; padding: 10px 12px; position: relative; }
.app-screens .as-metric-card::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
.app-screens .as-metric-card.blue::before { background: #0072BC; }
.app-screens .as-metric-card.orange::before { background: #F77F00; }
.app-screens .as-metric-card.red::before { background: #E63946; }
.app-screens .as-metric-card.yellow::before { background: #FCBF49; }
.app-screens .as-metric-label { font-family: 'Space Mono', monospace; font-size: 7px; color: #8C929E; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; }
.app-screens .as-metric-value { font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: #1A1A2E; line-height: 1; letter-spacing: 0.5px; }
.app-screens .as-metric-delta { font-family: 'Space Mono', monospace; font-size: 8px; color: #1D9E75; margin-top: 4px; font-weight: 700; }
.app-screens .as-metric-delta.down { color: #E63946; }

.app-screens .as-chart-section { margin: 10px 12px 0; border: 1px solid #1A1A2E; background: #fff; }
.app-screens .as-chart-header { padding: 6px 10px; border-bottom: 1px solid #1A1A2E; background: #1A1A2E; font-family: 'Space Mono', monospace; font-size: 8px; color: #fff; letter-spacing: 1px; text-transform: uppercase; display: flex; justify-content: space-between; }
.app-screens .as-chart-body { padding: 12px 10px 8px; display: flex; gap: 6px; align-items: flex-end; height: 80px; }
.app-screens .as-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.app-screens .as-bar { width: 100%; background: #0072BC; border: 1px solid #1A1A2E; border-bottom: none; min-height: 4px; position: relative; }
.app-screens .as-bar.highlight { background: #F77F00; }
.app-screens .as-bar.low { background: #e0ddd4; }
.app-screens .as-bar-val { font-family: 'Space Mono', monospace; font-size: 7px; color: #1A1A2E; font-weight: 700; }
.app-screens .as-bar-day { font-family: 'Space Mono', monospace; font-size: 7px; color: #8C929E; }

.app-screens .as-post-limit-bar { margin: 12px 12px 0; background: #f0ede4; border: 1px solid #1A1A2E; padding: 8px 10px; }
.app-screens .as-limit-label { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1px; text-transform: uppercase; display: flex; justify-content: space-between; margin-bottom: 6px; }
.app-screens .as-limit-track { width: 100%; height: 6px; background: #e0ddd4; border: 0.5px solid #8C929E; position: relative; }
.app-screens .as-limit-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 80%; background: #F77F00; }

/* ─── Store ────────────────────────────────────────────────────── */
.app-screens .as-store-header { background: #1A1A2E; padding: 10px 14px; border-bottom: 3px solid #E63946; }
.app-screens .as-store-title { font-family: 'Bebas Neue', sans-serif; font-size: 20px; color: #fff; letter-spacing: 2px; }
.app-screens .as-store-sub { font-family: 'Space Mono', monospace; font-size: 8px; color: #E63946; letter-spacing: 1px; margin-top: 2px; }

.app-screens .as-store-cats { display: flex; gap: 0; border-bottom: 1.5px solid #1A1A2E; overflow: hidden; }
.app-screens .as-store-cat { flex: 1; padding: 8px 4px; font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.5px; text-align: center; color: #8C929E; border-right: 0.5px solid #e0ddd4; text-transform: uppercase; cursor: pointer; }
.app-screens .as-store-cat:last-child { border-right: none; }
.app-screens .as-store-cat.active { background: #E63946; color: #fff; font-weight: 700; }

.app-screens .as-merch-featured { margin: 12px 12px 0; border: 1.5px solid #1A1A2E; position: relative; }
.app-screens .as-merch-featured-img { height: 110px; background: linear-gradient(135deg, #1A1A2E, #16213E); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.app-screens .as-merch-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(247,127,0,0.12) 10px, rgba(247,127,0,0.12) 11px); }
.app-screens .as-merch-new-badge { position: absolute; top: 8px; right: 8px; background: #EE1E24; color: #fff; font-family: 'Space Mono', monospace; font-size: 7px; font-weight: 700; padding: 3px 6px; letter-spacing: 1px; border: 1px solid #1A1A2E; }
.app-screens .as-merch-featured-info { padding: 10px 12px; border-top: 1.5px solid #1A1A2E; display: flex; justify-content: space-between; align-items: center; background: #fff; }
.app-screens .as-merch-featured-name { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #1A1A2E; letter-spacing: 0.5px; }
.app-screens .as-merch-featured-price { font-family: 'Space Mono', monospace; font-size: 12px; font-weight: 700; color: #E63946; margin-bottom: 2px; }
.app-screens .as-merch-add-btn { background: #0072BC; color: #fff; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; padding: 6px 10px; letter-spacing: 1px; border: 1px solid #1A1A2E; cursor: pointer; }

.app-screens .as-merch-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 12px 0; }
.app-screens .as-merch-card { border: 1px solid #1A1A2E; background: #fff; }
.app-screens .as-merch-card-img { height: 74px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.app-screens .as-merch-card-img.sunset { background: linear-gradient(135deg, #E63946, #F77F00); }
.app-screens .as-merch-card-img.night { background: linear-gradient(135deg, #1A1A2E, #0D47A1); }
.app-screens .as-merch-card-img.sand { background: #F5F0E1; border-bottom: 1px solid #e0ddd4; }
.app-screens .as-merch-card-img-pattern { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 7px, rgba(255,255,255,0.1) 7px, rgba(255,255,255,0.1) 8px), repeating-linear-gradient(90deg, transparent, transparent 7px, rgba(255,255,255,0.1) 7px, rgba(255,255,255,0.1) 8px); }
.app-screens .as-merch-card-label { position: relative; z-index: 1; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; }
.app-screens .as-merch-card-info { padding: 8px 10px; border-top: 1px solid #1A1A2E; }
.app-screens .as-merch-card-name { font-size: 9px; color: #1A1A2E; font-weight: 600; line-height: 1.3; }
.app-screens .as-merch-card-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 5px; }
.app-screens .as-merch-price { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #E63946; }
.app-screens .as-merch-cart-btn { width: 22px; height: 22px; background: #0072BC; border: 1px solid #1A1A2E; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.app-screens .as-merch-cart-btn .material-icons { font-size: 13px; color: #fff; }

.app-screens .as-store-cart-bar { position: absolute; bottom: 58px; left: 0; right: 0; background: #1A1A2E; border-top: 1.5px solid #F77F00; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; z-index: 40; }
.app-screens .as-cart-info { font-family: 'Space Mono', monospace; font-size: 8px; color: #fff; letter-spacing: 0.5px; }
.app-screens .as-cart-count { background: #EE1E24; color: #fff; font-family: 'Space Mono', monospace; font-size: 8px; font-weight: 700; padding: 2px 6px; letter-spacing: 1px; margin-right: 6px; }
.app-screens .as-cart-total { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #FCBF49; }
.app-screens .as-checkout-btn { background: #F77F00; color: #fff; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; padding: 6px 12px; letter-spacing: 1px; border: 1px solid #fff; cursor: pointer; }

/* ─── Registration ─────────────────────────────────────────────── */
.app-screens .as-reg-header { background: #1A1A2E; padding: 16px 14px 12px; border-bottom: 4px solid #F77F00; text-align: center; }
.app-screens .as-reg-tagline { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1px; display: block; margin-top: 10px; font-weight: 700; }

.app-screens .as-reg-form { padding: 12px 14px 0; }
.app-screens .as-reg-section-label { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 0.5px solid #e0ddd4; display: flex; align-items: center; gap: 6px; font-weight: 700; }
.app-screens .as-reg-section-label::before { content: ''; display: inline-block; width: 8px; height: 8px; background: #F77F00; }

.app-screens .as-reg-field { margin-bottom: 10px; }
.app-screens .as-reg-label { font-family: 'Space Mono', monospace; font-size: 8px; color: #1A1A2E; letter-spacing: 0.5px; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; font-weight: 700; }
.app-screens .as-reg-label .material-icons { font-size: 11px; color: #0072BC; }
.app-screens .as-reg-required { color: #EE1E24; font-size: 10px; }
.app-screens .as-reg-input { width: 100%; background: #f5f3ed; border: 1.5px solid #1A1A2E; padding: 8px 10px; font-family: 'Montserrat', sans-serif; font-size: 10px; color: #1A1A2E; font-weight: 500; }
.app-screens .as-reg-input.active { border-color: #0072BC; background: #fff; }
.app-screens .as-reg-input::placeholder { color: #8C929E; }
.app-screens .as-reg-input-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.app-screens .as-role-selector { display: flex; gap: 0; border: 1.5px solid #1A1A2E; margin-bottom: 10px; overflow: hidden; }
.app-screens .as-role-btn { flex: 1; padding: 8px 4px; font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 0.5px; text-align: center; color: #8C929E; text-transform: uppercase; border-right: 1px solid #e0ddd4; cursor: pointer; font-weight: 700; }
.app-screens .as-role-btn:last-child { border-right: none; }
.app-screens .as-role-btn.active.user-role { background: #0072BC; color: #fff; border-color: #0072BC; }
.app-screens .as-role-btn.active.biz-role { background: #F77F00; color: #fff; border-color: #F77F00; }

.app-screens .as-reg-divider { display: flex; align-items: center; gap: 10px; margin: 12px 0; }
.app-screens .as-reg-divider-line { flex: 1; height: 0.5px; background: #e0ddd4; }
.app-screens .as-reg-divider-text { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1px; white-space: nowrap; }

.app-screens .as-social-btns { display: flex; gap: 8px; margin-bottom: 12px; }
.app-screens .as-social-btn { flex: 1; padding: 8px 6px; border: 1.5px solid #1A1A2E; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: 'Space Mono', monospace; font-size: 9px; color: #1A1A2E; letter-spacing: 0.5px; font-weight: 700; cursor: pointer; }
.app-screens .as-social-btn.google { border-color: #E63946; }
.app-screens .as-social-btn.facebook { background: #1877F2; color: #fff; border-color: #1877F2; }
.app-screens .as-social-btn .material-icons { font-size: 12px; }

.app-screens .as-reg-submit { background: #F77F00; color: #fff; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 3px; padding: 12px; text-align: center; width: 100%; border: none; cursor: pointer; border: 2px solid #1A1A2E; margin-top: 8px; }

.app-screens .as-reg-footer { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; text-align: center; padding: 12px 14px 16px; letter-spacing: 0.5px; line-height: 1.6; }
.app-screens .as-reg-link { color: #0072BC; text-decoration: none; font-weight: 700; }

.app-screens .as-guest-strip { background: #f0ede4; border-top: 1px solid #e0ddd4; border-bottom: 1px solid #e0ddd4; padding: 8px 14px; text-align: center; font-family: 'Space Mono', monospace; font-size: 9px; color: #8C929E; letter-spacing: 0.5px; margin-bottom: 0; }
.app-screens .as-guest-link { color: #0072BC; font-weight: 700; cursor: pointer; }

/* ─── Guru / Quiz ──────────────────────────────────────────────── */
.app-screens .as-guru-header { background: #1A1A2E; padding: 10px 14px; border-bottom: 3px solid #FCBF49; }
.app-screens .as-guru-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: #FCBF49; letter-spacing: 2px; }
.app-screens .as-guru-sub { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1px; margin-top: 2px; }

.app-screens .as-guru-tabs { display: flex; border-bottom: 1.5px solid #1A1A2E; }
.app-screens .as-guru-tab { flex: 1; padding: 8px; font-family: 'Space Mono', monospace; font-size: 8px; letter-spacing: 1px; text-transform: uppercase; color: #8C929E; text-align: center; border-right: 1px solid #e0ddd4; cursor: pointer; }
.app-screens .as-guru-tab:last-child { border-right: none; }
.app-screens .as-guru-tab.active { background: #1A1A2E; color: #FCBF49; font-weight: 700; }

.app-screens .as-quiz-section { padding: 12px 14px 0; }
.app-screens .as-quiz-progress-bar { height: 5px; background: #e0ddd4; border: 0.5px solid #8C929E; margin-bottom: 12px; position: relative; }
.app-screens .as-quiz-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 40%; background: #FCBF49; }
.app-screens .as-quiz-q-meta { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1px; margin-bottom: 8px; display: flex; justify-content: space-between; }
.app-screens .as-quiz-badge { background: #EE1E24; color: #fff; font-family: 'Space Mono', monospace; font-size: 7px; font-weight: 700; padding: 2px 6px; letter-spacing: 1px; }
.app-screens .as-quiz-question { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #1A1A2E; letter-spacing: 0.5px; line-height: 1.2; margin-bottom: 14px; }
.app-screens .as-quiz-option { border: 1.5px solid #1A1A2E; padding: 10px 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; cursor: pointer; background: #fff; transition: background 0.1s; }
.app-screens .as-quiz-option.selected { background: #0072BC; border-color: #0072BC; }
.app-screens .as-quiz-option.correct { background: #1D9E75; border-color: #1D9E75; }
.app-screens .as-quiz-option.wrong { background: #E63946; border-color: #E63946; }
.app-screens .as-option-letter { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #1A1A2E; width: 20px; flex-shrink: 0; }
.app-screens .as-quiz-option.selected .as-option-letter,
.app-screens .as-quiz-option.correct .as-option-letter,
.app-screens .as-quiz-option.wrong .as-option-letter { color: #fff; }
.app-screens .as-option-text { font-size: 10px; color: #1A1A2E; font-weight: 500; }
.app-screens .as-quiz-option.selected .as-option-text,
.app-screens .as-quiz-option.correct .as-option-text,
.app-screens .as-quiz-option.wrong .as-option-text { color: #fff; }
.app-screens .as-quiz-score-strip { background: #FCBF49; border: 1.5px solid #1A1A2E; padding: 8px 12px; margin: 12px 14px 0; display: flex; justify-content: space-between; align-items: center; }
.app-screens .as-score-val { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #1A1A2E; margin-top: 2px; }
.app-screens .as-score-label { font-family: 'Space Mono', monospace; font-size: 8px; color: #1A1A2E; letter-spacing: 1px; font-weight: 700; }

.app-screens .as-spin-section { padding: 12px 14px 0; }
.app-screens .as-spin-label { font-family: 'Space Mono', monospace; font-size: 9px; color: #8C929E; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; text-align: center; font-weight: 700; }
.app-screens .as-wheel-container { display: flex; justify-content: center; margin-bottom: 14px; position: relative; }
.app-screens .as-wheel-pointer { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 14px solid #EE1E24; z-index: 10; }
.app-screens .as-wheel-svg { border: 2px solid #1A1A2E; border-radius: 50%; }
.app-screens .as-spin-result { background: #f0ede4; border: 1.5px solid #0072BC; padding: 10px 12px; margin: 0 0 10px; display: flex; align-items: center; gap: 10px; }
.app-screens .as-spin-result-icon { width: 32px; height: 32px; background: #0072BC; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-screens .as-spin-result-icon .material-icons { font-size: 16px; color: #fff; }
.app-screens .as-spin-result-text { flex: 1; }
.app-screens .as-spin-result-venue { font-family: 'Bebas Neue', sans-serif; font-size: 15px; color: #1A1A2E; letter-spacing: 0.5px; }
.app-screens .as-spin-result-cat { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 0.5px; margin-top: 2px; }
.app-screens .as-spin-go-btn { background: #F77F00; color: #fff; font-family: 'Space Mono', monospace; font-size: 9px; font-weight: 700; padding: 6px 10px; letter-spacing: 1px; border: 1px solid #1A1A2E; white-space: nowrap; cursor: pointer; }
.app-screens .as-spin-btn { background: #1A1A2E; color: #FCBF49; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; padding: 10px; text-align: center; margin: 10px 14px 0; border: none; width: calc(100% - 28px); cursor: pointer; border: 2px solid #1A1A2E; }

/* ─── Map ──────────────────────────────────────────────────────── */
.app-screens .as-map-header { background: #1A1A2E; padding: 10px 14px 8px; border-bottom: 3px solid #F77F00; }
.app-screens .as-map-title { font-family: 'Bebas Neue', sans-serif; font-size: 18px; color: #fff; letter-spacing: 1.5px; }
.app-screens .as-map-sub { font-family: 'Space Mono', monospace; font-size: 8px; color: #F77F00; letter-spacing: 1px; margin-top: 2px; }
.app-screens .as-map-legend { display: flex; gap: 8px; padding: 0 14px 8px; flex-wrap: wrap; margin-top: 6px; }
.app-screens .as-legend-item { display: flex; align-items: center; gap: 4px; font-family: 'Space Mono', monospace; font-size: 7px; color: #1A1A2E; letter-spacing: 0.5px; font-weight: 700; }
.app-screens .as-legend-dot { width: 10px; height: 10px; border: 1px solid #1A1A2E; flex-shrink: 0; }
.app-screens .as-map-canvas { margin: 0 12px; border: 1.5px solid #1A1A2E; background: #e8f4e8; position: relative; height: 260px; overflow: hidden; }
.app-screens .as-map-grid { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(0,0,0,0.06) 19px, rgba(0,0,0,0.06) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(0,0,0,0.06) 19px, rgba(0,0,0,0.06) 20px); }
.app-screens .as-map-road-h { position: absolute; background: #d4c9a0; border-top: 1px solid #bfb380; border-bottom: 1px solid #bfb380; }
.app-screens .as-map-road-v { position: absolute; background: #d4c9a0; border-left: 1px solid #bfb380; border-right: 1px solid #bfb380; }
.app-screens .as-map-stage { position: absolute; background: #0072BC; border: 1.5px solid #1A1A2E; display: flex; align-items: center; justify-content: center; }
.app-screens .as-map-stage span { font-family: 'Bebas Neue', sans-serif; font-size: 11px; color: #fff; letter-spacing: 0.5px; }
.app-screens .as-map-pin { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.app-screens .as-pin-dot { width: 16px; height: 16px; border: 2px solid #1A1A2E; display: flex; align-items: center; justify-content: center; }
.app-screens .as-pin-dot .material-icons { font-size: 10px; }
.app-screens .as-pin-label { font-family: 'Space Mono', monospace; font-size: 7px; color: #1A1A2E; font-weight: 700; white-space: nowrap; background: #fff; border: 0.5px solid #8C929E; padding: 2px 4px; margin-top: 2px; letter-spacing: 0.3px; }
.app-screens .as-map-user-pin { position: absolute; width: 20px; height: 20px; background: #EE1E24; border: 2px solid #1A1A2E; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.app-screens .as-map-user-pin .material-icons { font-size: 12px; color: #fff; }
.app-screens .as-map-bottom-sheet { background: #fff; border-top: 1.5px solid #1A1A2E; padding: 10px 14px 0; }
.app-screens .as-mbs-title { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; font-weight: 700; }
.app-screens .as-mbs-list { display: flex; flex-direction: column; gap: 6px; }
.app-screens .as-mbs-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid #e0ddd4; background: #f5f3ed; }
.app-screens .as-mbs-item-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-screens .as-mbs-item-icon .material-icons { font-size: 14px; }
.app-screens .as-mbs-item-text { flex: 1; }
.app-screens .as-mbs-item-name { font-family: 'Bebas Neue', sans-serif; font-size: 13px; color: #1A1A2E; letter-spacing: 0.3px; }
.app-screens .as-mbs-item-dist { font-family: 'Space Mono', monospace; font-size: 7.5px; color: #8C929E; margin-top: 2px; }
.app-screens .as-mbs-item-tag { font-family: 'Space Mono', monospace; font-size: 7px; padding: 3px 6px; letter-spacing: 0.5px; border: 1px solid; font-weight: 700; }

/* ─── Leaderboard ──────────────────────────────────────────────── */
.app-screens .as-leader-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e0ddd4; background: #fff; }
.app-screens .as-leader-rank { font-family: 'Bebas Neue', sans-serif; font-size: 18px; width: 20px; text-align: center; }
.app-screens .as-leader-rank.first { color: #F77F00; font-size: 24px; }
.app-screens .as-leader-rank.second { color: #8C929E; }
.app-screens .as-leader-rank.third { color: #E63946; }
.app-screens .as-leader-score { margin-left: auto; font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #0072BC; }

/* ─── Notifications ────────────────────────────────────────────── */
.app-screens .as-notif-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid #e0ddd4; background: #fff; }
.app-screens .as-notif-row.unread { background: #fffdf5; border-left: 3px solid #F77F00; padding-left: 11px; }
.app-screens .as-notif-icon { width: 28px; height: 28px; background: #f0ede4; border: 1px solid #1A1A2E; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-screens .as-notif-text { font-size: 10px; color: #1A1A2E; line-height: 1.4; }
.app-screens .as-notif-time { font-family: 'Space Mono', monospace; font-size: 7px; color: #8C929E; margin-top: 4px; }

/* ─── Checkout ─────────────────────────────────────────────────── */
.app-screens .as-cart-item { display: flex; gap: 12px; padding: 12px 14px; border-bottom: 1px solid #e0ddd4; background: #fff; }
.app-screens .as-cart-img { width: 60px; height: 60px; background: #1A1A2E; flex-shrink: 0; position: relative; }
.app-screens .as-cart-details { flex: 1; }
.app-screens .as-cart-title { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 0.5px; }
.app-screens .as-cart-meta { font-family: 'Space Mono', monospace; font-size: 8px; color: #8C929E; margin-top: 2px; }
.app-screens .as-cart-price { font-family: 'Space Mono', monospace; font-size: 10px; font-weight: 700; color: #E63946; margin-top: 6px; }

/* ─── Scrapbook ────────────────────────────────────────────────── */
.app-screens .as-scrapbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px; }
.app-screens .as-polaroid { background: #fff; padding: 6px 6px 16px 6px; border: 1px solid #e0ddd4; box-shadow: 2px 2px 5px rgba(0,0,0,0.05); transform: rotate(-2deg); transition: transform 0.2s; }
.app-screens .as-polaroid:nth-child(even) { transform: rotate(3deg); }
.app-screens .as-polaroid-img { width: 100%; height: 90px; background: #1A1A2E; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.app-screens .as-polaroid-caption { font-family: 'Space Mono', monospace; font-size: 7px; color: #8C929E; text-align: center; margin-top: 6px; letter-spacing: 0.5px; }

/* ─── Form Extras ──────────────────────────────────────────────── */
.app-screens .as-list-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fff; border-bottom: 1px solid #e0ddd4; cursor: pointer; }
.app-screens .as-list-item-title { font-family: 'Bebas Neue', sans-serif; font-size: 16px; color: #1A1A2E; letter-spacing: 0.5px; }
.app-screens .as-list-item-sub { font-size: 9px; color: #8C929E; margin-top: 2px; }
.app-screens .as-toggle-switch { width: 36px; height: 20px; background: #e0ddd4; border: 1px solid #1A1A2E; position: relative; }
.app-screens .as-toggle-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: #1A1A2E; }
.app-screens .as-toggle-switch.on { background: #0072BC; }
.app-screens .as-toggle-switch.on::after { left: 18px; background: #fff; }

.app-screens .as-timeline-event { border-left: 2px solid #1A1A2E; padding-left: 12px; position: relative; margin-bottom: 16px; }
.app-screens .as-timeline-event::before { content: ''; position: absolute; left: -6px; top: 0; width: 10px; height: 10px; background: #F77F00; border: 1px solid #1A1A2E; }

.app-screens .as-receipt-line { display: flex; justify-content: space-between; font-family: 'Space Mono', monospace; font-size: 10px; color: #1A1A2E; margin-bottom: 8px; position: relative; }
.app-screens .as-receipt-line::after { content: '.......................................................................'; position: absolute; left: 0; right: 0; top: 0; color: #8C929E; z-index: 0; overflow: hidden; white-space: nowrap; opacity: 0.3; }
.app-screens .as-receipt-item { background: #fff; z-index: 1; padding-right: 4px; }
.app-screens .as-receipt-price { background: #fff; z-index: 1; padding-left: 4px; font-weight: 700; }