.home-header { background: var(--surface); }
.home-toolbar {
  position: sticky;
  z-index: 32;
  top: 0;
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
}
.home-toolbar .feed-tabs { border-bottom: 0; }
.toolbar-balance { display: block; background: var(--surface); }
.home-search { display: grid; place-items: center; color: var(--text); background: var(--surface); }
.home-search:active { background: var(--pressed); }

.detail-article { padding: 2px 14px 22px; }
.page--detail { padding-top: 54px; padding-bottom: 92px; }
.page--dialogue { padding-top: 50px; }
.detail-author { margin-top: 12px; }
.detail-images { margin: 16px -14px 18px 0; }
.detail-images .image-strip { margin-left: 0; }
.detail-body { font-size: 17px; line-height: 1.8; white-space: pre-wrap; }
.detail-body p { margin: 0 0 1.25em; }
.panel { min-height: 260px; background: var(--surface); }
.list-item { padding: 15px 14px; border-bottom: 1px solid var(--line); }
.list-item--reply { position: relative; margin-left: 30px; padding-left: 12px; background: #fcfcfc; }
.list-item--reply::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.list-item--reply.depth-2 { margin-left: 30px; }
.list-item__head { display: flex; align-items: center; gap: 8px; }
.list-item__body { margin: 9px 0 0 38px; font-size: 15px; line-height: 1.6; white-space: pre-wrap; }
.reply-context { display: block; margin-bottom: 3px; color: var(--muted); font-size: 12px; }
.comment-actions { display: flex; gap: 22px; margin: 8px 0 0 34px; }
.comment-action { display: flex; align-items: center; gap: 4px; padding: 4px; color: var(--muted); background: transparent; font-size: 11px; }
.comment-action.is-liked { color: var(--text); }
.comment-action.is-liked .icon { fill: currentColor; }

.dialogue-preview { padding: 8px 14px 20px; }
.dialogue-actions { min-height: 30px; display: flex; justify-content: flex-end; align-items: center; }
.dialogue-actions button, .dialogue-page-report { padding: 6px 9px; color: #777; background: transparent; font-size: 11px; }
.dialogue-message { display: flex; gap: 9px; margin-top: 14px; }
.dialogue-message.is-other { flex-direction: row-reverse; }
.dialogue-bubble { max-width: 78%; padding: 10px 12px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 14px; font-size: 14px; line-height: 1.55; }
.dialogue-message.is-other .dialogue-bubble { background: #ededed; }
.dialogue-more { width: 100%; margin-top: 18px; padding: 11px 14px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 12px; font-weight: 700; }

.dialogue-page { padding: 38px 14px 100px; }
.dialogue-page-report { position: absolute; z-index: 32; top: 8px; right: 12px; }
.jump-latest { position: fixed; z-index: 30; right: 16px; bottom: 22px; padding: 10px 13px; background: var(--text); color: #fff; border-radius: 999px; box-shadow: 0 8px 18px rgba(0,0,0,.18); font-size: 12px; }

.gallery-overlay { position: absolute; z-index: 120; inset: 0; display: none; align-items: center; justify-content: center; overflow: hidden; background: rgba(0,0,0,.94); border-radius: 38px; }
.gallery-overlay.is-open { display: flex; }
.gallery-overlay img { max-width: 100%; max-height: 84%; object-fit: contain; }
.gallery-close { position: absolute; top: 18px; right: 18px; width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.14); border-radius: 50%; }
.gallery-index { position: absolute; top: 26px; left: 50%; color: #fff; font-size: 13px; transform: translateX(-50%); }
.gallery-nav { position: absolute; top: 50%; width: 46px; height: 54px; display: grid; place-items: center; color: #fff; background: rgba(255,255,255,.1); border-radius: 12px; transform: translateY(-50%); }
.gallery-prev { left: 12px; }
.gallery-next { right: 12px; }

.editor-page,
.search-page { min-height: calc(var(--device-height) - 32px); background: #fff; }
.editor-header,
.search-header { position: sticky; z-index: 40; top: 0; min-height: 56px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.editor-header__title { flex: 1; font-weight: 750; text-align: center; }
.editor-header__spacer { width: 38px; flex: 0 0 38px; }
.header-action { min-width: 56px; min-height: 36px; padding: 0 14px; color: #fff; background: #111; border-radius: 999px; font-size: 13px; font-weight: 700; }
.editor-form { padding: 18px 16px 32px; }
.response-source-card { margin-bottom: 18px; padding: 12px; color: #555; background: #f5f5f5; border-radius: 12px; }
.response-source-card strong { display: block; margin-bottom: 5px; color: #111; font-size: 13px; }
.response-source-card p { display: -webkit-box; margin: 0; overflow: hidden; font-size: 12px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.editor-field { display: block; margin-bottom: 16px; }
.editor-field span { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 700; }
.editor-field input,
.editor-field textarea { width: 100%; padding: 12px 13px; color: #111; background: #fff; border: 1px solid #d8d8d8; border-radius: 12px; outline: none; }
.editor-field input:focus,
.editor-field textarea:focus { border-color: #777; }
.editor-field textarea { min-height: 260px; resize: vertical; line-height: 1.7; }
.image-picker-toggle { min-height: 42px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; background: #f1f1f1; border-radius: 11px; font-weight: 700; }
.image-picker { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 11px; }
.image-picker.is-open { display: grid; }
.image-choice { position: relative; overflow: hidden; aspect-ratio: 1; padding: 0; background: #eee; border: 2px solid transparent; border-radius: 11px; }
.image-choice.is-selected { border-color: #111; }
.image-choice.is-selected::after { content: "✓"; position: absolute; right: 5px; top: 5px; width: 22px; height: 22px; display: grid; place-items: center; color: #fff; background: #111; border-radius: 50%; font-size: 12px; }
.image-choice img { width: 100%; height: 100%; display: block; object-fit: cover; }
.editor-helper { margin: 10px 0 0; color: #777; font-size: 12px; line-height: 1.55; }
.editor-submit { width: 100%; min-height: 48px; margin-top: 26px; color: #fff; background: #111; border-radius: 14px; font-size: 15px; font-weight: 750; }
.editor-submit:active { background: #333; }

.search-header { padding: 8px 10px; }
.search-back { flex: 0 0 38px; }
.search-box { flex: 1; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 11px; background: #f3f3f3; border-radius: 12px; }
.search-box input { width: 100%; min-width: 0; padding: 0; background: transparent; border: 0; outline: none; }
.search-submit { flex: 0 0 auto; padding: 8px 4px; background: transparent; font-size: 14px; font-weight: 700; }
.search-suggestions { display: none; padding: 8px 14px 18px; border-bottom: 1px solid var(--line); }
.search-suggestions.is-visible { display: block; }
.search-suggestions__label { margin: 8px 0; color: #888; font-size: 12px; }
.search-suggestion { width: 100%; padding: 12px 2px; background: #fff; border-bottom: 1px solid #eee; text-align: left; }

.profile-page { background: #fff; }
.profile-hero { padding: 22px 16px 18px; border-bottom: 1px solid var(--line); }
.profile-page.page--no-nav .profile-hero { padding-top: 72px; }
.profile-hero__top { display: flex; align-items: center; gap: 8px; }
.profile-avatar { width: 66px; height: 66px; flex-basis: 66px; margin-right: auto; font-size: 20px; }
.profile-hero h1 { margin: 14px 0 2px; font-size: 22px; }
.profile-handle { color: #777; font-size: 12px; }
.profile-hero p { margin: 10px 0; font-size: 14px; line-height: 1.55; }
.profile-stats { display: flex; gap: 18px; color: #666; font-size: 12px; }
.profile-stats strong { color: #111; font-size: 14px; }
.profile-secondary,
.profile-follow { min-height: 34px; padding: 0 12px; background: #f1f1f1; border-radius: 999px; font-size: 12px; font-weight: 700; }
.profile-follow { color: #fff; background: #111; }
.profile-follow.is-following { color: #111; background: #f1f1f1; }
.profile-more { width: 34px; height: 34px; display: grid; place-items: center; background: #f1f1f1; border-radius: 50%; }
.profile-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
.profile-tabs--single { display: block; padding: 15px 16px 11px; font-size: 14px; font-weight: 750; }
.profile-empty { padding: 64px 20px; color: #888; text-align: center; }

.simple-header { position: sticky; z-index: 40; top: 0; min-height: 56px; display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; padding: 0 6px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); text-align: center; backdrop-filter: blur(14px); }
.simple-save { color: #111; background: transparent; font-size: 13px; font-weight: 750; }
.settings-page { background: #f5f5f5; }
.profile-edit-form { padding: 24px 16px; background: #fff; }
.profile-edit-avatar { position: relative; width: 72px; height: 72px; margin: 0 auto 28px; font-size: 20px; }
.profile-edit-avatar span { position: absolute; left: 50%; top: calc(100% + 7px); width: 88px; color: #555; font-size: 11px; transform: translateX(-50%); }
.profile-edit-form label { display: block; margin-top: 17px; }
.profile-edit-form label > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.profile-edit-form input,
.profile-edit-form textarea { width: 100%; padding: 11px 12px; background: #fff; border: 1px solid #d7d7d7; border-radius: 11px; outline: none; }
.profile-edit-form textarea { min-height: 100px; resize: vertical; line-height: 1.55; }
.readonly-profile-field { display: flex; align-items: center; justify-content: space-between; margin-top: 17px; padding: 11px 12px; color: #666; background: #f3f3f3; border-radius: 11px; font-size: 12px; }
.readonly-profile-field strong { color: #222; letter-spacing: .04em; }
.settings-form { margin-top: 12px; }
.form-submit { width: 100%; min-height: 44px; margin-top: 22px; color: #fff; background: #111; border-radius: 12px; font-weight: 700; }
.settings-list { margin: 12px 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.settings-row,
.settings-static,
.switch-row,
.blocked-row { width: 100%; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: #fff; border-bottom: 1px solid #eee; text-align: left; }
.settings-row:last-child,
.settings-static:last-child,
.switch-row:last-child,
.blocked-row:last-child { border-bottom: 0; }
.settings-row span { display: flex; flex-direction: column; gap: 3px; }
.settings-row strong { font-size: 14px; }
.settings-row small { color: #888; font-size: 11px; }
.settings-static span { color: #777; font-size: 13px; }
.settings-static strong { font-size: 13px; }
.logout-button,
.danger-button { width: calc(100% - 32px); min-height: 44px; margin: 14px 16px; color: #b3261e; background: #fff; border-radius: 12px; font-weight: 700; }
.settings-empty { padding: 72px 20px; color: #888; text-align: center; }
.settings-copy { margin-top: 12px; padding: 22px 18px; background: #fff; }
.settings-copy h2 { margin: 0 0 18px; font-size: 20px; }
.settings-copy p { margin: 0 0 14px; color: #444; font-size: 14px; line-height: 1.7; }
.about-card { padding: 74px 20px; background: #fff; text-align: center; }
.about-mark { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 14px; color: #fff; background: #111; border-radius: 18px; font-size: 24px; font-weight: 800; }
.about-card h2 { margin: 0; font-size: 20px; }
.about-card p { margin: 6px 0 18px; color: #777; font-size: 12px; }
.about-card small { color: #555; }
.switch-row { position: relative; font-size: 14px; }
.switch-row input { position: absolute; opacity: 0; }
.switch-row i { position: relative; width: 44px; height: 26px; background: #ccc; border-radius: 999px; transition: .15s; }
.switch-row i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: .15s; }
.switch-row input:checked + i { background: #111; }
.switch-row input:checked + i::after { transform: translateX(18px); }
.blocked-row { justify-content: flex-start; }
.blocked-row strong { flex: 1; }
.blocked-row button { padding: 7px 10px; background: #eee; border-radius: 999px; font-size: 11px; }

.action-overlay { position: absolute; z-index: 130; inset: 0; display: flex; align-items: flex-end; padding: 14px; background: rgba(0,0,0,.38); }
.action-sheet { width: 100%; overflow: hidden; background: #fff; border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.2); }
.action-sheet > button { width: 100%; min-height: 52px; padding: 0 18px; background: #fff; border-bottom: 1px solid #eee; text-align: center; font-weight: 650; }
.action-sheet > button.is-danger { color: #b3261e; }
.action-sheet__cancel { margin-top: 7px; border-top: 7px solid #f2f2f2; border-bottom: 0 !important; }
.action-confirm { padding: 18px 18px 10px; text-align: center; }
.action-confirm p { margin: 7px 0; color: #777; font-size: 12px; line-height: 1.55; }

.notifications-page { background: #fff; }
.notifications-header { position: sticky; z-index: 42; top: 0; min-height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.notifications-header > strong { font-size: 19px; }
.notifications-header span { display: flex; align-items: center; gap: 12px; }
.notifications-header button { padding: 7px 0; color: #555; background: transparent; font-size: 12px; }
.notification-tabs { position: sticky; z-index: 41; top: 54px; display: grid; grid-template-columns: repeat(5, 1fr); background: #fff; border-bottom: 1px solid var(--line); }
.notification-tabs .tab-button { min-width: 0; padding: 0 4px; }
.notification-tabs .tab-button i { position: absolute; top: 10px; right: 13px; width: 6px; height: 6px; background: #d93025; border-radius: 50%; }
.notification-item { position: relative; width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 15px 16px; background: #fff; border-bottom: 1px solid #eee; text-align: left; }
.notification-item.is-unread { background: #fafafa; }
.notification-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.notification-copy strong { font-size: 14px; line-height: 1.45; }
.notification-copy > span { display: -webkit-box; overflow: hidden; color: #555; font-size: 12px; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.notification-copy small { color: #999; font-size: 10px; }
.notification-unread { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 6px; background: #d93025; border-radius: 50%; }
.notification-system { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #fff; background: #777; border-radius: 9px; font-weight: 800; }
.notification-empty { padding: 80px 20px; color: #888; text-align: center; }

.auth-page { min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 34px 28px 52px; background: #fff; }
.auth-brand { margin-bottom: 30px; text-align: center; }
.auth-mark { width: 62px; height: 62px; display: grid; place-items: center; margin: 0 auto 16px; color: #fff; background: #111; border-radius: 18px; font-size: 24px; font-weight: 800; }
.auth-brand h1 { margin: 0; font-size: 25px; }
.auth-brand p { margin: 8px 0 0; color: #777; font-size: 13px; line-height: 1.5; }
.auth-form label { display: block; margin-bottom: 15px; }
.auth-form label > span { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.auth-form input:not([type="checkbox"]) { width: 100%; height: 46px; padding: 0 12px; background: #fff; border: 1px solid #d5d5d5; border-radius: 11px; outline: none; }
.auth-form input:focus { border-color: #777; }
.auth-primary { width: 100%; min-height: 46px; margin-top: 5px; color: #fff; background: #111; border-radius: 12px; font-weight: 750; }
.auth-link { display: block; margin: 14px auto 0; color: #555; background: transparent; font-size: 12px; }
.auth-switch { margin-top: 24px; color: #777; font-size: 13px; text-align: center; }
.auth-switch button { padding: 4px; background: transparent; font-weight: 750; }
.auth-agreement { display: flex !important; align-items: flex-start; gap: 8px; color: #666; font-size: 11px; line-height: 1.5; }
.auth-agreement input { margin-top: 2px; }
.auth-agreement span { margin: 0 !important; font-weight: 400 !important; }
.auth-code-row { display: flex !important; align-items: center; gap: 8px; margin: 0 !important; }
.auth-code-row input { min-width: 0; flex: 1; }
.auth-code-row button { flex: 0 0 auto; height: 46px; padding: 0 12px; border: 1px solid #d5d5d5; border-radius: 11px; background: #f5f5f5; font-size: 12px; font-weight: 700; }