.all-shell{padding-top:max(8px,env(safe-area-inset-top))!important}.all-topbar{align-items:center!important;justify-content:flex-end!important;gap:0!important;min-height:0!important;padding:0 4px 5px!important}.all-topbar>.brand-lockup{display:none!important}.all-topbar .topbar-status{flex:0 0 auto!important;width:auto!important;min-width:0!important;align-items:center!important;justify-content:flex-end!important;gap:0!important;padding:0!important}.all-topbar .history-link{display:none!important}.all-topbar .sync-status{width:auto!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--muted)!important;font-family:"DotGothic16",monospace!important;font-size:9px!important;font-weight:400!important;line-height:1.15!important;letter-spacing:.04em!important;white-space:nowrap!important;text-align:right!important;opacity:.48!important}
/* Everything below is copied property-for-property from refine-v4.css's
   .scope-menu rules (the actual production styling on index.html's scope
   summary/control-bar), targeting all.html's equivalent ids/classes, so the
   two pages render byte-identical button sizes and text instead of two
   independently-approximated versions drifting apart. Deliberately does NOT
   force its own width/layout on .window-control/.period-tabs - those already
   share the same base classes as index.html in ui-v3.css, so leaving them
   alone lets the same responsive breakpoints (680px) apply identically. */
#allScopeSummary{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:44px;margin:0 0 14px;padding:11px 14px;border-radius:16px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.84);box-shadow:0 6px 20px rgba(173,82,119,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.all-scope-summary-text{display:flex;align-items:center;flex-wrap:wrap;gap:6px 18px;color:var(--muted);font-size:var(--fs-2xs);font-weight:var(--fw-medium);line-height:1.4}
.all-scope-summary-text b{color:var(--ink);font-size:var(--fs-2xs);font-weight:var(--fw-bold)}
#allScopeToggle{flex:0 0 auto;border:0;background:transparent;padding:0;color:var(--accent-dark);font-size:var(--fs-2xs);font-weight:var(--fw-black);white-space:nowrap}
.all-control-bar{width:100%;margin:0 0 14px;padding:11px;border-radius:18px}
.all-control-bar .control-label{font-size:var(--fs-2xs)}
/* index.html's window-control layout (label stacked above a full-width
   period-tabs row) isn't the shared ui-v3.css default - it comes from
   refine-v4.css's .scope-menu override, which this file's header comment
   said not to copy on the assumption the shared 680px breakpoint alone
   would keep both pages matching. Confirmed by screenshot comparison
   2026-08-18 that it doesn't: without this, all.html's period-tabs sit
   inline next to the "見る期間" label instead of stacked below it. */
.all-control-bar .window-control{display:block!important;margin-top:8px;padding-top:8px}
.all-control-bar .window-control .period-tabs{width:100%!important;min-width:0!important;margin-top:7px}
.all-control-bar .mini-segment{padding:8px 6px;font-size:var(--fs-sm)}
.all-control-bar .period-button{padding:8px 4px;font-size:var(--fs-2xs);white-space:nowrap}
.all-history-period-link{text-decoration:none;display:flex;align-items:center;justify-content:center;color:var(--ink)}
.all-hero{margin-top:14px}
@media(max-width:620px){.all-scope-summary-text{gap:4px 12px}}
@media(max-width:640px){.all-shell{padding-top:max(6px,env(safe-area-inset-top))!important}.all-topbar{align-items:center!important;justify-content:flex-end!important;padding:0 3px 4px!important}.all-topbar .topbar-status{padding:0!important}.all-topbar .sync-status{font-size:9px!important}.all-hero{margin-top:12px}}
@media(max-width:420px){.all-topbar .sync-status{font-size:8px!important;opacity:.46!important}}