/* =========================================================
   全站共享样式：小米社区风格（字体 / 配色 / 手机适配）
   加载顺序：本文件在各页面 <style> 之后引入，同优先级下覆盖原样式
   - 主色 #FF6700（小米橙），背景 #F5F5F5，白卡片，圆角 12/16
   - 字体优先 MiSans（未安装时回退苹方 / 鸿蒙黑 / 微软雅黑）
   - 手机端（<=768px）：单列、紧凑顶栏、表格横滑、底部 TabBar
   ========================================================= */

:root {
  --mi-orange: #FF6700;
  --mi-orange-deep: #E55B00;
  --mi-orange-soft: #FFF4EC;
  --mi-bg: #F5F5F5;
  --mi-card: #FFFFFF;
  --mi-text: #191919;
  --mi-text-2: #4A4A4A;
  --mi-text-3: #8C8C8C;
  --mi-line: #EBEBEB;
  --mi-radius: 12px;
  --mi-radius-lg: 16px;
  --mi-shadow: 0 2px 12px rgba(0, 0, 0, .05);
  --mi-font: "MiSans", "MiSans VF", "PingFang SC", "HarmonyOS Sans SC",
             "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei",
             system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- 基础 ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--mi-font);
  color: var(--mi-text);
  background: var(--mi-bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

input, select, textarea, button { font-family: inherit; }
::selection { background: rgba(255, 103, 0, .18); }

/* 提示条不拦截点击（避免遮住弹窗底部按钮） */
.toast { pointer-events: none; }

/* 链接统一为小米橙（问答页原先的蓝色链接也一并统一） */
a { color: var(--mi-orange); }

/* ---------- 桌面端观感统一（卡片 / 弹窗 / 圆角） ---------- */
.card,
.product-item,
.notice-item,
.contact-card,
.qa-item,
.link-list a,
.notice-modal,
.q-item,
.q-detail-card,
.a-item,
.reply-card,
.ask-card,
.side-card,
.toolbar,
.empty-hint {
  border-color: var(--mi-line);
}

.card,
.product-item,
.notice-modal,
.q-detail-card,
.reply-card,
.ask-card {
  border-radius: var(--mi-radius-lg);
}

.notice-item,
.contact-card,
.qa-item,
.link-list a,
.q-item,
.a-item,
.side-card,
.toolbar,
.empty-hint {
  border-radius: var(--mi-radius);
}

.card { box-shadow: var(--mi-shadow); }

/* ---------- 手机端底部导航（由 site.js 注入，仅公开页面） ---------- */
.m-tabbar { display: none; }

@media (max-width: 768px) {
  .m-tabbar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
    background: rgba(255, 255, 255, .97);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--mi-line);
    box-shadow: 0 -1px 12px rgba(0, 0, 0, .05);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  }
  .m-tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 3px 0; font-size: 12px; color: var(--mi-text-3);
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .m-tabbar a svg { width: 22px; height: 22px; display: block; }
  .m-tabbar a.on { color: var(--mi-orange); font-weight: 600; }
  body.has-tabbar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }

  body.has-tabbar .site-footer { padding-bottom: 20px; }
}

/* =========================================================
   门户首页
   ========================================================= */
