.mobile-bottom-nav{display:none}
@media(max-width:760px){
 html,body{min-width:0;width:100%;height:100%;min-height:0;overflow:hidden;background:#f3f6f7}.phone-shell,.sidebar,.window-bar{display:none!important}
 .workspace{width:100%;height:100dvh;min-height:0;display:block;margin:0;border:0;border-radius:0;background:#f3f6f7;overflow:hidden}
 .app-area{width:100%;height:100dvh;min-height:0;padding:0 0 calc(76px + env(safe-area-inset-bottom));overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch}
 .topbar{top:0;z-index:20;min-height:62px;padding:10px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;background:rgba(248,250,251,.96)}
 .search{width:100%;min-width:0;min-height:42px;padding:0 12px}.search>span{display:none}.search input{min-width:0;padding:0 6px;font-size:16px;line-height:1.4}.search input:focus-visible{outline:0}.search:focus-within{border-color:#8b969d;box-shadow:inset 0 0 0 1px rgba(36,45,56,.12)}
 .top-actions{gap:6px}.top-actions>.ghost-btn{display:none}.avatar-login{width:42px;height:42px}
 .account-menu{position:fixed;top:60px;right:10px;width:min(300px,calc(100vw - 20px));max-height:calc(100dvh - 84px);overflow-y:auto}
 .view.active{width:100%;padding:16px 12px 26px}.section-head{margin:8px 0 12px;align-items:center;flex-direction:row;gap:10px}
 h2,.diary-section-head h2{font-size:23px;line-height:1.25}
 .diary-today{min-height:0;grid-template-columns:62px minmax(0,1fr);gap:12px;padding:14px;border-radius:8px}
 .date-ticket{width:62px;height:76px}.date-ticket strong{font-size:30px}.date-ticket span{font-size:10px}
 .diary-today-copy h1{margin:4px 0 5px;font-size:21px}.diary-today-copy p{margin:0;font-size:13px;line-height:1.5}.diary-write-button{min-height:42px}
 .week-memory{padding:12px;border-radius:8px}.week-memory-head{gap:8px}.week-memory-head p{font-size:13px}
 .diary-calendar{overflow:visible;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding-bottom:3px}.diary-calendar button{height:54px;padding:3px 1px}.diary-calendar button small{font-size:9px}.diary-calendar button strong{font-size:15px}.diary-calendar::-webkit-scrollbar{display:none}
 .feed-layout,.compose-layout,.diary-compose-layout,.profile-layout,.message-center,.album-workspace{grid-template-columns:minmax(0,1fr);gap:12px}
 .action-dashboard,.diary-preview-card{display:none}
 .segmented,.filter-bar,.tabs{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}.segmented button,.filter-bar button,.tabs button{flex:0 0 auto;white-space:nowrap}
 .post-card{padding:12px;border-radius:8px}.post-author-profile small{font-size:13px}
 .photo-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.photo-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
 .photo-grid.three img,.photo-grid.two img{width:100%;height:auto;aspect-ratio:1;object-fit:cover}.photo-grid.single .post-image{height:auto;max-height:62dvh;aspect-ratio:auto}
 .post-actions{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.post-actions button{min-width:0;min-height:40px;padding:0 4px;font-size:12px}
 .comment-box{padding:10px;font-size:13px}
 .discover-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.discover-card{min-width:0;border-radius:8px}.discover-card h3,.discover-card p{overflow-wrap:anywhere}
 .diary-compose-layout{margin-top:10px}.diary-compose-card{padding:12px;border-radius:8px}.diary-paper-editor{min-height:0}.diary-paper-editor textarea{height:clamp(140px,22dvh,180px);min-height:140px;max-height:240px}
 .mood-options{width:100%;overflow-x:auto;flex-wrap:nowrap}
 .diary-settings{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .diary-save-button{width:100%;min-height:44px}
 .profile-editor,.material-form,.audit-board,.report-summary,.report-grid{grid-template-columns:minmax(0,1fr)}
 .profile-card{width:100%;border-radius:8px}.profile-card .profile-cover{height:132px}.profile-card .profile-info{align-items:center;flex-direction:row}
 .profile-card .profile-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-card .profile-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 .conversation-panel,.notification-panel,.album-sidebar,.album-detail{min-width:0}.message-list article{align-items:flex-start;flex-direction:row}
 .album-grid,.album-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
 .modal{z-index:80;align-items:end;padding:0}.modal-card,.feedback-card,.avatar-editor-card{width:100%;max-width:none;max-height:92dvh;margin:0;padding:18px 14px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;border-radius:12px 12px 0 0}
 #loginModal{z-index:80;align-items:center;padding:8px}
 #loginModal .auth-card{width:calc(100% - 16px);max-height:calc(100dvh - 16px);padding:0;overflow:hidden;border-radius:12px}
 #loginModal .auth-main{max-height:calc(100dvh - 16px);padding:18px 14px calc(18px + env(safe-area-inset-bottom));overflow-y:auto}
 .toast{right:12px;bottom:calc(76px + env(safe-area-inset-bottom));left:12px;width:auto;text-align:center}
 .mobile-feedback-fab{position:fixed;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:42;display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:34px;padding:0 12px;border:1px solid rgba(32,36,42,.08);border-radius:999px;background:rgba(255,255,255,.94);color:#4f5b63;font-size:12px;font-weight:800;box-shadow:0 8px 22px rgba(31,42,50,.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
 .mobile-feedback-fab:active{transform:scale(.96)}
 .mobile-bottom-nav{position:fixed;right:0;bottom:0;left:0;z-index:40;height:calc(64px + env(safe-area-inset-bottom));padding:4px 8px env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:start;background:rgba(255,255,255,.96);border-top:1px solid #e3e8eb;box-shadow:0 -5px 18px rgba(31,42,50,.06);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
 .mobile-bottom-nav button{position:relative;min-width:0;height:58px;display:grid;place-items:center;align-content:center;gap:3px;color:#74808a;background:transparent;-webkit-tap-highlight-color:transparent;transition:color .18s ease,transform .18s ease}
 .mobile-bottom-nav button:active{transform:scale(.94)}
 .mobile-bottom-nav .nav-icon{width:32px;height:28px;display:grid;place-items:center;border-radius:9px;transition:background .18s ease,color .18s ease}
 .mobile-bottom-nav .nav-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
 .mobile-bottom-nav button>small{font-size:10px;font-weight:500;line-height:13px;letter-spacing:0}.mobile-bottom-nav button.active{color:#168661}.mobile-bottom-nav button.active:not(.mobile-publish) .nav-icon{background:#eef6f2}.mobile-bottom-nav button.active:not(.mobile-publish)::after{content:"";position:absolute;bottom:1px;width:14px;height:2px;border-radius:2px;background:#16a765}
 .mobile-bottom-nav .mobile-publish{color:#64717a}.mobile-bottom-nav .mobile-publish .publish-icon{width:40px;height:40px;margin-top:-14px;border:3px solid rgba(255,255,255,.96);border-radius:50%;color:#fff;background:#16a765;box-shadow:0 6px 16px rgba(22,167,101,.22)}.mobile-bottom-nav .mobile-publish .publish-icon svg{width:21px;height:21px;stroke-width:1.9}.mobile-bottom-nav .mobile-publish>small{margin-top:-1px;font-weight:600}.mobile-bottom-nav .mobile-publish.active>small{color:#168661}
}
@media(max-width:380px){.discover-grid,.album-grid,.album-strip{grid-template-columns:minmax(0,1fr)}.post-actions{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* Keep discovery readable on phone-sized canvases, including iPhone 13 Pro. */
@media(max-width:520px){
 #discover .discover-sort,#discover .filter-bar{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none;overscroll-behavior-x:contain}
 #discover .discover-sort::-webkit-scrollbar,#discover .filter-bar::-webkit-scrollbar{display:none}
 #discover .discover-sort button,#discover .filter-bar button{flex:0 0 auto;white-space:nowrap}
 #discover .discover-grid{grid-template-columns:minmax(0,1fr);gap:12px}
 #discover .discover-feed-post{padding:12px}
 #discover .discover-feed-post .photo-grid.single .post-image{width:100%;height:auto;max-height:none;object-fit:contain}
 #discover .discover-card{width:100%;border-radius:8px}
 #discover .discover-card>img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;background:#f6f8f9}
 #discover .discover-card h3{margin:12px 0 0;font-size:17px;line-height:1.45}
 #discover .discover-card p{margin:7px 0 0;font-size:13px;line-height:1.55}
 #discover .discover-card-author{padding-top:10px}
 #discover .discover-card[data-discover-post-id]:hover{transform:none}
}


@media (max-width: 720px) {
 .profile-cover-wrap{height:132px}
 .profile-cover-action{top:8px;right:8px;min-height:34px}
 .cover-preview-stage{aspect-ratio:16/7}
 .cover-editor-actions{grid-template-columns:1fr 1fr}
 .cover-editor-actions span{display:none}
 .cover-editor-actions .primary-btn{grid-column:1/-1}
}
@media (max-width: 720px) {
 .profile-layout.guest-mode{margin-top:0;gap:12px}
 .profile-layout.guest-mode .profile-card{width:100%}
 .profile-layout.guest-mode .profile-cover-wrap{height:132px}
 .profile-layout.guest-mode .profile-info .avatar{width:84px;height:84px}
 .profile-layout.guest-mode .guest-profile-state{padding:12px 4px 20px}
 .profile-layout.guest-mode .guest-profile-state h3{font-size:24px}
 .profile-layout.guest-mode .guest-profile-state p{font-size:14px;line-height:1.65}
 .profile-layout.guest-mode .guest-profile-state button{min-height:42px;padding:0 16px;font-size:14px}
}
@media (max-width: 720px) {
  .location-settings { padding: 13px; gap: 10px; }
  .location-settings-head { align-items: flex-start; }
  .location-settings-head span { line-height: 1.45; }
  .location-settings-head button { min-height: 38px; padding: 0 11px; }
  .location-settings input { min-height: 43px; }
}

@media (max-width: 720px) {
  #discover .discover-text-entry { padding: 16px 6px 10px; }
  #discover .discover-text-content { min-height: 0; }
  #discover .discover-text-copy { margin: 14px 0 12px; font-size: 18px; line-height: 1.7; }
  #discover .discover-text-entry .discover-card-author { padding: 10px 0 0; }
}

@media (max-width: 720px) {
  .image-album-section { margin-top: 22px; padding-top: 18px; }
  .notebook-post-item { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 9px; padding: 8px; }
  .notebook-post-item > img,.notebook-text-mark { width: 46px; height: 46px; }
  .notebook-post-item > .ghost-btn { min-height: 36px; padding: 0 10px; }
}
/* Keep profile identity readable below the cover on phone-sized screens. */
@media (max-width: 760px) {
  #profile .profile-card { overflow: hidden; }
  #profile .profile-cover-wrap { height: 132px; overflow: hidden; }
  #profile .profile-info {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    align-items: start;
    gap: 0;
    margin-top: -42px;
    padding: 0 16px 14px;
    text-align: center;
  }
  #profile .profile-info .avatar {
    position: relative;
    z-index: 3;
    display: block;
    width: 84px;
    height: 84px;
    min-width: 84px;
    border: 4px solid #fff;
    border-radius: 50%;
    background: #edf2f1;
    object-fit: cover;
  }
  #profile .profile-copy { width: 100%; min-width: 0; padding-top: 8px; background: #fff; }
  #profile .profile-copy h2 { margin: 8px 0 4px; }
  #profile .profile-copy p { margin: 0; }
}
@media (max-width: 760px) {
  .mobile-collection-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin: 0 0 14px;
    padding: 4px;
    border: 1px solid #dce3e7;
    border-radius: 8px;
    background: #fff;
  }

  .mobile-collection-switch button {
    min-height: 42px;
    border: 0;
    border-radius: 6px;
    color: #65717a;
    background: transparent;
    font-size: 14px;
    font-weight: 800;
  }

  .mobile-collection-switch button.active {
    color: #fff;
    background: #20262d;
  }

  #materials .image-album-section {
    scroll-margin-top: 76px;
  }
}
@media (max-width: 760px) {
  .atmosphere-compose-head { margin-bottom: 6px; }
  .atmosphere-compose-head h2 { font-size: 25px; }
  .atmosphere-compose-head p { font-size: 13px; line-height: 1.55; }
  .diary-paper-editor header { gap: 10px; }
  .diary-paper-editor textarea { height: clamp(150px, 24dvh, 210px); min-height: 150px; padding: 14px; }
  .atmosphere-fields,.privacy-picker { grid-template-columns: minmax(0, 1fr); }
  .privacy-picker { gap: 6px; }
  .privacy-picker label > span { min-height: 58px; padding: 10px 12px; }
  .photo-style-panel { margin-top: 4px; padding: 10px; overflow: hidden; }
  .photo-style-panel fieldset { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .photo-style-panel legend { flex: 0 0 42px; width: 42px; }
  .photo-style-panel label { flex: 0 0 auto; }
  .selected-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diary-preview-card { display: none; }
  .diary-save-button { position: sticky; z-index: 3; bottom: calc(72px + env(safe-area-inset-bottom)); width: 100%; min-height: 48px; }
  .photo-grid.layout-carousel { margin-right: -12px; padding-right: 12px; }
  .photo-grid.layout-carousel img { flex-basis: 88%; }
  .photo-grid.layout-story img { max-height: none; }
  .post-atmosphere { margin-top: 8px; }
  .low-pressure-actions { justify-content: flex-start; }
  .low-pressure-actions button { min-width: 40px; padding: 0 8px; }
}
@media (max-width: 760px) {
  .atmosphere-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .atmosphere-fields input,.atmosphere-fields select { width: 100%; min-width: 0; }
  .privacy-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .privacy-picker label > span { min-height: 82px; padding: 9px; }
  .privacy-picker strong { font-size: 13px; }
  .privacy-picker small { font-size: 10px; }
  .diary-save-button { position: static; }
}
@media (max-width: 760px) {
  .weather-only-field { width: min(100%, 220px); grid-template-columns: minmax(0, 1fr); }
}

/* Mobile overlay safety: keep dialogs and notices fully usable. */
@media (max-width: 760px) {
  .app-area {
    padding-bottom: calc(116px + env(safe-area-inset-bottom));
  }

  .view.active {
    padding-bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .modal.open {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .modal-card,
  .feedback-card,
  .share-card,
  .social-modal-card,
  .edit-post-card,
  .cover-editor-card,
  .avatar-editor-card {
    width: calc(100vw - 16px);
    max-width: none;
    max-height: calc(100dvh - 16px);
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
  }

  #feedbackModal .feedback-card,
  #shareModal .share-card,
  #editPostModal .edit-post-card,
  #userProfileModal .social-modal-card {
    padding: 18px 14px calc(22px + env(safe-area-inset-bottom));
  }

  #postDetailModal .post-detail-modal-card,
  #chatModal .chat-card {
    height: calc(100dvh - 16px);
    padding: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  #postDetailModal .post-detail-content,
  #chatModal .chat-thread {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #postDetailModal .post-detail-comment-form,
  #chatModal .chat-form {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    background: var(--paper);
  }

  #feedbackModal .section-head,
  #shareModal .section-head,
  #editPostModal .section-head {
    position: sticky;
    top: -18px;
    z-index: 2;
    margin: -2px -2px 12px;
    padding: 2px 2px 10px;
    background: var(--paper);
  }

  .feedback-form {
    gap: 14px;
  }

  .feedback-rating-options {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .feedback-form input,
  .feedback-form select,
  .feedback-form textarea {
    min-height: 44px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .feedback-form textarea {
    min-height: 132px;
  }

  .share-channel-list {
    grid-template-columns: 1fr;
  }

  .share-card .link-box {
    max-height: 112px;
    overflow-y: auto;
    font-size: 13px;
  }

  .toast {
    top: calc(72px + env(safe-area-inset-top));
    right: auto;
    bottom: auto;
    left: 50%;
    z-index: 120;
    width: max-content;
    max-width: calc(100vw - 64px);
    padding: 11px 16px;
    border-radius: 999px;
    text-align: center;
    transform: translate(-50%, -8px);
  }

  .toast.show {
    transform: translate(-50%, 0);
  }

  .mobile-feedback-fab {
    bottom: calc(86px + env(safe-area-inset-bottom));
    z-index: 38;
    min-width: 44px;
    height: 32px;
    padding: 0 10px;
    opacity: .86;
  }

  body:has(.modal.open) .mobile-feedback-fab,
  body:has(.modal.open) .mobile-bottom-nav {
    visibility: hidden;
    pointer-events: none;
  }
}
@media (max-width: 760px) {
  #userProfileModal .social-modal-card {
    height: calc(100dvh - 16px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    padding: 0;
    overflow: hidden;
  }

  #userProfileModal .section-head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0;
    padding: 14px 14px 10px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
  }

  #userProfileModal .section-head h2 {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 20px;
  }

  #userProfileModal .public-profile {
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .refined-profile-head {
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
  }

  .refined-profile-head img {
    width: 58px;
    height: 58px;
  }

  .refined-profile-head strong {
    font-size: 20px;
  }

  .refined-profile-head span,
  .refined-profile-head p {
    font-size: 13px;
  }

  .compact-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .compact-stats > span {
    min-height: 62px;
    padding: 10px;
    align-content: center;
    text-align: center;
  }

  .compact-stats strong {
    font-size: 22px;
  }

  .public-profile-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .public-profile-actions button {
    width: 100%;
    text-align: center;
  }
}
@media (max-width: 760px) {
  #profile .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #profile .profile-editor textarea {
    min-height: 116px;
  }
}
@media(max-width:760px){
 body.share-mode{overflow:auto;background:#f3f6f7}
 body.share-mode .app-area{display:none}
 .share-landing{min-height:100dvh;padding:18px 12px calc(24px + env(safe-area-inset-bottom));place-items:start center;overflow-y:auto}
 .share-landing-shell{gap:12px}
 .share-landing-brand{padding:7px 10px;font-size:13px}.share-landing-brand img{width:24px;height:24px}
 .share-landing-card{padding:18px;border-radius:14px}.share-landing-intro h1{font-size:27px;line-height:1.14}.share-landing-intro p{font-size:14px;line-height:1.65}
 .share-access-form{grid-template-columns:minmax(0,1fr);gap:12px}.share-access-form input{min-height:46px;font-size:16px}.share-access-form button{width:100%;min-height:44px}
 .share-target-card{border-radius:14px}.share-public-cover{max-height:none}.share-public-cover img{max-height:none;width:100%;height:auto;object-fit:contain}
 .share-public-body{padding:16px;gap:12px}.share-public-body h2{font-size:23px}.share-public-body p{font-size:16px;line-height:1.75}
 .share-target-photos.multi{grid-template-columns:minmax(0,1fr)}.share-target-photos img{max-height:none}
 .share-public-body footer{align-items:flex-start;flex-direction:column;font-size:12px}
 .share-landing-actions{border-radius:14px}.share-landing-actions button{flex:1;min-height:40px}
}

@media(max-width:760px){
 .diary-editor-actions{gap:8px;align-items:center}.diary-voice-btn,.diary-add-image-btn{min-height:36px;padding:0 11px;font-size:13px}
 .voice-recorder{align-items:flex-start;flex-direction:column}.voice-recorder audio,.comment-voice-row audio{width:100%}
 .comment-voice-row{align-items:flex-start;flex-direction:column}.comment-voice-row .ghost-btn{width:100%}
 .voice-player{width:100%;padding:10px}.voice-player audio{height:34px}
}

/* Mobile typography alignment with desktop. */
@media (max-width: 760px) {
  body {
    font-size: 16px;
  }

  .view.active {
    font-size: 16px;
  }

  h2,
  .diary-section-head h2 {
    font-size: 28px;
    line-height: 1.22;
  }

  .section-head .eyebrow,
  .week-memory-head .eyebrow,
  .post-author-profile small,
  .comment-box,
  .discover-card p,
  .diary-today-copy p,
  .week-memory-head p,
  .atmosphere-compose-head p,
  .profile-layout.guest-mode .guest-profile-state p,
  .share-landing-intro p {
    font-size: 14px;
    line-height: 1.65;
  }

  .diary-today-copy h1 {
    font-size: 30px;
    line-height: 1.2;
  }

  .atmosphere-compose-head h2 {
    font-size: 30px;
  }

  .post-card {
    font-size: 16px;
  }

  .text-diary-entry h3 {
    font-size: 24px;
  }

  .text-diary-entry p,
  .image-diary-copy,
  #discover .discover-text-copy,
  .share-public-body p {
    font-size: 17px;
    line-height: 1.9;
  }

  .image-diary-title,
  .discover-card h3,
  .share-public-body h2 {
    font-size: 21px;
    line-height: 1.35;
  }

  .segmented button,
  .filter-bar button,
  .tabs button,
  .ghost-btn,
  .primary-btn,
  .diary-write-button,
  .diary-save-button,
  .diary-add-image-btn,
  .diary-voice-btn {
    font-size: 15px;
  }

  .post-actions button {
    font-size: 13px;
  }

  .mobile-bottom-nav button > small {
    font-size: 11px;
    line-height: 14px;
  }

  .diary-calendar button small {
    font-size: 10px;
  }

  .diary-calendar button strong {
    font-size: 18px;
  }
}

@media (max-width: 760px) {
  .voice-recorder,
  .comment-voice-row {
    align-items: stretch;
  }
  .voice-preview-card {
    width: 100%;
  }
  .voice-recorder > .ghost-btn,
  .comment-voice-row > .ghost-btn {
    width: auto;
    align-self: flex-start;
  }
}

/* Phone profile cover should feel like a real social cover, not a small banner. */
@media (max-width: 760px) {
  #profile .profile-layout:not(.guest-mode) .profile-card {
    width: 100%;
    border-radius: 10px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-cover-wrap {
    height: 210px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-info {
    grid-template-columns: 96px minmax(0, 1fr);
    justify-items: start;
    align-items: end;
    gap: 14px;
    margin: -46px 16px 0;
    padding: 0 0 14px;
    text-align: left;
  }

  #profile .profile-layout:not(.guest-mode) .profile-info .avatar {
    width: 96px;
    height: 96px;
    min-width: 96px;
    border: 4px solid var(--paper);
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy {
    width: auto;
    padding: 0 0 8px;
    background: transparent;
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy h2 {
    margin: 0 0 5px;
    font-size: 24px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy p {
    margin: 0;
    font-size: 13px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats {
    margin: 0 16px 12px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 16px 18px;
  }
}

/* Phone profile stats should feel like a quiet summary row. */
@media (max-width: 760px) {
  #profile .profile-layout:not(.guest-mode) .profile-stats {
    gap: 6px;
    margin: 0 16px 10px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats button {
    min-height: 48px;
    padding: 6px 4px;
    border-radius: 8px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats strong {
    font-size: 18px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats span {
    margin-top: 3px;
    font-size: 11px;
  }
}

/* Dark phone collection switch and album panels. */
@media (max-width: 760px) {
  :root[data-theme="dark"] .mobile-collection-switch {
    border-color: #263033;
    background: #101415;
  }

  :root[data-theme="dark"] .mobile-collection-switch button {
    color: #9ca8ab;
    background: transparent;
  }

  :root[data-theme="dark"] .mobile-collection-switch button.active {
    color: #eef3f2;
    background: #1f2629;
    box-shadow: inset 0 0 0 1px #3a4448;
  }

  :root[data-theme="dark"] #materials .image-library-panel,
  :root[data-theme="dark"] #materials .image-album-section,
  :root[data-theme="dark"] #album .album-workspace {
    background: transparent;
  }
}

/* Avoid the avatar/name sitting exactly on the cover edge on phones. */
@media (max-width: 760px) {
  #profile .profile-layout:not(.guest-mode) .profile-info {
    margin: -98px 16px 0;
    padding-bottom: 20px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy {
    padding-bottom: 15px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy h2 {
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,.32);
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy p {
    color: rgba(255,255,255,.78);
    text-shadow: 0 1px 8px rgba(0,0,0,.26);
  }
}

/* Phone profile cover layout fix */
@media (max-width: 760px) {
  #profile .profile-layout:not(.guest-mode) .profile-cover-wrap {
    height: 220px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-info {
    margin: -92px 16px 0;
    min-height: 118px;
    padding-bottom: 24px;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-info .avatar {
    width: 88px;
    height: 88px;
    min-width: 88px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-copy {
    padding-bottom: 14px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats {
    margin: 0 16px 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
}

/* Phone profile edit consolidation and clean stats */
@media (max-width: 760px) {
  #profile .profile-layout:not(.guest-mode) .profile-cover-wrap::before {
    content: "";
    display: none;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats {
    justify-content: flex-start;
    gap: 24px;
    margin: 0 16px 18px;
    padding-top: 2px;
    border-top: 0;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats button {
    padding: 0;
    min-height: 0;
    border: 0;
    background: transparent;
  }

  #profile .profile-layout:not(.guest-mode) .profile-stats strong {
    font-size: 17px;
  }

  #profile .profile-layout:not(.guest-mode) .profile-editor {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Phone dark-mode album seam fix */
@media (max-width: 760px) {
  :root[data-theme="dark"] .photo-album-sidebar .album-grid,
  :root[data-theme="dark"] #album .album-grid {
    background: #0b0e0f;
  }

  :root[data-theme="dark"] .album-pane-label,
  :root[data-theme="dark"] .album-list-head {
    background: #0f1314;
    border-color: #263033;
  }
}

/* Visitor profile uses the same cover hierarchy as My Profile on phones. */
@media (max-width: 760px) {
  #userProfileModal {
    align-items: stretch;
    padding: 0;
  }
  #userProfileModal .social-modal-card {
    width: 100vw;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  #userProfileModal .section-head {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 6;
    justify-content: flex-end;
    padding: 12px 14px;
    border: 0;
    background: transparent;
    pointer-events: none;
  }
  #userProfileModal .section-head > div {
    display: none;
  }
  #userProfileModal .section-head .icon-btn {
    border-color: rgba(255,255,255,.34);
    background: rgba(19,24,28,.64);
    color: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,.18);
    pointer-events: auto;
  }
  #userProfileModal .public-profile {
    gap: 14px;
    max-height: none;
    padding: 0 0 22px;
  }
  #userProfileModal .public-profile-card {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  #userProfileModal .public-profile-section-title,
  #userProfileModal .public-posts {
    margin-right: 10px;
    margin-left: 10px;
  }
  .public-profile-cover-wrap {
    height: 220px;
  }
  .public-profile-identity {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    min-height: 118px;
    margin: -92px 16px 0;
    padding-bottom: 22px;
  }
  .public-profile-avatar {
    width: 88px;
    height: 88px;
    border-width: 4px;
  }
  .public-profile-copy {
    padding-bottom: 12px;
  }
  .public-profile-copy strong {
    font-size: 24px;
  }
  .public-profile-copy span,
  .public-profile-copy p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .public-profile-copy p {
    font-size: 13px;
  }
  .public-profile-stats {
    gap: 24px;
    margin: 0 16px 17px;
  }
  .public-profile-stats strong {
    font-size: 17px;
  }
  #userProfileModal .public-profile-actions,
  #userProfileModal .public-profile-actions:has(> button:only-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 16px 18px;
  }
  #userProfileModal .public-profile-actions:has(> button:only-child) {
    grid-template-columns: minmax(0, 1fr);
  }
  .public-profile-section-title {
    padding: 2px 2px 9px;
  }
  .public-profile-section-title span {
    max-width: 68%;
  }
  #userProfileModal .public-posts {
    gap: 10px;
  }
  #userProfileModal .public-posts .post-card {
    border-radius: 10px;
  }
}
/* Mobile threaded comments */
@media (max-width: 760px) {
  .post-detail-comments-scroll {
    max-height: 34dvh;
    -webkit-overflow-scrolling: touch;
  }
  .detail-comment { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; }
  .detail-comment > img { width: 34px; height: 34px; }
  .post-detail-comments-head { padding: 11px 12px; }
  .comment-action-overlay { align-items: end; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
  .comment-action-sheet { width: 100%; }
}

/* Mobile settings: keep account preferences readable without oversized cards. */
@media (max-width: 760px) {
  .settings-card {
    width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    padding: 16px;
  }
  .record-preference-grid,
  .record-toggle-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .settings-field {
    grid-template-columns: minmax(0, 1fr) 132px;
    align-items: center;
    gap: 10px;
  }
  .settings-field small { min-height: 0; }
  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }
  .settings-actions .primary-btn { width: 100%; }
}