mobile-refactor.css

/* Unified mobile refactor layer: loaded after page styles */

:root {
  --m-font: "Manrope", "Noto Sans SC", "PingFang SC", "Segoe UI", sans-serif;
  --m-title-font: "Sora", "Manrope", "Noto Sans SC", sans-serif;
  --m-surface: rgba(255, 255, 255, 0.95);
  --m-surface-soft: rgba(255, 255, 255, 0.88);
  --m-border: rgba(17, 24, 39, 0.09);
  --m-shadow: 0 12px 30px rgba(22, 34, 54, 0.14);
  --m-shadow-soft: 0 8px 18px rgba(22, 34, 54, 0.1);
  --m-radius-xl: 22px;
  --m-radius-lg: 16px;
  --m-radius-md: 12px;
  --nav-height: 96px;
  --nav-offset: 104px;
}

html[data-theme="dark"] {
  --m-surface: rgba(14, 23, 39, 0.94);
  --m-surface-soft: rgba(20, 31, 52, 0.88);
  --m-border: rgba(146, 166, 207, 0.24);
  --m-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  --m-shadow-soft: 0 8px 18px rgba(0, 0, 0, 0.32);
}

@media (max-width: 900px) {
  body {
    font-family: var(--m-font);
    background-attachment: scroll !important;
    padding-bottom: calc(env(safe-area-inset-bottom) + 14px);
  }

  body::before {
    content: "";
    position: fixed;
    inset: -16vh -12vw auto;
    height: 50vh;
    pointer-events: none;
    z-index: -1;
    background:
      radial-gradient(45% 55% at 22% 30%, rgba(26, 187, 156, 0.18), transparent 70%),
      radial-gradient(40% 50% at 78% 25%, rgba(255, 146, 87, 0.2), transparent 72%);
  }

  body.has-bg-image::before {
    display: none;
  }

  html[data-theme="dark"] body::before {
    background:
      radial-gradient(45% 55% at 22% 30%, rgba(75, 143, 255, 0.22), transparent 70%),
      radial-gradient(40% 50% at 78% 25%, rgba(100, 211, 189, 0.18), transparent 72%);
  }

  .header,
  .toolbar,
  .card,
  .preview-card,
  .login-card,
  .header-content,
  .batch-toolbar,
  .status-panel {
    border-radius: var(--m-radius-lg) !important;
    border: 1px solid var(--m-border) !important;
    box-shadow: var(--m-shadow-soft) !important;
  }

  .header,
  .toolbar,
  .card,
  .preview-card,
  .login-card,
  .header-content {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--m-surface) !important;
  }

  .header-title,
  .title {
    font-family: var(--m-title-font);
    letter-spacing: 0.01em;
  }

  .nav-links,
  .header-actions,
  .header-content .actions {
    overflow: visible;
  }

  .nav-links a,
  .nav-btn,
  .btn,
  .method-btn,
  .storage-btn,
  .batch-btn,
  .login-btn,
  .action-btn {
    min-height: 40px;
    border-radius: var(--m-radius-md) !important;
    font-weight: 600 !important;
  }

  .upload-zone:hover,
  .image-card:hover,
  .video-card:hover,
  .audio-card:hover,
  .file-card:hover,
  .nav-links a:hover,
  .nav-btn:hover,
  .btn:hover {
    transform: none !important;
  }
}

