/* Native Vue presentation for red packets and check-in, version 1.0.0. */
.eg-root,.eg-dialog { --eg-bg:var(--ovo-surface,#fff);--eg-soft:var(--ovo-surface-muted,#f5f6f7);--eg-fg:var(--ovo-text,#24262b);--eg-muted:var(--ovo-muted,#626670);--eg-line:var(--ovo-border,#dfe2e7);--eg-action:var(--ovo-accent,#272b33);--eg-on-action:var(--ovo-on-accent,#fff);--eg-focus:var(--ovo-focus,#276dd7);font-size:14px;line-height:1.5;color:var(--eg-fg); }
.eg-root { max-width:1280px;margin:0 auto;min-width:0; }
.eg-root *,.eg-dialog * { box-sizing:border-box; }
.eg-root [hidden],.eg-dialog [hidden] { display:none!important; }
.eg-root :is(h2,h3,p),.eg-dialog :is(h2,h3,p) { margin:0; }
.eg-root h2,.eg-dialog h2 { font-size:17px;font-weight:600;line-height:1.5; }
.eg-root h3 { font-size:16px;font-weight:600; }
.eg-muted { color:var(--eg-muted);font-size:12px;line-height:1.6;overflow-wrap:anywhere; }
.eg-root .eg-muted { margin:8px 0; }
.eg-error { color:#a52a27;font-size:13px;margin:12px 0!important;overflow-wrap:anywhere; }
html.dark .eg-error { color:#ffb0a9; }
.eg-button { display:inline-flex;justify-content:center;align-items:center;min-height:40px;gap:8px;padding:8px 14px;border:1px solid var(--eg-line);border-radius:7px;background:var(--eg-bg);color:var(--eg-fg);font:inherit;font-weight:500;cursor:var(--cursor-interactive,pointer);text-decoration:none; }
.eg-button:hover:not(:disabled) { background:var(--eg-soft); }
.eg-button.eg-primary { background:var(--eg-action);color:var(--eg-on-action);border-color:transparent; }
.eg-button.eg-primary:hover:not(:disabled) { filter:brightness(1.1); }
.eg-button.eg-danger { background:#fbe8e8;color:#9d2424;border-color:transparent; }
html.dark .eg-button.eg-danger { background:#422226;color:#ffb1b1; }
.eg-button.eg-subtle { background:transparent;border-color:transparent;min-height:32px;padding:4px 8px;font-size:12px; }
.eg-button:disabled { opacity:.5;cursor:default; }
.eg-root :is(button,a,input,select):focus-visible,.eg-dialog :is(button,a):focus-visible { outline:2px solid var(--eg-focus);outline-offset:3px; }
.eg-route-tabs { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px; }
.eg-route-tab { display:block;padding:9px 14px;min-height:40px;border-radius:7px;color:var(--eg-muted);text-decoration:none; }
.eg-route-tab[aria-current="page"] { background:var(--eg-soft);color:var(--eg-fg);font-weight:600; }
.eg-native-tab { display:inline-flex;align-items:center;text-decoration:none;white-space:nowrap; }
.reward-tabs:has(.eg-native-tab) { flex-wrap:wrap; }
.eg-admin-grid { display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.8fr);gap:48px;align-items:start; }
.eg-preset-panel { min-width:0;margin-bottom:24px;padding:16px;border:1px solid var(--eg-line);border-radius:10px;background:var(--eg-bg); }
.eg-preset-heading { display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:10px; }
.eg-preset-heading .eg-muted { margin:0; }
.eg-preset-toolbar { display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) auto;gap:12px;align-items:end; }
.eg-preset-toolbar > .eg-field { margin:0; }
.eg-preset-actions { display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px; }
.eg-preset-panel > .eg-error { margin:8px 0 0!important; }
.eg-preset-panel > .eg-muted { margin:8px 0 0; }
.eg-form { min-width:0; }
.eg-form-section { padding-bottom:24px;margin-bottom:24px;border-bottom:1px solid var(--eg-line); }
.eg-form-section > h2 { margin-bottom:16px; }
.eg-field { display:flex;flex-direction:column;gap:6px;min-width:0;margin-bottom:16px; }
.eg-field > label { font-size:13px;font-weight:500; }
.eg-input { min-height:40px;width:100%;min-width:0;padding:8px 11px;border:1px solid var(--eg-line);border-radius:6px;background:var(--eg-bg);color:var(--eg-fg);font:inherit; }
.eg-input::placeholder { color:var(--eg-muted); }
html.dark .eg-input[type="datetime-local"] { color-scheme:dark; }
.eg-input[type="checkbox"] { width:17px;height:17px;min-height:17px;padding:0;margin:0;flex:0 0 17px;accent-color:var(--eg-action); }
.eg-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px; }
.eg-audience-options { display:grid;gap:0;padding:12px;margin:8px 0 12px;border-radius:8px;background:var(--eg-soft); }
.eg-audience-options .eg-row { gap:12px; }
.eg-hint { margin:0!important; }
.eg-rule-list { display:grid;gap:8px; }
.eg-rule-row { display:grid;grid-template-columns:90px minmax(70px,1fr) minmax(70px,1fr) 52px;gap:10px;align-items:end; }
.eg-rule-row > .eg-button { margin-bottom:16px; }
.eg-rule-row .eg-field > label { font-size:12px;white-space:nowrap; }
.eg-rule-row .eg-input { padding:8px; }
.eg-check { display:flex;align-items:center;gap:9px;min-height:40px;font-size:13px;cursor:var(--cursor-interactive,pointer); }
.eg-check span { min-width:0;overflow-wrap:anywhere; }
.eg-user-list { max-height:300px;overflow-y:auto;padding:6px 0; }
.eg-setting-switch { display:flex;justify-content:space-between;align-items:center;min-height:44px;margin-bottom:16px; }
.eg-preview-pane { position:sticky;top:92px;min-width:0; }
.eg-preview-pane > h2 { margin-bottom:18px; }
.eg-preview-pane > .eg-button { margin-top:8px; }
.eg-summary { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:16px 0;margin:0; }
.eg-summary dt { color:var(--eg-muted);font-size:12px; }
.eg-summary dd { margin:5px 0 0;font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere; }
.eg-actions { display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap; }
.eg-inline-actions { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.eg-records { margin-top:40px;padding-top:24px;border-top:1px solid var(--eg-line); }
.eg-records > h2 { margin-bottom:16px; }
.eg-record-toolbar { display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px; }
.eg-table-wrap { max-width:100%;overflow-x:auto;margin:12px 0 20px; }
.eg-table { width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums; }
.eg-table th { text-align:left;font-weight:500;color:var(--eg-muted);background:var(--eg-soft);white-space:nowrap; }
.eg-table :is(th,td) { padding:11px;border-bottom:1px solid var(--eg-line); }
.eg-table td:first-child { min-width:160px;overflow-wrap:anywhere; }
.eg-table td:not(:first-child) { white-space:nowrap; }
.eg-table small { display:block;color:var(--eg-muted);font-size:11px; }
.eg-status { display:inline-flex;padding:3px 7px;border-radius:4px;color:var(--eg-muted);background:var(--eg-soft);font-size:12px; }
.eg-empty { min-height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;color:var(--eg-muted); }
.eg-pagination { display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin:16px 0;color:var(--eg-muted);font-size:12px; }
.eg-pagination .eg-button { min-height:32px;padding:5px 10px; }
.eg-page-heading { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:24px; }
.eg-packet-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));gap:28px;align-items:start; }
.eg-packet-item { min-width:0;max-width:420px; }
.eg-packet-item > .eg-button { width:100%; }
.eg-envelope { --eg-paper:#962b26;--eg-ink:#fff0d6;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:375px;max-width:420px;width:100%;padding:30px 24px 34px;border-radius:12px;overflow:hidden;background:var(--eg-paper);color:var(--eg-ink);box-shadow:inset 0 0 0 1px rgba(255,230,190,.18); }
.eg-envelope[data-style="holographic"] { --eg-paper:#6c242f;background:repeating-linear-gradient(130deg,#762b38 0 1px,#6c242f 1px 7px); }
.eg-envelope[data-style="aurora"] { --eg-paper:#245a53;--eg-ink:#f6ead0; }
.eg-envelope[data-style="citrus"] { --eg-paper:#debe7a;--eg-ink:#46331c; }
.eg-envelope[data-style="nocturne"] { --eg-paper:#252a2c;--eg-ink:#e9cf97; }
.eg-envelope::after { content:'';position:absolute;z-index:-1;inset:9px;border:1px solid rgba(239,206,151,.28);border-radius:6px;pointer-events:none; }
.eg-envelope-fold { position:absolute;z-index:-1;inset:0 0 auto;height:150px;clip-path:polygon(0 0,100% 0,50% 100%);background:rgba(255,219,163,.07);transform-origin:50% 0; }
.eg-envelope-mark { display:flex;align-items:center;justify-content:center;flex-shrink:0;width:52px;height:52px;padding:4px;background:rgba(255,255,255,.96);border:1px solid rgba(255,255,255,.45);border-radius:9px;margin-bottom:22px; }
.eg-brand-logo { display:block;width:44px;height:44px;object-fit:contain; }
.eg-envelope-copy { width:100%;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0; }
.eg-envelope .eg-envelope-label { font-size:11px;line-height:1.5;opacity:.83;margin-bottom:12px;overflow-wrap:anywhere; }
.eg-envelope .eg-envelope-copy h3 { color:inherit;font-size:24px;font-weight:600;line-height:1.35;overflow-wrap:anywhere; }
.eg-envelope .eg-envelope-subtitle { font-size:12px;line-height:1.6;margin-top:10px;max-width:270px;overflow-wrap:anywhere; }
.eg-envelope .eg-envelope-mystery { font-size:12px;line-height:1.5;margin-top:25px; }
.eg-envelope .eg-envelope-footer { font-size:10px;line-height:1.5;margin-top:12px;opacity:.83;overflow-wrap:anywhere; }
.eg-envelope-stamp { display:grid;place-items:center;min-height:38px;max-width:100%;padding:6px 20px;margin-top:24px;border:1px solid rgba(243,212,163,.45);border-radius:999px;font-size:13px;letter-spacing:.15em;overflow-wrap:anywhere; }
.eg-envelope-amount { font-size:clamp(30px,5vw,44px);font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;margin:22px 0 4px;max-width:100%;overflow-wrap:anywhere; }
.eg-dialog { width:min(620px,calc(100% - 28px));max-width:none;max-height:calc(100dvh - 24px);border:0;border-radius:12px;padding:22px;margin:auto;background:var(--eg-bg);overflow:auto;box-shadow:0 16px 56px rgba(0,0,0,.16); }
.eg-dialog::backdrop { background:transparent; }
.eg-dialog[open] { animation:eg-popup 320ms cubic-bezier(.2,.8,.3,1) both; }
.eg-dialog-heading { display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:18px; }
.eg-close { display:flex;align-items:center;justify-content:center;padding:6px 10px;min-width:44px;min-height:36px;color:var(--eg-fg);background:var(--eg-soft);border:1px solid var(--eg-line);border-radius:6px;font:inherit;font-size:12px;cursor:var(--cursor-interactive,pointer); }
.eg-packet-dialog { width:min(460px,calc(100% - 28px));background:transparent!important;box-shadow:none;padding:6px;border-radius:0; }
.eg-packet-dialog .eg-dialog-heading { padding:0 6px; }
.eg-packet-dialog .eg-dialog-heading h2 { font-size:14px;color:var(--eg-fg);padding:6px 10px;border-radius:5px;background:var(--eg-bg); }
.eg-packet-content { position:relative;padding:0 6px 8px; }
.eg-packet-content .eg-envelope { margin:auto;min-height:390px;animation:eg-envelope-enter 520ms cubic-bezier(.2,.85,.3,1) both; }
.eg-packet-content .eg-actions { margin-top:14px; }
.eg-packet-content .eg-actions .eg-button { flex:1; }
.eg-packet-expiry { font-size:12px;color:var(--eg-fg);text-align:center;margin:10px auto 0!important;background:var(--eg-bg);padding:5px 8px;border-radius:5px;max-width:fit-content; }
.eg-preview-tag { padding:7px;margin-bottom:10px!important;text-align:center;color:var(--eg-fg);background:var(--eg-bg);border-radius:5px;font-size:12px; }
.eg-packet-dialog .eg-error { background:var(--eg-bg);padding:8px;border-radius:5px; }
.eg-opening .eg-envelope-stamp { animation:eg-stamp-pulse 800ms ease-in-out infinite; }
.eg-opened .eg-envelope-fold { animation:eg-fold-open 650ms cubic-bezier(.25,.7,.25,1) forwards; }
.eg-opened .eg-envelope-stamp { display:none; }
.eg-opened .eg-envelope-copy { animation:eg-result 550ms ease-out both; }
.eg-confirm > p { margin:0 0 14px; }
.eg-confirm-total { display:block;margin:20px 0;font-size:28px;font-weight:600; }
.eg-checkin-preview { padding:0;margin:16px 0;list-style:none; }
.eg-checkin-preview li { display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;padding:14px 0;border-bottom:1px solid var(--eg-line);font-size:13px; }
.eg-checkin-preview li > strong { margin-left:auto;font-size:14px;font-variant-numeric:tabular-nums; }
.eg-checkin-preview small { flex-basis:100%;text-align:right;color:var(--eg-muted); }
.eg-checkin-hero { display:flex;align-items:center;justify-content:space-between;gap:28px;padding:28px;border:1px solid var(--eg-line);border-radius:12px;background:var(--eg-bg); }
.eg-checkin-hero h3 { font-size:20px; }
.eg-checkin-range { display:block;font-size:clamp(28px,4vw,40px);font-weight:600;line-height:1.3;font-variant-numeric:tabular-nums;margin:14px 0;overflow-wrap:anywhere; }
.eg-checkin-surprise { display:block;font-size:clamp(24px,3vw,32px);font-weight:600;line-height:1.35;margin:14px 0;overflow-wrap:anywhere; }
.eg-checkin-action { min-width:180px;max-width:280px; }
.eg-checkin-action .eg-button { width:100%; }
.eg-checkin-eligibility { padding-bottom:16px;margin-bottom:16px;border-bottom:1px solid var(--eg-line);font-size:13px;line-height:1.65; }
.eg-checkin-eligibility .eg-muted { margin:6px 0 0; }
.eg-checkin-eligibility .eg-recharge-link { margin-top:12px; }
.eg-preview-condition { margin-bottom:12px!important;font-size:13px;font-weight:500;overflow-wrap:anywhere; }
.eg-checkin-history { margin-top:32px; }
.eg-calendar { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;list-style:none;padding:0;margin:18px 0;max-width:720px; }
.eg-calendar li { display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:62px;border-radius:7px;background:var(--eg-soft);font-size:14px;font-variant-numeric:tabular-nums;color:var(--eg-muted); }
.eg-calendar li[data-signed="true"] { background:#e1ece3;color:#355c40; }
html.dark .eg-calendar li[data-signed="true"] { background:#293d30;color:#b3d7bc; }
.eg-day-check { font-size:10px; }
.eg-checkin-success { display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;padding:12px 0; }
.eg-checkin-success > strong { font-size:38px;font-variant-numeric:tabular-nums;font-weight:600; }
.eg-checkin-success > .eg-button { width:100%;margin-top:8px; }
#app-sidebar [data-engagement-nav] { flex:0 0 auto;padding:0 12px 8px; }
#app-sidebar [data-engagement-link] { gap:12px; }
#app-sidebar [data-engagement-link]:focus-visible { outline:2px solid var(--ovo-focus,#276dd7);outline-offset:2px; }
#app-sidebar.ovone-sidebar-compact .eg-nav-label { display:none; }
.eg-fireworks { position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:50; }
.eg-burst { display:block;position:absolute;width:1px;height:1px; }
.eg-spark { position:absolute;width:3px;height:9px;left:0;top:0;border-radius:999px;background:var(--eg-color);transform-origin:50% 0;animation:eg-firework 1.45s cubic-bezier(.12,.7,.3,1) var(--eg-delay) both; }
@keyframes eg-popup { from { opacity:0;transform:translateY(10px) scale(.98); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes eg-envelope-enter { 0% { opacity:0;transform:translateY(25px) rotate(-2deg) scale(.93); } 70% { opacity:1;transform:translateY(-3px) rotate(.4deg) scale(1.01); } 100% { opacity:1;transform:translateY(0) rotate(0) scale(1); } }
@keyframes eg-stamp-pulse { 50% { transform:scale(1.08) rotate(-2deg); } }
@keyframes eg-fold-open { to { opacity:0;transform:rotateX(130deg); } }
@keyframes eg-result { from { opacity:0;transform:translateY(16px) scale(.96); } to { opacity:1;transform:translateY(0) scale(1); } }
@keyframes eg-firework { 0% { opacity:0;transform:rotate(var(--eg-angle)) translateY(0) scale(.2); } 15% { opacity:1; } 100% { opacity:0;transform:rotate(var(--eg-angle)) translateY(var(--eg-distance)) scale(.6); } }
@media(max-width:980px) { .eg-admin-grid { gap:28px;grid-template-columns:minmax(0,1.1fr) minmax(250px,.8fr); }.eg-rule-row { grid-template-columns:80px minmax(60px,1fr) minmax(60px,1fr) 46px;gap:8px; } }
@media(max-width:800px) { .eg-admin-grid { grid-template-columns:minmax(0,1fr); }.eg-preview-pane { position:static; }.eg-preview-pane .eg-envelope { margin:0 auto; }.eg-preview-pane > h2 { margin-top:12px; }.eg-rule-row { grid-template-columns:90px minmax(70px,1fr) minmax(70px,1fr) 52px;gap:10px; } }
@media(max-width:680px) { .eg-preset-heading { align-items:flex-start;flex-direction:column;gap:4px; }.eg-preset-toolbar { grid-template-columns:minmax(0,1fr); }.eg-preset-actions { justify-content:stretch; }.eg-preset-actions > .eg-button { flex:1 1 140px; } }
@media(max-width:520px) { .eg-row { grid-template-columns:minmax(0,1fr);gap:0; }.eg-audience-options { padding:10px; }.eg-rule-row { grid-template-columns:repeat(3,minmax(0,1fr));gap:8px; }.eg-rule-row > .eg-button { grid-column:1/-1;justify-self:end;margin-top:-12px; }.eg-rule-row .eg-field > label { font-size:11px; }.eg-rule-row .eg-input { padding:8px 6px; }.eg-summary { grid-template-columns:minmax(0,1fr);gap:10px; }.eg-summary > div { display:flex;justify-content:space-between;gap:12px;align-items:baseline; }.eg-summary dd { font-size:18px; }.eg-checkin-hero { flex-direction:column;align-items:stretch;padding:20px; }.eg-checkin-action { min-width:0;max-width:none; }.eg-calendar { gap:6px; }.eg-calendar li { min-height:48px; }.eg-envelope { min-height:350px;padding:26px 20px; }.eg-dialog { padding:18px; }.eg-packet-dialog { padding:3px; }.eg-packet-content .eg-envelope { min-height:355px; }.eg-actions > .eg-button { flex:1; }.eg-route-tabs { gap:4px; }.eg-route-tab { padding:9px 10px;font-size:13px; } }
@media(prefers-reduced-motion:reduce) { .eg-dialog[open],.eg-envelope,.eg-envelope-fold,.eg-envelope-stamp,.eg-envelope-copy,.eg-spark { animation:none!important;transition:none!important; }.eg-fireworks { display:none; } }