/* Shared responsive shell. Page-specific styles stay in their original files. */
:root { --cms-sidebar-expanded: 240px; --cms-sidebar-collapsed: 72px; }
html, body { width: 100%; min-width: 0; }
.app-wrapper { --cms-sidebar-width: var(--cms-sidebar-expanded); width: 100%; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; }
.app-wrapper.is-collapsed { --cms-sidebar-width: var(--cms-sidebar-collapsed); }
.app-wrapper .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--cms-sidebar-width); height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; z-index: 60; }
.app-wrapper .sidebar-header { flex: 0 0 64px; height: 64px; min-height: 64px; padding: 0 16px; gap: 10px; }
.app-wrapper .logo-img { flex: 0 0 36px; width: 36px; height: 36px; }
.app-wrapper .logo-text { min-width: 0; font-size: .94rem; }
.app-wrapper .sidebar-nav { flex: 1 1 auto; min-height: 0; max-height: none; display: block; padding: 16px 12px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; }
.app-wrapper .nav-item { min-height: 44px; padding: 10px 12px; gap: 10px; margin-bottom: 5px; white-space: nowrap; }
.app-wrapper .nav-icon { flex: 0 0 20px; width: 20px; height: 20px; margin: 0; }
.app-wrapper .sidebar-footer { display: block; flex: 0 0 auto; min-height: 76px; padding: 16px 12px max(16px, env(safe-area-inset-bottom)); }
.app-wrapper .sidebar-footer .logout { width: 100%; min-height: 44px; margin: 0; border: 0; background: transparent; font: inherit; text-align: left; }
.app-wrapper .sidebar-footer .logout:hover { background: #fef2f2; color: var(--danger); }
.app-wrapper .main-content { flex: 1 1 0%; min-width: 0; width: calc(100% - var(--cms-sidebar-width)); max-width: calc(100% - var(--cms-sidebar-width)); min-height: 100vh; min-height: 100dvh; margin-left: var(--cms-sidebar-width); }
.app-wrapper .top-header { flex: 0 0 auto; height: 64px; min-height: 64px; padding: 0 24px; gap: 16px; z-index: 20; }
.header-navigation { display: flex; align-items: center; gap: 12px; min-width: 0; }
.app-wrapper .breadcrumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-wrapper .header-actions { flex: 0 0 auto; gap: 14px; }
.app-wrapper .header-actions .action-btn { flex: 0 0 28px; display: flex; align-items: center; justify-content: center; min-width: 28px; min-height: 36px; }
.app-wrapper .page-content { width: 100%; max-width: none; min-width: 0; margin: 0; padding: 24px; }
.sidebar-toggle, .sidebar-close { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text-muted); cursor: pointer; }
.sidebar-toggle:hover, .sidebar-close:hover { color: var(--primary); background: #eff6ff; }
.sidebar-toggle svg, .sidebar-close svg { width: 20px; height: 20px; fill: currentColor; }
.app-wrapper .sidebar-close { display: none; }
.sidebar-backdrop { display: none; }
.app-wrapper.is-collapsed .sidebar-header { justify-content: center; padding-inline: 0; }
.app-wrapper.is-collapsed .logo-text, .app-wrapper.is-collapsed .nav-label { display: none; }
.app-wrapper.is-collapsed .nav-item { justify-content: center; padding-inline: 0; gap: 0; }
.app-wrapper.is-collapsed .sidebar-nav, .app-wrapper.is-collapsed .sidebar-footer { padding-inline: 10px; }
:where(.sidebar-toggle,.sidebar-close,.sidebar .nav-item,.table-scroll):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Flexible content and local scrolling: do not hide overflowing page content. */
.page-content :where(div,section,form,fieldset), .page-content > *, .modal-overlay :where(form,fieldset,div) { min-width: 0; }
.page-content :where(h1,h2,h3,h4,p,label,dd), .modal-overlay :where(p,label,dd) { overflow-wrap: anywhere; }
:where(.form-input,.form-select,.form-textarea,input[type="datetime-local"],input[type="date"]) { min-width: 0; max-width: 100%; }
:where(.content-card,.config-container,.settings-container,.art-card,.diary-card,.album-card,.friend-card,.mail-settings-card) { min-width: 0; max-width: 100%; }
:where(.toolbar,.section-header,.page-header,.page-action-bar,.card-header,.mail-heading,.mail-queue-heading,.mail-settings-heading,.setting-item,.album-header-row1,.album-meta,.c-header,.c-actions,.art-footer) { flex-wrap: wrap; gap: 12px; }
:where(.action-group,.toolbar-actions,.actions,.header-right,.mail-settings-heading > div,.mail-pagination > div) { flex-wrap: wrap; gap: 8px; }
.toolbar > div, .page-action-bar > div { min-width: 0; flex-wrap: wrap; }
.table-scroll, .mail-table-scroll { display: block; min-width: 0; width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.table-scroll > table { width: 100%; min-width: 600px; }
.table-scroll > .detail-table { min-width: 360px; }
.mail-table { min-width: 1160px; }
.table-scroll pre, .editor-preview pre { max-width: 100%; overflow-x: auto; }
.dashboard-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.dashboard-main, .charts-grid { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
.col-stack, .dashboard-main > *, .charts-grid > *, .config-grid > *, .modal-body-grid > * { min-width: 0; }
.article-grid, .diary-grid, .friends-grid { grid-template-columns: repeat(auto-fill,minmax(min(300px,100%),1fr)); }
.gallery-grid { grid-template-columns: repeat(auto-fill,minmax(min(280px,100%),1fr)); }
.img-grid { grid-template-columns: repeat(auto-fill,minmax(min(160px,100%),1fr)); }
.photo-grid { grid-template-columns: repeat(auto-fill,minmax(min(180px,100%),1fr)); }
.fallback-grid { grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.responsive-grid-2 { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.responsive-grid-3 { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.responsive-actions { flex-wrap: wrap; }
.diary-images { min-width: 0; max-width: 100%; }
.diary-images img { flex-shrink: 0; }
.friend-title, .art-title, .diary-title, .album-title, .post-slug { min-width: 0; overflow-wrap: anywhere; }
.avatar-input-group .form-input { flex: 1 1 0%; width: 0; }
.album-header-row1 .meta-item { min-width: 0; overflow-wrap: anywhere; }
.upload-panel { width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); right: 16px; bottom: max(16px,env(safe-area-inset-bottom)); }
.upload-panel .up-header { flex-shrink: 0; }
.upload-panel .up-list { min-height: 0; overflow-y: auto; }
.modal-overlay { padding: 16px; }
.modal-overlay :is(.modal-box,.modal-container,.modal-box-edit,.modal-box-detail) { min-width: 0; max-width: 100%; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
.modal-overlay :is(.modal-box,.modal-box-edit) { overflow-y: auto; overscroll-behavior: contain; }
.modal-container .modal-header, .modal-container .modal-footer, .modal-box-detail .info-header, .modal-box-detail .info-footer { flex: 0 0 auto; flex-wrap: wrap; gap: 10px; }
.modal-container .modal-body, .modal-info-col .info-body { min-height: 0; overflow: auto; }
.modal-footer { flex-wrap: wrap; }
.modal-box-detail { min-height: 0; }
.modal-img-col, .modal-info-col { min-width: 0; min-height: 0; }
.modal-img { display: block; max-width: 100%; max-height: 100%; }
body[data-cms-page="comments"] .cms-layout { grid-template-columns: minmax(240px,320px) minmax(0,1fr); height: calc(100vh - 112px); height: calc(100dvh - 112px); }
.article-panel, .comment-panel, .article-list, .comments-container { min-width: 0; min-height: 0; }
.article-panel .panel-header, .comment-panel .toolbar { flex: 0 0 auto; }
.c-body, .quote-block, .badge-slug, .c-user { overflow-wrap: anywhere; }
.c-user, .art-meta { flex-wrap: wrap; }
.c-actions .action-btn, .audit-select { flex-shrink: 0; }
.meta-grid { grid-template-columns: repeat(auto-fit,minmax(min(200px,100%),1fr)); }
body[data-cms-page="mail"] .mail-heading { flex-direction: row; align-items: center; }
.mail-queue-card, .mail-page #panel-queue, .mail-page #panel-settings { min-width: 0; max-width: 100%; }
.mail-filters label { flex: 1 1 160px; max-width: 100%; min-width: 0; }
.mail-filters .mail-search { flex: 2 1 180px; }
.mail-filters input, .mail-filters select { width: 100%; min-width: 0; }
.mail-setting-row > div { flex: 1 1 0%; }
.mail-setting-control { flex-shrink: 0; min-width: 0; max-width: 100%; }
.mail-stat { overflow-wrap: anywhere; }
.mail-pagination { flex-wrap: wrap; }
.mail-dialog { max-height: calc(100dvh - 32px); }
.mail-dialog-header, .mail-dialog-footer { flex-shrink: 0; }
.mail-dialog pre { min-width: 0; max-width: 100%; }

/* The editor stays an independent workspace with its original publishing actions. */
body[data-cms-page="editor"] { height: 100vh; height: 100dvh; min-width: 0; min-height: 0; }
body[data-cms-page="editor"] .editor-header { height: auto; min-height: 60px; flex-wrap: wrap; gap: 8px 16px; }
body[data-cms-page="editor"] .header-left { min-width: 0; flex: 1 1 200px; gap: 10px; }
body[data-cms-page="editor"] .header-right { flex: 0 0 auto; }
body[data-cms-page="editor"] .post-slug { display: block; max-width: min(36vw,480px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-cms-page="editor"] .save-status { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body[data-cms-page="editor"] .config-panel { flex: 0 0 auto; max-height: 40vh; max-height: 40dvh; min-height: 0; }
body[data-cms-page="editor"] .config-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
body[data-cms-page="editor"] .config-toggle-bar { flex: 0 0 auto; }
body[data-cms-page="editor"] .editor-container, body[data-cms-page="editor"] .EasyMDEContainer { flex: 1 1 0%; min-height: 0; min-width: 0; }
body[data-cms-page="editor"] .CodeMirror { min-width: 0; min-height: 0 !important; }
body[data-cms-page="editor"] .CodeMirror:not(.CodeMirror-fullscreen) { height: auto; }
body[data-cms-page="editor"] .CodeMirror-scroll { min-height: 0 !important; }
body[data-cms-page="editor"] .editor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
body[data-cms-page="editor"] .editor-toolbar.fullscreen { height: auto; min-height: 50px; }
body[data-cms-page="editor"] .CodeMirror-fullscreen, body[data-cms-page="editor"] .editor-preview-side { top: var(--editor-fullscreen-toolbar-height,50px) !important; }
body[data-cms-page="editor"] .editor-toolbar button.has-children ul { left: auto !important; right: 0; max-height: min(280px,45dvh) !important; }
body[data-cms-page="editor"] .editor-preview { overflow-wrap: anywhere; }
body[data-cms-page="index"] { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body[data-cms-page="index"] .login-main { min-width: 0; }
body[data-cms-page="index"] .login-card { min-width: 0; }
body[data-cms-page="index"] .totp-container { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); width: 100%; max-width: 338px; margin-inline: auto; gap: clamp(4px,2vw,10px); }
body[data-cms-page="index"] .totp-input { width: 100%; min-width: 0; }

@media (max-width:1199px) {
  .app-wrapper .page-content { padding: 20px; }
  .dashboard-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .dashboard-main, .charts-grid { grid-template-columns: minmax(0,1fr); }
  .mail-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width:1023px) {
  body[data-cms-page="comments"] .cms-layout { grid-template-columns: minmax(0,1fr); height: auto; overflow: visible; }
  body[data-cms-page="comments"] .article-panel { max-height: min(36dvh,320px); }
  body[data-cms-page="comments"] .article-list { flex: 1 1 auto; min-height: 100px; }
  body[data-cms-page="comments"] .comment-panel { min-height: 360px; }
  body[data-cms-page="comments"] .comments-container { overflow: visible; }
  body[data-cms-page="editor"] .config-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:899px) {
  .modal-box-detail { flex-direction: column; height: calc(100dvh - 32px); }
  .modal-box-detail .modal-img-col { flex: 0 0 min(35dvh,300px); min-height: 120px; overflow: hidden; }
  .modal-box-detail .modal-info-col { flex: 1 1 0%; width: 100%; min-height: 0; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width:767px) {
  .app-wrapper, .app-wrapper.is-collapsed { --cms-sidebar-width: 0px; display: flex; }
  .app-wrapper .main-content { width: 100%; max-width: 100%; margin-left: 0; }
  .app-wrapper .sidebar { width: min(280px,calc(100vw - 48px)); height: 100vh; height: 100dvh; transform: translateX(-100%); visibility: hidden; transition: transform .18s ease,visibility .18s; box-shadow: 10px 0 30px #0f172a26; }
  .app-wrapper.is-menu-open .sidebar { transform: translateX(0); visibility: visible; }
  .app-wrapper .sidebar-header { justify-content: flex-start; padding-inline: 16px; }
  .app-wrapper .logo-text, .app-wrapper .nav-label { display: initial; }
  .app-wrapper .sidebar-close { display: inline-flex; flex-basis: 32px; width: 32px; height: 32px; margin-left: auto; }
  .app-wrapper .sidebar-nav { display: block; max-height: none; padding: 16px 12px; }
  .app-wrapper .nav-item { justify-content: flex-start; padding: 10px 12px; gap: 10px; margin-bottom: 5px; }
  .app-wrapper .sidebar-footer { display: block; padding-inline: 12px; }
  .app-wrapper.is-menu-open .sidebar-backdrop { display: block; position: fixed; inset: 0; border: 0; background: #0f172a66; z-index: 50; cursor: pointer; touch-action: none; }
  .app-wrapper .top-header { padding-inline: 16px; gap: 10px; min-height: 60px; height: 60px; }
  .app-wrapper .header-navigation { gap: 8px; }
  .app-wrapper .header-actions { gap: 6px; }
  .app-wrapper .page-content { padding: 16px; }
  .app-wrapper .user-profile img { width: 30px; height: 30px; }
  .app-wrapper .breadcrumb { font-size: 1rem; }
  .content-card, .diary-card { padding: 16px; }
  .section-header, .page-header, .page-action-bar { align-items: flex-start; }
  .section-header > .action-group, .page-header > .action-group, .page-action-bar > div:last-child { margin-left: auto; }
  .mail-queue-card { padding: 0; }
  body[data-cms-page="mail"] .mail-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
  .mail-queue-heading { align-items: flex-start; }
  .mail-queue-heading, .mail-filters { padding-inline: 16px; }
  .mail-settings-heading { align-items: flex-start; flex-direction: column; }
  .mail-settings-heading > div { width: 100%; }
  .mail-setting-row { gap: 12px; }
  .mail-setting-control { width: 145px; }
  .mail-connection { grid-template-columns: 110px minmax(0,1fr); }
  .mail-pagination { padding-inline: 16px; }
  .mail-queue-card > .mail-note { padding-inline: 16px; }
  .modal-overlay { padding: 12px; }
  .modal-overlay :is(.modal-box,.modal-container,.modal-box-edit,.modal-box-detail) { max-height: calc(100dvh - 24px); max-width: 100%; }
  body[data-cms-page="friends"] .modal-body-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  body[data-cms-page="friends"] .modal-box, body[data-cms-page="diary"] .modal-box { padding: 20px; }
  .responsive-grid-3 { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .editor-preview { padding: 16px !important; }
}
@media (max-width:639px) {
  .responsive-grid-2, .responsive-grid-3 { grid-template-columns: minmax(0,1fr); }
  .mail-stat { padding: 12px; }
  .mail-stat strong { font-size: 1.4rem; }
  .mail-setting-row { align-items: flex-start; }
  .mail-setting-row:not(:has(input[type="checkbox"])) { flex-direction: column; gap: 8px; }
  .mail-setting-row > :not(input[type="checkbox"]).mail-setting-control { width: 100%; }
  .mail-connection { grid-template-columns: minmax(0,1fr); gap: 4px; }
  .mail-connection dd { margin-bottom: 10px; }
  .setting-item { align-items: flex-start; gap: 12px; }
  .replies { margin-left: 8px; padding-left: 6px; }
  .replies .replies { margin-left: 0; padding-left: 4px; }
  .replies .replies .replies { border-left: 0; padding-left: 0; }
  .c-header, .c-actions, .toolbar-actions { flex-wrap: wrap; }
  .comments-container { padding: 12px; }
  .comment-card { padding: 12px; }
  .toolbar { padding: 12px; }
  body[data-cms-page="editor"] .editor-header { padding: 8px 12px; gap: 8px; }
  body[data-cms-page="editor"] .header-left { flex-basis: 100%; }
  body[data-cms-page="editor"] .header-right { flex: 1 1 100%; justify-content: flex-end; }
  body[data-cms-page="editor"] .header-right .btn { flex: 1 1 auto; justify-content: center; }
  body[data-cms-page="editor"] .post-slug { max-width: 55vw; }
  body[data-cms-page="editor"] .config-panel { padding: 16px; }
  body[data-cms-page="editor"] .config-grid { grid-template-columns: minmax(0,1fr); gap: 0; }
  body[data-cms-page="index"] .login-header { display: grid; grid-template-columns: 32px minmax(0,1fr); height: auto; min-height: 72px; padding: 12px 16px; gap: 8px 12px; }
  body[data-cms-page="index"] .logo-img1 { width: 32px; height: 32px; }
  body[data-cms-page="index"] .brand { position: static; transform: none; font-size: 1rem; white-space: normal; }
  body[data-cms-page="index"] .visit-btn { grid-column: 1/-1; justify-self: end; font-size: .85rem; padding: 0; }
  body[data-cms-page="index"] .login-main { padding: 24px 16px; }
  body[data-cms-page="index"] .login-footer { padding: 16px; }
}
@media (max-width:399px) {
  .app-wrapper .top-header { padding-inline: 10px; }
  .app-wrapper .header-actions { gap: 2px; }
  .app-wrapper .header-actions .action-btn { flex-basis: 26px; min-width: 26px; }
  .app-wrapper .page-content { padding: 12px; }
  .img-grid, .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .mail-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .mail-filters label { flex-basis: 100%; }
  .friend-card { padding: 14px; gap: 10px; }
  .friend-avatar { width: 48px; height: 48px; }
}
@media (hover:none) { .friend-card .card-actions { opacity: 1; } }
@media (prefers-reduced-motion:reduce) {
  .app-wrapper .sidebar, .art-card, .album-card, .diary-card, .friend-card { transition: none; }
}

@media (max-width:767px) {
  body[data-cms-page] :is(.form-input,.form-select,.form-textarea,.audit-select,.mail-setting-control,.mail-filters input,.mail-filters select) { font-size: 16px; }
  .app-wrapper .sidebar-toggle, .app-wrapper .sidebar-close { flex-basis: 40px; width: 40px; height: 40px; }
}

/* The comment detail dialog uses opacity rather than display to animate. */
body[data-cms-page="comments"] .modal-overlay:not(.show) { visibility: hidden; }
body[data-cms-page="comments"] .modal-overlay.show { visibility: visible; }