@media (max-width: 768px) {
  #app,
  .container {
    padding: 12px !important;
  }

  .header {
    position: relative !important;
    top: auto !important;
    padding: 14px !important;
    margin-bottom: 14px !important;
    gap: 10px !important;
  }

  .header-title {
    width: 100%;
    justify-content: flex-start;
    padding-right: 92px;
    font-size: 1.08rem !important;
  }

  .nav-links {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch !important;
    align-items: stretch;
    gap: 8px !important;
    position: relative;
    padding-bottom: 0;
  }

  .nav-links a {
    min-width: 0;
    width: 100%;
    justify-content: center;
  }

  .nav-links .theme-toggle-btn {
    position: absolute;
    top: -42px;
    right: 0;
    min-height: 34px;
    padding: 6px 10px;
    margin: 0;
    border-radius: 999px !important;
    white-space: nowrap;
    z-index: 3;
  }

  .header .header-theme-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    min-height: 34px;
    padding: 6px 10px;
    margin: 0 !important;
    border-radius: 999px !important;
    white-space: nowrap;
    z-index: 4;
  }

  .header-actions > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  .main-container {
    gap: 14px !important;
  }

  .card {
    padding: 16px !important;
  }

  .card-header {
    margin-bottom: 14px !important;
  }

  .upload-zone {
    padding: 24px 16px !important;
    border-width: 2px !important;
  }

  .upload-icon {
    font-size: 2.65em !important;
    margin-bottom: 12px !important;
  }

  .upload-text {
    font-size: 1em !important;
  }

  .upload-hint {
    font-size: 0.82em !important;
    line-height: 1.45 !important;
  }

  .storage-switcher {
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: var(--m-radius-md) !important;
  }

  .storage-options {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .storage-btn {
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 0.82rem !important;
  }

  .upload-methods {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px !important;
  }

  .method-btn {
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 0.84rem !important;
    gap: 6px !important;
  }

  .upload-item,
  .result-item {
    align-items: flex-start !important;
    padding: 10px !important;
  }

  .result-item-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 6px !important;
  }

  .result-item-actions .action-btn {
    width: 100% !important;
    justify-content: center;
  }

  .stats-bar {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .history-list,
  .result-list {
    max-height: 320px !important;
  }

  .toolbar {
    padding: 12px !important;
    gap: 10px !important;
  }

  .toolbar-left,
  .toolbar-right {
    width: 100%;
    justify-content: flex-start !important;
  }

  .image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .image-card {
    border-radius: 14px !important;
  }

  .image-card-overlay {
    opacity: 1 !important;
  }

  .image-card-name {
    font-size: 0.75rem !important;
  }

  .card-btn {
    width: 32px !important;
    height: 32px !important;
  }

  .batch-bar,
  .batch-toolbar {
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    border-radius: var(--m-radius-lg) !important;
  }

  .batch-toolbar {
    cursor: default !important;
  }

  .header-actions {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
  }

  .btn {
    justify-content: center !important;
    padding: 10px 8px !important;
    font-size: 0.82rem !important;
  }

  .preview-card {
    padding: 16px !important;
  }

  .file-info {
    flex-direction: row !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 12px !important;
  }

  .file-details h2 {
    font-size: 0.98rem !important;
    line-height: 1.35 !important;
  }

  .file-meta {
    justify-content: flex-start !important;
    font-size: 0.75rem !important;
  }

  .preview-area {
    min-height: 240px !important;
  }

  .preview-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
    height: 42vh !important;
    padding: 12px !important;
  }

  .preview-pdf,
  .preview-office,
  .iframe-preview-container {
    height: 52vh !important;
  }

  .settings-panel {
    margin-top: 14px !important;
    padding: 12px !important;
  }

  .setting-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .setting-label {
    flex: 1;
    min-width: 0;
    font-size: 0.84rem !important;
  }

  .login-card {
    padding: 28px 22px !important;
    border-radius: var(--m-radius-xl) !important;
  }

  .form-input {
    min-height: 44px;
    padding: 10px 12px 10px 40px !important;
    border-radius: 11px !important;
  }

  .form-input.has-toggle {
    padding-right: 50px !important;
  }

  .input-wrapper i {
    left: 12px !important;
  }

  .password-toggle {
    right: 16px !important;
  }

  .login-btn {
    min-height: 46px;
  }

  .header-content {
    top: 8px !important;
    left: 8px !important;
    right: 8px !important;
    height: auto !important;
    min-height: 54px;
    padding: 10px 12px !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }

  .title {
    font-size: 1rem !important;
  }

  .stats {
    margin-left: auto !important;
    margin-right: 0 !important;
    min-height: 36px;
    padding: 4px 10px !important;
  }

  .stats-text {
    display: none !important;
  }

  .header-content .search-card {
    order: 3;
    width: 100%;
    margin: 0 !important;
  }

  .header-content .search-card .el-input__inner {
    width: 100% !important;
    height: 38px !important;
    font-size: 0.92rem !important;
  }

  .header-content .actions {
    order: 4;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    row-gap: 8px !important;
    margin-top: 2px !important;
    padding-bottom: 0;
  }

  .header-content .actions > * {
    flex: 0 0 auto;
  }

  .header-content .actions > .status-panel {
    order: 120 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px 4px;
    margin: 4px 0 0 !important;
    padding: 8px 10px !important;
    border-radius: 12px !important;
    background: rgba(138, 75, 255, 0.08);
  }

  .header-content .actions > .status-panel .status-item {
    justify-content: center;
    gap: 5px;
    min-width: 0;
  }

  .header-content .actions > .status-panel .status-item i {
    width: auto;
    height: auto;
    background: transparent !important;
    border-radius: 0;
    font-size: 8px !important;
  }

  .header-content .actions > .status-panel .status-item span {
    display: inline !important;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
  }

  .header-content .actions > i,
  .header-content .actions > .el-dropdown > .el-dropdown-link,
  .header-content .actions > .theme-admin-toggle {
    width: 36px;
    height: 36px;
    margin: 0 !important;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(138, 75, 255, 0.08);
  }

  .header-content .actions > .theme-admin-toggle {
    border-radius: 10px !important;
  }

  html[data-theme="dark"] .header-content .actions > i,
  html[data-theme="dark"] .header-content .actions > .el-dropdown > .el-dropdown-link,
  html[data-theme="dark"] .header-content .actions > .theme-admin-toggle {
    background: rgba(154, 169, 255, 0.18);
  }

  html[data-theme="dark"] .header-content .actions > .status-panel {
    background: rgba(154, 169, 255, 0.16);
  }

  .el-main.main-container {
    margin-top: 196px !important;
    padding: 10px !important;
  }

  .content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 0 !important;
  }

  .el-card__body {
    padding: 0 !important;
  }

  .image-card {
    aspect-ratio: 1 / 1 !important;
  }

  .video-content,
  .audio-content,
  .file-content {
    min-height: 180px !important;
    padding: 10px !important;
  }

  .audio-avatar,
  .file-avatar {
    width: 36px;
    height: 36px;
    margin-right: 8px !important;
  }

  .video-controls,
  .audio-controls,
  .file-controls {
    gap: 6px !important;
    margin-top: 8px !important;
  }

  .control-btn {
    width: 32px !important;
    height: 32px !important;
  }

  .preview-modal {
    padding: 12px !important;
  }

  .preview-modal img,
  .preview-modal .iframe-container {
    width: 100% !important;
    max-width: 100% !important;
    height: 60vh !important;
  }

  .preview-close {
    top: 8px !important;
    right: 8px !important;
    width: 40px !important;
    height: 40px !important;
    font-size: 1.2rem !important;
  }

  .preview-toolbar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px !important;
  }

  .preview-filename {
    max-width: 100% !important;
  }

  body > .container:not(#app) {
    width: 100%;
    max-width: 560px;
    padding: 28px 20px !important;
    border-radius: 20px !important;
  }

  body > .container:not(#app) .icon {
    width: 64px;
    height: 64px;
    margin-bottom: 16px;
    font-size: 2rem !important;
  }

  body > .container:not(#app) .title {
    font-size: 1.26rem !important;
  }

  body > .container:not(#app) .message {
    font-size: 0.92rem !important;
    line-height: 1.65 !important;
    margin-bottom: 16px !important;
  }

  body > .container:not(#app) .back-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 16px !important;
  }
}