@media (max-width: 768px) {
  .container { padding-left: 12px; padding-right: 12px; }

  .site-header .container { padding-top: 10px; padding-bottom: 10px; }
  .site-brand { font-size: 16px; }
  .site-tag { display: none; }
  .site-actions { gap: 12px; }
  .site-actions a { font-size: 13px; }
  .site-actions .sep { display: none; }
  .user-chip { padding: 3px 10px 3px 4px; gap: 6px; }
  .user-chip .uc-name { max-width: 96px; }
  .user-chip .uc-go { display: none; }

  .hero { padding: 34px 0 26px; }
  .hero h1 { font-size: 26px; letter-spacing: 0; }
  .hero .sub { margin-top: 10px; font-size: 14px; line-height: 1.7; }

  section.block { padding: 26px 0; }
  .block h2 { font-size: 18px; }
  .block .block-sub { font-size: 12px; margin-bottom: 16px; }

  .product-list { gap: 14px; }
  .product-item { border-radius: 14px; }
  .product-item .pi-img { width: 100%; height: 190px; }
  .product-item .pi-body { padding: 16px; }
  .product-item h3 { font-size: 16px; }
  .product-item .pi-desc { font-size: 13px; }
  .product-item .pi-feats { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
  .product-item .pi-feats li { padding: 9px 10px; }
  .product-item .pi-feats b { font-size: 12px; }

  .notice-item { padding: 14px 16px; margin-bottom: 10px; }
  .notice-item .n-head { gap: 10px; }
  .notice-item h3 { font-size: 14px; }
  .notice-item .n-excerpt {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .notice-mask { padding: 16px 10px; align-items: flex-end; }
  .notice-modal { padding: 20px 16px; max-height: 86vh; border-radius: 14px; }
  .notice-modal h3 { font-size: 18px; }

  .qa-item { padding: 13px 15px; }
  .qa-item h3 { font-size: 14px; }

  .contact-list { grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact-card { padding: 16px 10px; }
  .contact-card .ct-qr { width: 96px; height: 96px; }
  .contact-card .ct-name { font-size: 14px; }

  .link-list { gap: 8px; }
  .link-list a { padding: 9px 14px; font-size: 13px; }

  .site-footer { padding: 18px 0; }
  .site-footer .container { flex-direction: column; align-items: center; gap: 8px; }
}

/* =========================================================
   问答社区
   ========================================================= */
@media (max-width: 768px) {
  .site-header .container { height: 52px; padding: 0 12px; }
  .site-brand { font-size: 16px; }
  .site-brand::before { width: 22px; height: 22px; }
  .site-nav { gap: 16px; font-size: 13px; }
  .nav-auth { gap: 10px; font-size: 13px; }
  .user-chip { padding: 3px 10px 3px 4px; }
  .user-chip .uc-name { max-width: 88px; }

  .container { padding: 0 12px; }
  .qa-hero { padding: 22px 0 18px; }
  .qa-hero h1 { font-size: 20px; }
  .qa-hero .sub { font-size: 12px; line-height: 1.7; }

  main { padding: 14px 0 30px; }

  .toolbar {
    flex-direction: column; align-items: stretch;
    gap: 10px; padding: 12px; border-radius: var(--mi-radius);
  }
  .toolbar .search { min-width: 0; width: 100%; }
  .toolbar .search input { min-width: 0; }
  .sort-tabs { width: 100%; }
  .sort-tabs div { padding: 8px 14px; font-size: 13px; }
  .toolbar > .btn { width: 100%; padding: 10px; }

  .q-item { padding: 14px; margin-bottom: 10px; }
  .q-item .q-head { gap: 6px; margin-bottom: 6px; }
  .q-item h3 {
    font-size: 15px; white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .q-item .q-excerpt { font-size: 12px; margin-bottom: 10px; }
  .q-item .q-meta { gap: 10px; font-size: 11px; }

  .ask-card { padding: 16px; }
  .ask-card .row2 { flex-direction: column; gap: 0; }
  .ask-card .ops { flex-wrap: wrap; justify-content: stretch; }
  .ask-card .ops .hint { flex: 1 1 100%; margin-bottom: 4px; }
  .ask-card .ops .btn { flex: 1; }

  .q-detail-card { padding: 16px 14px 14px; }
  .q-detail-card h2 { font-size: 17px; }
  .q-detail-card .q-meta { gap: 10px; margin-bottom: 14px; padding-bottom: 12px; }
  .a-item { padding: 14px; }
  .reply-card { padding: 16px 14px; }
  .side-card { padding: 14px; }
  .detail-layout { grid-template-columns: 1fr; }

  .md-textarea { min-height: 180px; padding: 12px; font-size: 16px; }
  .md-preview { padding: 14px; }
  .md-toolbar { padding: 6px 8px; }
  .md-tabs .md-tab { padding: 9px 16px; font-size: 13px; }

  .img-lightbox { padding: 12px; }
  .img-lightbox .lb-inner { padding: 4px; max-width: 96vw; }
  .img-lightbox .lb-inner img { max-width: 94vw; max-height: 78vh; }
  .img-lightbox .lb-close { top: -34px; }
  .img-lightbox .lb-hint { display: none; }

  input, textarea, select,
  input[type="text"], input[type="search"] { font-size: 16px; }
}

/* =========================================================
   登录 / 注册
   ========================================================= */
@media (max-width: 768px) {
  body.page-login { padding: 14px; align-items: flex-start; }
  body.page-login .card {
    max-width: 100%; padding: 24px 18px; border-radius: 18px;
    border-color: var(--mi-line); box-shadow: var(--mi-shadow); margin-top: 6vh;
  }
  body.page-login .brand { font-size: 18px; }
  body.page-login .tabs { gap: 6px; margin-bottom: 20px; }
  body.page-login .tab { padding: 10px; font-size: 14px; }
  body.page-login .field { margin-bottom: 14px; }
  body.page-login input { font-size: 16px; padding: 12px; }
  body.page-login button { padding: 13px; font-size: 16px; }
}

/* =========================================================
   个人中心
   ========================================================= */
@media (max-width: 768px) {
  .site-header .container { padding: 10px 12px; }
  .site-brand { font-size: 16px; }
  .back-link { font-size: 13px; }

  .container { padding: 14px 12px calc(76px + env(safe-area-inset-bottom)); }
  .card { padding: 16px; border-radius: 16px; margin-bottom: 12px; }
  .card h2 { font-size: 16px; margin-bottom: 14px; }

  .profile-head { gap: 14px; margin-bottom: 18px; }
  .avatar-wrap, .avatar-wrap img, .avatar-fallback { width: 68px; height: 68px; }
  .avatar-fallback { font-size: 28px; }
  .head-info .hi-name { font-size: 17px; }
  .head-info .hi-sub { font-size: 12px; line-height: 1.9; }
  .head-info .hi-sub span { margin-right: 10px; }

  .grid { grid-template-columns: 1fr; gap: 0; }
  .grid .field { margin-bottom: 14px; }
  input { font-size: 16px; padding: 12px; }
  .actions { flex-direction: column; margin-top: 16px; }
  .actions .btn, .actions .btn-danger { width: 100%; padding: 13px; font-size: 15px; }
}

/* =========================================================
   管理后台
   ========================================================= */
@media (max-width: 768px) {
  .login-wrap { padding: 16px; }
  .login-card {
    max-width: 100%; padding: 28px 20px; border-radius: 18px;
    border-color: var(--mi-line); box-shadow: var(--mi-shadow);
  }
  .login-card input { font-size: 16px; padding: 12px; }
  .login-card button { padding: 13px; font-size: 16px; }

  .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .topbar .brand { font-size: 15px; }
  .topbar .right { width: 100%; justify-content: space-between; gap: 8px; font-size: 12px; }
  .topbar .right button { padding: 6px 10px; font-size: 12px; }
  .topbar .right a { padding: 6px 10px !important; font-size: 12px !important; }

  .tabs {
    padding: 0 8px; overflow-x: auto; flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { padding: 11px 14px; font-size: 13px; white-space: nowrap; flex-shrink: 0; }

  .content { padding: 12px; }
  .card { padding: 14px; border-radius: 14px; margin-bottom: 12px; }
  .card h2 { font-size: 15px; flex-wrap: wrap; gap: 8px; }
  .card h2 .btn { padding: 6px 12px; }

  /* 表格：纵向正常、横向可滑动 */
  .card table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
    white-space: nowrap; font-size: 13px;
  }
  th, td { padding: 9px 10px; }

  .form-row { gap: 10px; }
  .form-row > div { flex: 1 1 100%; min-width: 0; }
  input, select, textarea { font-size: 16px; padding: 9px 10px; }

  .split-layout { flex-direction: column; gap: 12px; }
  .split-side { width: 100%; position: static; max-height: none; }
  .split-main { width: 100%; }

  .detail-head { flex-direction: column; gap: 12px; }
  .detail-head > img { width: 100%; height: 180px; }
  .detail-meta h3 { font-size: 17px; }
  .info-grid { grid-template-columns: 1fr; gap: 12px; }
  .info-thumb-wrap { width: 100%; height: 200px; }
  .info-fields { grid-template-columns: 1fr; gap: 10px; }
  .detail-toolbar { position: static; padding: 10px 12px; }
  .detail-toolbar .dt-title { flex: 1 1 100%; }
  .detail-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .detail-tabs::-webkit-scrollbar { display: none; }
  .detail-tab { flex: 0 0 auto; padding: 9px 14px; font-size: 12px; }

  .model-grid { grid-template-columns: 1fr; }
  .keys-grid { grid-template-columns: 1fr; }
  .color-card-grid { grid-template-columns: 1fr; }
  .assoc-grid { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .mi-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }

  .portal-row { flex-wrap: wrap; }
  .portal-row .pr-field { flex: 1 1 100%; min-width: 0; }
  .pr-img { width: 100%; flex-direction: row; justify-content: center; }
  .notice-card { flex-wrap: wrap; }
  .notice-card .nc-ops { width: 100%; justify-content: flex-end; }

  .mod-checks { grid-template-columns: 1fr 1fr; }

  .modal-mask { padding: 12px; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 88vh; overflow-y: auto; padding: 18px; }
  .crop-stage { height: 300px; }
  .crop-modal { max-width: 100%; }
  .crop-toolbar { gap: 10px; }
  .crop-group input[type="range"] { width: 110px; }

  .md-mask { padding: 0 !important; }
  .md-editor { border-radius: 0; }
  .md-ed-head { flex-wrap: wrap; gap: 8px; padding: 10px 12px; }
  .md-ed-head .md-ed-meta { flex-direction: column; gap: 8px; }
  .md-ed-head #mdDate { flex: 1 1 auto; }
  .md-toolbar { padding: 8px 12px; }
  .md-ed-body { flex-direction: column; }
  .md-ed-body textarea {
    min-height: 38vh; padding: 12px; font-size: 15px;
    border-right: none; border-bottom: 1px solid var(--mi-line);
  }
  .md-preview { max-height: 38vh; padding: 14px; }
  .md-ed-foot { flex-wrap: wrap; padding: 10px 12px; }
  .md-ed-foot .md-ed-tip { flex: 1 1 100%; }

  .toast { left: 12px; right: 12px; top: auto; bottom: 24px; text-align: center; }
}

/* 触屏设备无悬停，关闭图片悬停放大层（点击放大由页面 lightbox 处理） */
@media (hover: none), (pointer: coarse) {
  #imgZoomLayer { display: none !important; }
}

/* =========================================================
   米家清新风 · 主题焕新
   本段位于文件末尾，同优先级覆盖前述规则：
   - 背景 #F7F7F8；卡片去硬边、柔和多层投影、可点卡片悬浮微抬升
   - 按钮胶囊化，主按钮橙色渐变 + 橙色投影
   - 输入框白底 + 橙色聚焦光环；表格行悬浮淡橙
   - 顶栏毛玻璃；弹窗圆角加大 + 遮罩轻模糊
   ========================================================= */

:root {
  --mi-bg: #F7F7F8;
  --mi-line: #F0F0F0;
  --mi-line-2: #E8E8E8;
  --mi-radius-xl: 20px;
  --mi-shadow-sm: 0 1px 2px rgba(0, 0, 0, .03), 0 4px 16px rgba(0, 0, 0, .045);
  --mi-shadow-md: 0 2px 8px rgba(0, 0, 0, .05), 0 16px 40px rgba(0, 0, 0, .09);
  --mi-shadow-orange: 0 4px 14px rgba(255, 103, 0, .24);
  --mi-ring: 0 0 0 3px rgba(255, 103, 0, .13);
}

/* ---------- 基础质感 ---------- */
body { background: var(--mi-bg); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D9D9D9; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #BFBFBF; }

input[type="checkbox"], input[type="radio"] { accent-color: var(--mi-orange); }

/* ---------- 顶栏：毛玻璃 ---------- */
.topbar, .site-header {
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom-color: var(--mi-line);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .03);
}
.topbar .brand, .site-brand { letter-spacing: .3px; }

/* ---------- 卡片：去硬边 + 柔和投影 ---------- */
.card, .model-card, .q-detail-card, .reply-card, .ask-card, .modal {
  border-color: rgba(0, 0, 0, .04);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
}

/* 次级嵌套块：灰底改白底，弱化边框 */
.model-card, .tree-node, .tree-leaf, .key-item, .kl-row, .kl-row-v2,
.portal-row, .color-card, .img-card, .up-bar, .crop-toolbar,
.side-card, .toolbar, .empty-hint, .mod-checks label {
  background: #FFFFFF;
  border-color: var(--mi-line-2);
}

/* 可点卡片悬浮微抬升（米家列表感） */
.product-item, .notice-item, .qa-item, .q-item, .contact-card, .link-list a {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.product-item:hover, .notice-item:hover, .qa-item:hover, .q-item:hover,
.contact-card:hover, .link-list a:hover {
  transform: translateY(-2px);
  box-shadow: var(--mi-shadow-md);
}

/* ---------- 按钮：胶囊化 ---------- */
.btn, .topbar button, .login-card button, .nm-close, .crop-group .btn-sm {
  border-radius: 999px;
  transition: all .18s ease;
}
.btn { background: #FFFFFF; border-color: var(--mi-line-2); }
.btn:hover { border-color: var(--mi-orange); color: var(--mi-orange); background: #FFF9F5; }
.btn-primary, .login-card button {
  border: none;
  background: linear-gradient(135deg, #FF6900, #FF8D1A);
  box-shadow: var(--mi-shadow-orange);
}
.btn-primary:hover, .login-card button:hover { opacity: .92; color: #fff; }
.btn-danger { border: none; background: #FFF1F0; color: #F5222D; }
.btn-danger:hover { background: #F5222D; color: #fff; }
.detail-tab.active { box-shadow: var(--mi-shadow-orange); }

/* ---------- 输入：白底 + 橙色聚焦光环 ---------- */
input, select, textarea, .tree-search, .login-card input, .md-ed-head input {
  background: #FFFFFF;
  border-color: var(--mi-line-2);
  transition: border-color .18s ease, box-shadow .18s ease;
}
input:focus, select:focus, textarea:focus,
.tree-search:focus, .login-card input:focus, .md-ed-head input:focus {
  border-color: var(--mi-orange);
  box-shadow: var(--mi-ring);
}

/* ---------- 页签 ---------- */
.tab { transition: color .18s ease; }
.tab.active { font-weight: 600; }
.detail-tabs { box-shadow: var(--mi-shadow-sm); }

/* ---------- 表格：行悬浮淡橙 ---------- */
th, td { border-bottom-color: var(--mi-line); }
tr:hover td { background: #FFFAF5; }

/* ---------- 选中/激活态 ---------- */
.tree-leaf.active { background: var(--mi-orange-soft); border-color: var(--mi-orange); }
.assoc-card.sel { border-color: var(--mi-orange); box-shadow: var(--mi-ring); }

/* ---------- 弹窗：圆角加大 + 轻模糊遮罩 ---------- */
.modal, .notice-modal {
  border: none;
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow-md);
}
.modal-mask, .notice-mask {
  background: rgba(0, 0, 0, .42);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

/* ---------- Toast：柔和描边 + 投影 ---------- */
.toast { box-shadow: var(--mi-shadow-md); }
.toast.ok { border-color: #B7EB8F; }
.toast.err { border-color: #FFCCC7; }

/* ---------- Hero：更柔和的橙色光晕 ---------- */
.hero { background: radial-gradient(ellipse 72% 58% at 50% 0%, rgba(255, 103, 0, .10), transparent 72%); }