Update public/styles.css

public/styles.css

@@ -71,10 +71,16 @@ body {
   background: var(--background);
   color: var(--foreground);
   min-height: 100vh;
+  overflow-x: hidden;
 }
 
 .hidden { display: none !important; }
 
+.mobile-menu-btn,
+.sidebar-backdrop {
+  display: none;
+}
+
 /* Sidebar */
 .sidebar {
   background: var(--card);
@@ -86,6 +92,7 @@ body {
   left: 0; top: 0; bottom: 0;
   overflow-y: auto;
   z-index: 50;
+  -webkit-overflow-scrolling: touch;
 }
 .sidebar-brand {
   display: flex; align-items: center; gap: 8px;
@@ -174,6 +181,12 @@ body {
   display: flex; align-items: center; justify-content: space-between;
   margin-bottom: 20px; flex-wrap: wrap; gap: 12px;
 }
+.page-title-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
 .page-header h1 {
   font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.3px;
 }
@@ -198,10 +211,75 @@ body {
 }
 
 @media (max-width: 720px) {
-  .sidebar { transform: translateX(-100%); transition: transform .2s; }
+  .mobile-menu-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 38px;
+    width: 42px;
+    height: 38px;
+    border-radius: 10px;
+    border: 1px solid var(--border);
+    background: var(--card);
+    color: var(--foreground);
+    font: inherit;
+    font-size: 18px;
+  }
+  .sidebar-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 45;
+    display: block;
+    background: rgba(0, 0, 0, 0.38);
+  }
+  .sidebar {
+    width: min(82vw, 300px);
+    padding: calc(68px + env(safe-area-inset-top)) 16px 20px;
+    transform: translateX(-100%);
+    transition: transform .2s ease;
+    box-shadow: 16px 0 36px rgba(0, 0, 0, 0.18);
+  }
   .sidebar.open { transform: translateX(0); }
-  .main { margin-left: 0; padding: 16px; }
-  .security-banner { align-items: flex-start; flex-direction: column; }
+  .main {
+    margin-left: 0;
+    padding: calc(18px + env(safe-area-inset-top)) 14px calc(22px + env(safe-area-inset-bottom));
+  }
+  .security-banner { align-items: stretch; flex-direction: column; }
+  .security-banner .btn { justify-content: center; }
+  .page-header {
+    align-items: stretch;
+    gap: 14px;
+  }
+  .page-title-row > div {
+    min-width: 0;
+  }
+  .page-header h1 {
+    font-size: 20px;
+    line-height: 1.25;
+  }
+  .page-header p {
+    line-height: 1.4;
+  }
+  .page-header .btn {
+    width: 100%;
+    justify-content: center;
+    min-height: 42px;
+  }
+  .toolbar {
+    margin-bottom: 14px;
+  }
+  .stats {
+    gap: 8px 10px;
+    margin-bottom: 14px;
+    line-height: 1.5;
+  }
+  .stats .sep {
+    display: none;
+  }
+  .card-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 14px;
+  }
 }
 
 /* Card */
@@ -359,6 +437,7 @@ textarea.search-box { resize: vertical; }
   padding: 12px; gap: 6px;
 }
 .card:hover .img-overlay { opacity: 1; }
+.img-preview:focus-within .img-overlay { opacity: 1; }
 .img-overlay .btn {
   background: rgba(255, 255, 255, 0.95);
   border: none;
@@ -394,7 +473,8 @@ textarea.search-box { resize: vertical; }
   border: 1px solid var(--border);
   border-radius: 14px;
   width: 100%; max-width: 560px;
-  max-height: 90vh; overflow-y: auto;
+  max-height: min(90vh, 900px); overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 .modal-card-large {
   max-width: min(960px, 90vw);
@@ -511,3 +591,104 @@ textarea.search-box { resize: vertical; }
   animation: spin 0.7s linear infinite;
 }
 @keyframes spin { to { transform: rotate(360deg); } }
+
+@media (hover: none), (pointer: coarse) {
+  .btn,
+  .nav-item,
+  .filter-chip,
+  .size-option {
+    min-height: 40px;
+  }
+  .img-overlay {
+    opacity: 1;
+    background: linear-gradient(to top, rgba(0, 0, 0, 0.48) 0%, transparent 58%);
+  }
+}
+
+@media (max-width: 520px) {
+  .card {
+    border-radius: 10px;
+  }
+  .card-body {
+    padding: 13px 14px;
+  }
+  .card-title-row {
+    align-items: center;
+  }
+  .card-prompt-head {
+    flex-wrap: wrap;
+  }
+  .card-prompt-head .spacer {
+    margin-left: auto;
+  }
+  .card-actions .btn {
+    flex: 1 1 auto;
+    justify-content: center;
+  }
+  .card-actions .spacer {
+    margin-left: 0;
+    flex: 0 0 44px;
+  }
+  .prompt-text {
+    -webkit-line-clamp: 4;
+  }
+  .search-box {
+    font-size: 16px;
+    padding: 11px 12px;
+  }
+  .modal-overlay {
+    align-items: flex-end;
+    padding: 10px;
+    padding-bottom: max(10px, env(safe-area-inset-bottom));
+  }
+  .modal-card {
+    max-height: calc(100vh - 20px - env(safe-area-inset-top));
+    border-radius: 14px 14px 10px 10px;
+  }
+  .modal-card-large {
+    max-width: 100%;
+  }
+  .modal-head {
+    padding: 16px 16px 0;
+  }
+  .modal-body {
+    padding: 14px 16px 18px;
+    gap: 14px;
+  }
+  .modal-actions {
+    flex-direction: column-reverse;
+  }
+  .modal-actions .btn {
+    width: 100%;
+    min-height: 42px;
+    justify-content: center;
+  }
+  .setting-group {
+    padding: 14px;
+  }
+  .size-select {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .size-option {
+    text-align: center;
+    padding: 9px 8px;
+  }
+  .meta-grid {
+    grid-template-columns: 1fr;
+  }
+  .meta-item.span2 {
+    grid-column: auto;
+  }
+  .info-img-wrap.large,
+  .info-img-wrap.large img {
+    max-height: 46vh;
+  }
+  .toast {
+    top: auto;
+    bottom: calc(16px + env(safe-area-inset-bottom));
+    width: calc(100vw - 28px);
+    max-width: 360px;
+    text-align: center;
+  }
+}