.btn { display:inline-flex; align-items:center; justify-content:center; gap: var(--s-2);
    padding: var(--s-2) var(--s-4); min-height: 40px; background: rgba(255,255,255,.06);
    border: 1px solid var(--glass-border); color: var(--fg); border-radius: var(--r-2);
    font-size: var(--fs-md); font-weight: var(--fw-med); cursor:pointer; user-select:none;
    transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.btn:hover { background: rgba(255,255,255,.10); border-color: var(--border-hi); }
.btn:active { transform: scale(.97); }
.btn.primary { color:#fff; background: var(--accent); border-color: transparent; }
.btn.primary:hover { background: var(--accent-hi); }


.notice { display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
    width: min(100%, 340px); padding: var(--s-8) var(--s-6);
    background: var(--bg-card); border: 1px solid var(--border-2);
    border-radius: var(--r-5); box-shadow: var(--sh-1); text-align: center; }
.notice-icon { width: 48px; height: 48px; display: grid; place-items: center;
    border-radius: var(--r-pill); background: var(--accent-soft); color: var(--accent); }
.notice-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor;
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notice-title { font-size: var(--fs-lg); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-snug); color: var(--fg); margin: 0; }
.notice-text { font-size: var(--fs-md); color: var(--fg-dim);
    line-height: var(--lh-base); margin: 0; max-width: 28ch; }

/* install banner */
.install-banner { position: fixed; left: var(--s-4); right: var(--s-4); bottom: calc(var(--tabbar-h) + var(--s-4));
    z-index: 55; padding: var(--s-3) var(--s-4); border-radius: var(--r-4);
    background: var(--bg-card); border: 1px solid var(--border-2); box-shadow: var(--sh-2); }
.install-banner-inner { display: flex; align-items: center; gap: var(--s-3); }
.install-banner-text { flex: 1 1 auto; min-width: 0; }
.install-banner-title { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--fg); }
.install-banner-desc { font-size: var(--fs-sm); color: var(--fg-dim); line-height: var(--lh-base); margin-top: 2px; }
.install-banner-action { flex: 0 0 auto; height: 36px; padding: 0 var(--s-4); border-radius: var(--r-2);
    border: none; background: var(--accent); color: #fff; font-size: var(--fs-sm); font-weight: var(--fw-semi); cursor: pointer; }
.install-banner-close { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
    border: none; background: transparent; color: var(--fg-mute); font-size: 22px; line-height: 1; cursor: pointer; }