/* 全局样式：简洁、对称、支持日间/夜间主题（使用 CSS 变量）
   已针对 admin 手机端溢出问题做了修复：
   - 表单网格使用 auto-fit / minmax 自适应列，避免固定列宽导致溢出
   - 所有表单控件设置 min-width:0 / box-sizing:border-box，防止子项撑开容器
   - header 在窄屏下允许换行 (flex-wrap)，并让 actions 靠右
   - 控制项在小屏下拉满宽度（按钮、输入）
   - 强制禁止横向滚动（body overflow-x:hidden）以避免页面超出
*/

/* 颜色变量（Light 默认） */
:root{
  --bg: #f6f8fb;
  --panel: #ffffff;
  --muted: #6b7280;
  --text: #0f1724;
  --primary: #0b69d6;
  --primary-600: #0959b3;
  --border: #e6eef6;
  --success: #10b981;
  --danger: #ef4444;
  --shadow: 0 8px 24px rgba(15,23,42,0.06);

  --radius: 12px;
  --container-max: 1200px;
}

/* Dark theme overrides */
:root.theme-dark, .theme-dark {
  --bg: #0b1220;
  --panel: #071026;
  --muted: #94a3b8;
  --text: #e6eef6;
  --primary: #4aa3ff;
  --primary-600: #2e8dff;
  --border: rgba(255,255,255,0.06);
  --success: #34d399;
  --danger: #fb7185;
  --shadow: 0 8px 24px rgba(2,6,23,0.6);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x: hidden; /* 防止横向滚动导致看起来超出 */
}

/* Site container居中，对称 */
.site{max-width:var(--container-max);margin:18px auto;padding:18px}

/* Header */
.site-header{background:transparent;padding:8px 12px;border-radius:10px;margin-bottom:14px}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} /* 允许换行，避免子元素溢出 */
.brand{display:flex;flex-direction:column;align-items:flex-start;margin-right:12px}
.brand h1{margin:0;font-size:20px;color:var(--primary)}
.brand .sub{margin:0;font-size:12px;color:var(--muted)}

/* header actions */
.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.btn{background:var(--panel);border:1px solid var(--border);color:var(--primary);padding:8px 10px;border-radius:10px;cursor:pointer;font-size:13px}
.btn.link{background:transparent;border:1px solid transparent;color:var(--primary)}
.btn.icon-btn{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center}

/* Main layout */
.site-main{display:flex;flex-direction:column;gap:12px}

/* Uploader panel */
.uploader-panel{display:flex;flex-direction:column;gap:10px}
.upload-box{background:var(--panel);border:1px solid var(--border);padding:18px;border-radius:var(--radius);text-align:center;cursor:pointer;transition:box-shadow .18s ease, transform .12s ease;box-shadow:var(--shadow);margin:0 auto;display:flex;align-items:center;justify-content:center}
.upload-box.dragover{transform:translateY(-4px);box-shadow: 0 14px 36px rgba(11,105,214,0.08)}
/* 内部内容纵横居中，适应高度变化 */
.upload-inner{display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;width:100%;height:100%}
.upload-icon{color:var(--primary);opacity:0.95}
.upload-text{margin:0;font-weight:600;color:var(--text)}
.upload-hint{margin:0;font-size:13px;color:var(--muted)}
.upload-box input[type=file]{position:absolute;left:-9999px}

/* Controls */
.controls{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary-600));color:#fff;border:none}
.btn.muted{background:transparent;border:1px solid var(--border);color:var(--muted)}

/* Gallery: 对称网格（桌面 4 列） */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.thumb-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.thumb-image{height:160px;background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent);display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb-image img{width:100%;height:100%;object-fit:cover;display:block}
.thumb-meta{display:flex;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--border)}
.meta-name{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}
.meta-size{font-size:12px;color:var(--muted)}

/* overlay & actions */
.thumb-overlay{padding:10px 12px;display:flex;align-items:center;gap:8px}
.thumb-url{flex:1;background:transparent;border:1px dashed var(--border);padding:8px;border-radius:8px;color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thumb-actions{display:flex;gap:8px;align-items:center;justify-content:flex-end;padding:10px 12px;border-top:1px solid var(--border)}
.btn.small{padding:6px 8px;border-radius:8px;font-size:13px}
.thumb-state{height:28px;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);padding:6px}

/* toast */
.toast{position:fixed;right:18px;bottom:18px;background:rgba(0,0,0,0.7);color:#fff;padding:10px 14px;border-radius:10px;opacity:0;transform:translateY(8px);transition:all .18s ease;z-index:9999}
.toast.visible{opacity:1;transform:translateY(0)}

/* Footer */
.site-footer{margin-top:14px;text-align:center;color:var(--muted);font-size:13px}

/* Admin specific */
.admin-wrap{max-width:980px;margin:18px auto;padding:12px;width:100%}
.admin-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.admin-top .brand{margin:0}
.admin-main{background:var(--panel);padding:14px;border-radius:12px;border:1px solid var(--border);overflow:hidden}
.login-panel, .settings-form{max-width:100%;margin:0 auto}

/* 关键：自适应表单网格，使用 auto-fit / minmax 防止列过多导致溢出 */
.settings-form .form-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px;
}

/* field-group 风格 */
.field-group{background:transparent;padding:12px;border-radius:10px;border:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
.field-group h3{margin:0 0 6px 0;font-size:15px;color:var(--primary)}
.field-group label{display:flex;flex-direction:column;gap:6px;font-size:13px;min-width:0}
.field-group .hint{font-size:12px;color:var(--muted);margin-top:6px}

/* two-col 在大屏显示两列，小屏变成一列 */
.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;min-width:0}
@media (max-width:720px){ .two-col{grid-template-columns:1fr} }

/* 使所有表单控件在窄屏时不会撑开容器 */
input[type=text], input[type=password], input[type=number], select, textarea {
  width:100%;
  max-width:100%;
  min-width:0; /* extremely important to allow grid items to shrink */
  box-sizing:border-box;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  color:var(--text);
}

/* checkbox 行在小屏时换行并可折叠 */
.row-inline{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* 按钮放右侧（小屏时拉满宽度） */
.form-actions{display:flex;justify-content:flex-end;margin-top:12px}
.form-actions .btn{min-width:120px}
@media (max-width:720px){
  .settings-form .form-grid{grid-template-columns:1fr}
  .form-actions{justify-content:stretch}
  .form-actions .btn{width:100%}
}

/* 提示/状态 */
.success{background:#ecfdf5;color:var(--success);padding:10px;border-radius:8px;margin-bottom:12px}
.error{background:#fff5f5;color:var(--danger);padding:10px;border-radius:8px;margin-bottom:12px}
.muted{color:var(--muted);font-size:13px}

/* 小屏优化：保持 header 左右排列 */
@media (max-width:480px){
  .site{padding:12px;margin:12px}
  .header-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .header-actions{width:auto;justify-self:flex-end}
  .controls{justify-content:center}
  .gallery{grid-template-columns:repeat(1,1fr)}
  .thumb-image{height:200px}
  .brand h1{font-size:18px}
}

/* 细节：长文本断行 & 可复制输入溢出处理 */
input[type=text], .thumb-url, .meta-name, label, small {
  word-break:break-word;
  overflow-wrap:break-word;
}