:root { color-scheme: light dark; --page: #fff; --surface: #fff; --text: #202124; --muted: #62666d; --line: #ddd; --accent: #006ad4; }
    body, .content { background: var(--page); color: var(--text); }
    .bar { background: var(--surface); border-color: var(--line); }
    .title { color: var(--text); }
    .bar-tab .tab-item { color: var(--muted); }
    .bar-tab .tab-item.active, a { color: var(--accent); }
    .content { padding-bottom: calc(70px + env(safe-area-inset-bottom)); }
    .content-padded { max-width: 680px; margin: 20px auto; padding: 0 16px; }
    .table-view { margin: 12px 0 24px; background: var(--surface); border-color: var(--line); }
    .table-view-cell { padding: 14px 16px; border-color: var(--line); overflow-wrap: anywhere; }
    .table-view-cell > a:not(.btn) { display: inline; margin: 0; padding: 0; white-space: normal; color: var(--accent); }
    .table-view-cell::after { background-color: var(--line); }
    .section-title { margin: 24px 0 8px; font-size: 18px; line-height: 1.4; }
    .item-title { display: block; margin-bottom: 6px; font-weight: 600; }
    p, .table-view-cell { color: var(--text); font-size: 16px; line-height: 1.5; }
    label { display: block; margin-bottom: 8px; font-weight: 600; }
    input[type="text"] { height: 44px; background: var(--surface); color: var(--text); border-color: var(--line); font-size: 18px; }
    input::placeholder { color: var(--muted); opacity: 1; }
    .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
    .btn { min-height: 44px; white-space: normal; }
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
    .error { color: #b42318; }
    .site-footer { text-align: center; }
    .bar-tab { height: calc(50px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
    @media (prefers-color-scheme: dark) {
      :root { --page: #151517; --surface: #222225; --text: #f2f2f7; --muted: #b4b4bd; --line: #44444a; --accent: #79b7ff; }
      .btn-primary { color: #121214; }
      .error { color: #ffaaa2; }
    }
    
[hidden] { display: none !important; }
#loading-status { color: var(--muted); font-size: 14px; }
#share-result { position: static; transform: none; margin-top: 8px; }

.app-brand { display: flex; align-items: center; justify-content: center; gap: 8px; }
.app-brand img { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; }

.bar-nav > .title { display: flex; justify-content: center; }
a.app-brand { min-height: 44px; padding: 0 8px; color: inherit; text-decoration: none; }