:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; }
html { min-height: 100%; background: #e8edf4; }
body { margin: 0; }
.mini-shell { width: min(100%, 430px); margin-inline: auto; min-height: 100dvh; display: flex; flex-direction: column; background: #f4f6fa; --rpx: calc(min(100vw, 430px) / 750); box-shadow: 0 0 36px #26345013; }
.mini-page { flex: 1; min-width: 0; }
.mini-bar { position: sticky; top: 0; z-index: 5; background: #f7f9fd; padding: env(safe-area-inset-top) 48px 0; color: #162137; display: grid; place-items: center; min-height: calc(45px + env(safe-area-inset-top)); font-weight: 650; font-size: 15px; border-bottom: 1px solid #e8eef5; }
.mini-bar button { position: absolute; left: 3px; bottom: 1px; width: 42px; height: 42px; padding: 9px; background: none; border: 0; color: inherit; }
.mini-bar svg { width: 23px; height: 23px; }
.mini-footer { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); text-align: center; background: #f4f6fa; color: #60708a; font-size: 11px; }
.mini-placeholder { margin: 30px; text-align: center; color: #516481; }
view, scroll-view { display: block; }
scroll-view { overflow-x: auto; scrollbar-width: none; }
image { display: inline-block; }
img { max-width: 100%; vertical-align: middle; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
view[role=button], text[role=button], [data-mini-tappable] { cursor: pointer; }
[hidden] { display: none !important; }
button:focus-visible, view:focus-visible, .mini-picker:focus-within, input:focus-visible, textarea:focus-visible { outline: 2px solid #5878b4; outline-offset: 2px; }
.mini-page input:not([type=checkbox]), .mini-page textarea { appearance: none; }
.mini-page button { border-width: 0; }
.mini-page button.outline { border-width: 1px; }
.mini-picker { display: block; position: relative; min-width: 0; }
.mini-picker > select, .mini-picker > input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mini-picker > input::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }
.mini-switch { appearance: none; flex: 0 0 auto; width: 43px; height: 25px; border-radius: 30px; border: 1px solid #d2dbe7; background: #dce3ed; position: relative; margin: 0; cursor: pointer; }
.mini-switch:checked { border-color: var(--switch-color, #3153ad); background: var(--switch-color, #3153ad); }
.mini-switch::before { content: ''; display: block; position: absolute; width: 19px; height: 19px; top: 2px; left: 2px; background: white; border-radius: 50%; box-shadow: 0 1px 4px #24304d35; }
.mini-switch:checked::before { left: 20px; }
.mini-switch:disabled { opacity: .6; }
input[type=checkbox]:not(.mini-switch) { accent-color: #a8223e; width: 16px; height: 16px; }
#mini-toast { position: fixed; z-index: 10; inset: auto 15px 36px; width: max-content; max-width: min(calc(100% - 30px), 360px); margin: auto; padding: 11px 17px; border-radius: 11px; background: #20324ceb; color: white; font-size: 14px; text-align: center; }
#mini-dialog { width: min(calc(100% - 24px), 400px); max-height: calc(100dvh - 30px); border: 1px solid #dce5ef; border-radius: 18px; padding: 18px; color: #283654; }
#mini-dialog::backdrop { background: #18264280; }
#mini-dialog h2 { font-size: 17px; margin: 0 0 12px; }
#mini-dialog p { font-size: 14px; line-height: 1.6; }
.mini-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mini-dialog-actions button, .mini-dialog-actions a { color: #fff; background: #3153ad; border: 0; border-radius: 8px; padding: 9px 12px; font-size: 13px; text-decoration: none; }
#mini-dialog iframe { width: 100%; height: 65dvh; border: 1px solid #dae4f0; }