.archive-bar { position:fixed; z-index:160; top:0; left:0; right:0; height:34px; background:#f4f3ed; border-bottom:1px solid #dcded8; display:flex; align-items:center; gap:12px; padding:0 16px; font:11px 'IBM Plex Mono',monospace; }
.archive-bar strong { letter-spacing:.06em; }
.archive-bar button,.archive-bar select { font:inherit; color:inherit; background:transparent; border:1px solid #ccc; border-radius:4px; padding:3px 7px; }
.archive-bar .archive-state { margin-left:auto; color:#62675f; }
body { padding-top:34px; }
#view-main { top:34px; height:calc(100dvh - 34px); }
.view:not(#view-main) { top:34px; height:calc(100dvh - 34px); }
.side-panel { top:34px!important; }
.archive-monogram { width:88px; height:98px; display:grid; place-items:center; margin:0 auto 22px; border:1px solid #b9c4b7; border-radius:4px 4px 42px 42px; color:#415844; font:40px Georgia,serif; background:#f2f5ef; }
.archive-bar [hidden] {display:none;}
.archive-bar a {color:inherit;white-space:nowrap;}
.demo-archive #auth-login > :not(#guest-code-box):not(.auth-hint) {display:none!important;}
.demo-archive #guest-code-box {display:block;}
.demo-archive #menu-register,.demo-archive #show-register {display:none!important;}
#archive-billing { width:min(520px,calc(100vw - 32px)); margin:auto; padding:28px; border:1px solid #ddd; border-radius:10px; color:#222; font:13px 'IBM Plex Mono',monospace; }
#archive-billing::backdrop {background:#0005;}
#archive-billing h2 {font-size:20px;margin-bottom:24px;}
#archive-billing dl {display:grid;grid-template-columns:1fr 1.3fr;gap:14px;margin:24px 0;}
#archive-billing dt {color:#6b7280;}
#archive-billing dd {margin:0;}
#archive-billing p {font-size:11px;line-height:1.7;color:#6b7280;}
#archive-billing button {float:right;border:0;background:none;font-size:22px;cursor:pointer;}
@media(max-width:599px) { .archive-bar {padding:0 9px;gap:6px;font-size:10px;} .archive-state {display:none;} .archive-bar #archive-billing-button {margin-left:auto;} .view.side-panel {top:auto!important;height:50dvh!important;} }