@media (max-width: 560px) {
  .storage-options,
  .upload-methods,
  .content,
  .image-grid {
    grid-template-columns: 1fr !important;
  }

  .result-item {
    flex-wrap: wrap !important;
  }

  .result-item-preview {
    width: 52px !important;
    height: 52px !important;
  }

  .header-content .actions > .status-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .el-main.main-container {
    margin-top: 214px !important;
  }

  .header-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .header-actions .btn:last-child {
    grid-column: span 2;
  }
}

@media (max-width: 480px) {
  .header,
  .toolbar,
  .card,
  .preview-card,
  .login-card,
  .header-content {
    border-radius: 14px !important;
  }

  .header-title,
  .title,
  .card-title {
    font-size: 1rem !important;
  }

  .nav-links a,
  .nav-btn,
  .btn,
  .method-btn,
  .storage-btn {
    font-size: 0.8rem !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .nav-links .theme-toggle-btn [data-theme-label],
  .gallery-theme-toggle [data-theme-label] {
    display: inline !important;
  }

  .batch-bar,
  .batch-toolbar {
    bottom: 10px !important;
  }

  .header-content .actions > i,
  .header-content .actions > .el-dropdown > .el-dropdown-link,
  .header-content .actions > .theme-admin-toggle {
    width: 34px;
    height: 34px;
  }

  .el-main.main-container {
    margin-top: 208px !important;
  }
}

@media (max-width: 360px) {
  .header-title {
    padding-right: 92px;
  }

  .nav-links {
    grid-template-columns: 1fr !important;
  }

  .header-content .actions > .status-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-actions {
    grid-template-columns: 1fr !important;
  }

  .header-actions .btn:last-child {
    grid-column: auto;
  }
}

@media (max-width: 900px) {
  .header .header-theme-toggle {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 4;
  }

  .header-content .actions {
    align-items: flex-start !important;
    flex-wrap: wrap !important;
  }

  .header-content .actions > .status-panel {
    order: 120 !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    margin-top: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 管理后台移动端：顶部胶囊随页面滚动，不吸顶 */
  .el-header {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  .header-content {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    z-index: auto !important;
  }

  .el-main.main-container {
    margin-top: 12px !important;
  }

  .disk-layout {
    margin-top: 12px !important;
    row-gap: 14px !important;
  }

  .folder-current,
  .folder-breadcrumb {
    position: static !important;
    z-index: 1;
  }

  .folder-breadcrumb {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
  }

  /* 移动端批量工具栏：固定底部单行，防止滚动时异常放大 */
  .batch-toolbar {
    left: 8px !important;
    right: 8px !important;
    bottom: calc(env(safe-area-inset-bottom) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 8px 10px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  .batch-toolbar .batch-actions {
    display: inline-flex !important;
    flex-wrap: nowrap !important;
  }

  .batch-toolbar .batch-btn,
  .batch-toolbar .batch-count {
    flex: 0 0 auto;
  }

  .batch-toolbar .batch-shortcuts {
    display: none !important;
  }
}

@media (pointer: coarse) {
  .card:hover,
  .image-card:hover,
  .video-card:hover,
  .audio-card:hover,
  .file-card:hover {
    box-shadow: var(--m-shadow-soft) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}