/* ================= Base ================= */
:root{ --c:#2E5CD5; }

html, body{
  margin:0; padding:0; width:100%; min-height:100vh;
  background:linear-gradient(120deg,#f6f6f6 60%,#eef5ff 100%);
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color:#222; box-sizing:border-box; -webkit-font-smoothing:antialiased;
}

/* ================= Navbar ================= */
.navbar{
  width:100%; height:80px; background:#fff; display:flex; align-items:center;
  box-shadow:0 2px 12px rgba(30,60,100,0.06); position:sticky; top:0; z-index:99;
}
.navbar-content{
  max-width:1200px; width:100%; margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; padding:0 36px; min-width:0; box-sizing:border-box;
}

/* Logo */
.logo a{
  display:inline-flex; align-items:center; gap:5px; font-weight:800; letter-spacing:1px;
  color:#2E5CD5; text-decoration:none; line-height:1; transition:color .18s ease; font-size:25px;
}
.logo img{ width:48px; height:48px; display:block; object-fit:contain; border-radius:12px; }
.logo a:hover,.logo a:focus{ color:#3378f0; }
.logo a:hover img,.logo a:focus img{
  transform:translateY(-1px) scale(1.03); box-shadow:0 6px 16px rgba(51,120,240,.18);
  border-color:#d5e2ff; filter:saturate(1.05);
}
.logo a:focus-visible{ outline:2px solid #3378f0; outline-offset:3px; border-radius:10px; }
@media (max-width:800px){ .logo img{ width:42px; height:42px; border-radius:10px; } }
@media (max-width:500px){ .logo img{ width:36px; height:36px; border-radius:9px; } }

.navbar-btns{ display:flex; align-items:center; gap:18px; }
.nav-btn{
  padding:8px 18px; border:1px solid #e0e0e0; background:#fff; color:#222; border-radius:9px;
  font-size:16px; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:inherit;
  transition:box-shadow .18s,border .18s,color .2s;
}
.nav-btn svg{ width:20px; height:20px; vertical-align:-3px; }
.nav-btn:hover{ box-shadow:0 3px 10px rgba(51,120,240,0.07); border-color:#b7c1d6; color:#3378f0; }

.navbar-icon{
  margin-left:8px; cursor:pointer; font-size:20px; color:#444; border:none; background:none;
  transition:color .22s; padding:2px; border-radius:4px;
}
.navbar-icon:hover{ color:#3378f0; background:#f3f7ff; }

/* Navbar Search */
.nav-search{
  display:flex; align-items:center; background:#f5f7fa; border-radius:8px; padding:2px 7px 2px 14px;
  margin-right:24px; box-shadow:0 1.5px 5px rgba(51,120,240,0.06); border:1px solid #e5eaf1;
  transition:box-shadow .18s, border .18s; height:38px;
}
.nav-search:focus-within{ box-shadow:0 4px 14px rgba(51,120,240,0.15); border:1px solid #3378f0; }
.nav-search-input{
  border:none; background:transparent; outline:none; font-size:1.01rem; padding:3px 8px 3px 0;
  color:#222; font-family:inherit; width:350px; min-width:60px; transition:width .22s;
}
.nav-search-input:focus{ width:320px; }
.nav-search-btn{
  border:none; background:transparent; cursor:pointer; outline:none; padding:4px 6px 4px 3px;
  display:flex; align-items:center; border-radius:6px; transition:background .18s;
}
.nav-search-btn:hover,.nav-search-btn:focus{ background:#e7f2ff; }
.nav-search-btn svg{ width:20px; height:20px; pointer-events:none; }
@media (max-width:900px){ .nav-search-input{ width:90px; } .nav-search{ margin-right:10px; padding-left:6px; } }
@media (max-width:600px){
  .nav-search-input{ width:58px; font-size:.98rem; }
  .nav-search{ margin-right:0; padding:2px 3px 2px 8px; height:34px; }
}

/* ================= Main / Cards ================= */
.main-bg{
  width:100%; min-height:calc(100vh - 60px); display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; padding:3vw 0 60px 0; box-sizing:border-box;
}
.blog-list{
  width:100%; max-width:1200px; margin:0 auto; display:flex; flex-direction:column;
  gap:38px; padding:0 32px; box-sizing:border-box;
}
.blog-card{
  background:#fff; border-radius:22px;
  box-shadow:0 4px 32px 0 rgba(51,120,240,0.08),0 1.5px 3px rgba(80,90,130,0.05);
  border:1px solid #e8eaf3; padding:38px 48px 28px; display:flex; flex-direction:column; gap:14px;
  animation:fadeIn .7s; min-width:0; width:90%; transition:box-shadow .18s, transform .16s;
}
.blog-card:hover{ box-shadow:0 12px 48px rgba(51,120,240,0.13),0 2px 6px rgba(80,90,130,0.07); transform:translateY(-2px) scale(1.015); }
.blog-card-not{
  background:#fff; border-radius:22px; box-shadow:0 4px 32px rgba(51,120,240,0.08),0 1.5px 3px rgba(80,90,130,0.05);
  border:1px solid #e8eaf3; padding:38px 48px 28px; display:flex; flex-direction:column; gap:14px; min-width:0; width:90%;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(32px);} to{opacity:1; transform:translateY(0);} }

.blog-title{
  font-size:1.525rem; font-weight:700; color:#23345a; margin-bottom:3px; display:flex; align-items:center; gap:10px;
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  letter-spacing:1px;
}
.blog-title a{ text-decoration:none; color:#23345a; }
.blog-title svg{ width:28px; height:28px; color:#3378f0; vertical-align:-4px; }

.tag{
  font-size:16px; color:#3378f0; background:#f0f6ff; border-radius:7px; padding:3px 14px; margin-right:2px;
  user-select:none; display:inline-block; 
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  letter-spacing:.5px;
}

.blog-meta{
  font-size:1.07rem; color:#7b8ba7; display:flex; align-items:center; gap:22px;
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
  font-weight:400; letter-spacing:.04em;
}
.blog-meta svg{ width:17px; height:17px; vertical-align:-2px; margin-right:4px; }

.blog-summary{
  font-size:1.2214rem; color:#434b5e; line-height:2.1; margin:10px 0 0; word-break:break-all;
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.blog-summary h2{
  font-size:1.35214rem; color:#434b5e; line-height:2.1; margin:10px 0 0; word-break:break-all;
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.blog-summary p{
  font-size:1.2214rem; color:#434b5e; line-height:2.1; margin:10px 0 0; word-break:break-all;
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Compare bar */
.compare-bar-table{ width:98%; max-width:1280px; margin:48px auto 32px; 
font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-size:16px; color:#22304a; }
.compare-bar-row{ display:flex; align-items:center; margin-bottom:20px; height:38px; }
.compare-bar-label{ width:115px; min-width:80px; text-align:left; padding-right:16px; color:#6292bb; font-size:15px; letter-spacing:.5px; flex-shrink:0; }
.compare-bar-track{ flex:1; display:flex; gap:12px; }
.compare-bar-good,.compare-bar-bad{
  flex:1; height:38px; display:flex; align-items:center; border-radius:7px; padding-left:16px; font-weight:500;
  position:relative; white-space:nowrap; overflow:hidden; box-sizing:border-box; background:#f6fafd;
}
.compare-bar-good{ background:linear-gradient(90deg,#e8f4fb 80%,#f7fafc 100%); color:#179852; border:1px solid #d1f0e2; justify-content:flex-start; }
.compare-bar-bad{ background:linear-gradient(90deg,#fff0f0 80%,#faf7f7 100%); color:#df4343; border:1px solid #f6d3d3; justify-content:flex-start; }
@media (max-width:600px){
  .compare-bar-label{ font-size:13px; min-width:65px; padding-right:6px; }
  .compare-bar-row{ height:28px; font-size:14px; }
  .compare-bar-good,.compare-bar-bad{ font-size:14px; padding-left:8px; height:28px; }
}

/* Actions */
.blog-actions{ margin-top:18px; display:flex; align-items:center; gap:18px; }
.readmore-btn{
  background:linear-gradient(92deg,#3388ff 0%,#3378f0 100%); color:#fff; border:none; font-size:1.07rem;
  padding:7px 30px; border-radius:9px; cursor:pointer; transition:box-shadow .16s,background .16s,transform .14s;
  box-shadow:0 2px 10px rgba(51,120,240,.10); font-weight:600; letter-spacing:.7px; 
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.readmore-btn:hover{ background:linear-gradient(92deg,#3378f0 0%,#3388ff 100%); box-shadow:0 6px 24px rgba(51,120,240,.16); transform:scale(1.03); }

.mt-5 {margin-top:2rem !important; }

.mb-5 {margin-bottom:2rem !important; }

.my-5  {margin-bottom:2rem !important;
        margin-top:2rem !important;
}

/* Responsive containers */
@media (max-width:1200px){
  .navbar-content{ max-width:96vw; padding-left:18px; padding-right:18px; }
  .blog-list{ max-width:98vw; padding-left:8px; padding-right:8px; }
}
@media (max-width:800px){
  .navbar-content{ padding:0 7px; }
  .main-bg{ padding:10vw 0 24px; }
  .blog-list{ padding:0 2px; }
  .blog-card{ padding:19px 4vw 16px; border-radius:12px; }
  .blog-title{ font-size:1.14rem; }
}
@media (max-width:500px){
  .navbar-content{ padding:0 2px; }
  .main-bg{ padding:4vw 0 16px; }
  .blog-list{ padding:0; }
  .blog-card{ padding:12px 4vw; }
}

/* Scrollbar */
::-webkit-scrollbar{ width:8px; background:#f2f4f7; }
::-webkit-scrollbar-thumb{ background:#e0e4ef; border-radius:8px; }

/* ================= Page Header ================= */
.page-header{ width:100%; padding:36px 0 10px; }
.page-header-inner{ max-width:1200px; margin:0 auto; padding:0 32px; box-sizing:border-box; }
.page-header-inner-xn{ max-width:1200px; margin:15px auto; padding:0 32px; box-sizing:border-box; }
.page-title{
  margin:0; 
  font-family: Ubuntu, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight:800; font-size:2rem; line-height:1.25; letter-spacing:1px; color:#23345a;
}
.page-title-em{ background:linear-gradient(92deg,#3388ff 0%,#3378f0 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
@media (max-width:800px){ .page-title{ font-size:1.58rem; } }
@media (max-width:500px){ .page-title{ font-size:1.36rem; } }

/* ================= Board (Dashboard) ================= */
.board-wrap{ width:100%; margin-top:3.5rem; }
.board-grid{
  width:100%; max-width:1200px; margin:0 auto; padding:0 32px; box-sizing:border-box;
  display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr));
}
.board-grid-1x{
  width:100%; max-width:1200px; margin:0 auto; padding:0 32px; box-sizing:border-box; display:grid; gap:16px;
}
.board-card{
  background:#fff; border:1px solid #e8eaf3; border-radius:18px;
  box-shadow:0 4px 32px rgba(51,120,240,0.08),0 1.5px 3px rgba(80,90,130,0.05);
  padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0;
}
.board-card:hover{ box-shadow:0 10px 40px rgba(51,120,240,0.12),0 2px 6px rgba(80,90,130,0.07); transform:translateY(-1px); transition:box-shadow .18s, transform .16s; }
.board-card.list-card{ padding-top:12px; }
.board-wide{ grid-column:1 / span 2; }
#board-stats{ grid-column:3; }
.board-head{ display:flex; align-items:center; justify-content:space-between; }
.board-title{ display:flex; align-items:center; gap:8px; font-size:1.05rem; color:#23345a; margin:0; }
.board-title svg{ width:22px; height:22px; }

.btn-outline-sm{
  display:inline-flex; align-items:center; height:32px; padding:0 12px; border-radius:9px;
  border:1px solid #3378f0; color:#3378f0; background:#f5f9ff; font-size:.95rem; text-decoration:none;
}
.btn-outline-sm:hover{ background:#e7f2ff; box-shadow:0 2px 10px rgba(51,120,240,.12); }
.more-link{ color:#3378f0; text-decoration:none; font-size:.95rem; }
.more-link:hover{ text-decoration:underline; }

.icon_url{ width:55px; height:55px; border-radius:6px; object-fit:cover; margin:0; }

/* ================= Tags ================= */
.chips{ display:flex; flex-wrap:wrap; gap:8px; min-height:40px; }
/* chips a = 顶部筛选小按钮 */
.chips a{
  display:inline-block; padding:6px 10px; border:1px solid #e6ecfb; border-radius:10px;
  color:#23345a; text-decoration:none; background:#fff;
}
.chips a.active{ background:#eef3ff; color:#2E5CD5; border-color:#dfe7fb; }

/* chip = 首页“热门标签”大芯片 */
.chip{
  display:inline-flex; align-items:center; padding:8px 5px; border-radius:10px;
  font-size:.92rem; border:1px solid #e0e9ff; text-decoration:none; position:relative; padding-right:25px;
}
.chip-badge{
  position:absolute; top:-5px; right:-8px; display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:16px; padding:0 6px; border-radius:10px;
  background:linear-gradient(92deg,#669be5 0%,#799edd 100%); color:#fff; font-size:12px; font-weight:700; line-height:1;
  border:1px solid #d9e7ff; box-shadow:0 4px 14px rgba(51,120,240,.18); pointer-events:none; user-select:none; transform:translateZ(0);
  transition:filter .15s ease;
}
.chip:hover .chip-badge{ filter:brightness(1.05); }
@media (max-width:600px){
  .chip{ padding-right:28px; }
  .chip-badge{ top:-7px; right:-7px; min-width:20px; height:20px; font-size:11px; }
}
/* 可选：data-badge */
.chip[data-badge]::after{
  content:attr(data-badge); position:absolute; top:-8px; right:-8px;
  display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px;
  border-radius:999px; background:linear-gradient(92deg,#3388ff 0%,#3378f0 100%); color:#fff; font-size:12px; font-weight:700; line-height:1;
  border:1px solid #d9e7ff; box-shadow:0 4px 14px rgba(51,120,240,.18); pointer-events:none;
}

/* ================= Stats ================= */
.stats{ list-style:none; padding:0; margin:0; display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.stat{ display:flex; align-items:center; gap:10px; padding:12px; background:#fafcff; border:1px solid #ecf1f7; border-radius:12px; }
.stat-icon{
  width:36px; height:36px; display:grid; place-items:center; color:#3378f0;
  background:#eef4ff; border:1px solid #e5edff; border-radius:9px;
}
.stat-meta{ display:flex; flex-direction:column; line-height:1.15; }
.stat-num{ font-weight:700; color:#23345a; font-size:1.05rem; }
.stat-txt{ color:#7b8ba7; font-size:.86rem; }

/* ================= Lists (search/label) ================= */
.media-list,.group-list,.chan-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.media-item,.group-item,.chan-item{
  display:grid; grid-template-columns:52px 1fr auto; align-items:center;
  gap:12px; padding:10px; border:1px solid #edf2f7; border-radius:12px; background:#fff;
  transition:box-shadow .15s ease, transform .15s ease;
}
.media-item:hover,.group-item:hover,.chan-item:hover{ box-shadow:0 4px 16px rgba(19,33,68,.06); transform:translateY(-1px); }

.media-thumb,.chan-thumb{
  width:52px; height:52px; border-radius:12px; background:#eef3ff center/cover no-repeat;
  border:1px solid #e6ecfb; display:block;
}
.group-thumb{
  width:52px; height:52px; border-radius:12px; display:grid; place-items:center;
  background:#f6f7fb; border:1px solid #eceff5; font-size:22px;
}

.media-body,.group-main,.chan-main{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.media-title,.group-title,.chan-title{
  color:#23345a; text-decoration:none; font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.media-title:hover,.group-title:hover,.chan-title:hover{ color:#2E5CD5; }
.media-sub,.group-sub,.chan-sub{ color:#7b8ba7; font-size:.9rem;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.price{ color:#0d7a3e; }
.dot{ display:inline-block; width:4px; height:4px; border-radius:50%; background:#c6cfda; margin:0 6px; vertical-align:middle; }

.group-meta,.chan-meta,.meta-right{ display:flex; flex-direction:column; align-items:flex-end; gap:6px; }
.qty{ color:#ff6b00; font-weight:700;}

/* Pills */
.pill{ font-size:.8rem; padding:6px 8px; border-radius:8px; border:1px solid transparent; white-space:nowrap; }
.pill-green{ color:#0f7a48; background:#e9f8ef; border-color:#bfead1; }
.pill-red{ color:#b42318; background:#feeceb; border-color:#ffc9c5; }
.pill-violet{ color:#6a3cf0; background:#f2ecff; border-color:#e5d6ff; }
.pill-teal{ color:#0b7d7a; background:#e8faf9; border-color:#c7f0ef; }

/* Grid responsiveness */
@media (max-width:1200px){ .board-grid{ max-width:96vw; padding-left:8px; padding-right:8px; } }
@media (max-width:1024px){ .board-grid{ grid-template-columns:1fr; } .board-wide,#board-stats{ grid-column:auto; } }
@media (max-width:600px){
  .media-item,.group-item,.chan-item{ grid-template-columns:44px 1fr auto; }
  .media-thumb,.chan-thumb,.group-thumb{ width:44px; height:44px; border-radius:10px; }
}

/* ================= Filters / Orders / Searchbar ================= */
.page-sub{ color:#7b8ba7; margin-top:6px;font-size: 16px; }
.toolrow{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:space-between; margin-top:10px; }
.filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.orders{ display:flex; gap:8px; align-items:center; }
.orders a{ color:#2E5CD5; text-decoration:none; }
.orders a.active{ font-weight:600; }

/* In-page searchbar (advanced filters) */
.searchbar{
  display:grid; grid-template-columns:1fr 130px 222px 140px 100px; gap:8px;
}
.searchbar input,.searchbar select,.searchbar button{
  padding:8px 10px; border:1px solid #e6ecfb; border-radius:12px; background:#fff; color:#23345a;
}
.searchbar button{ background:var(--c); color:#fff; border:none; cursor:pointer; }
@media (max-width:600px){ .searchbar{ grid-template-columns:1fr; } }

/* Toolbar / Pager / Empty */
.toolbar{ display:flex; justify-content:space-between; align-items:center; margin-top: 20px; margin-bottom: 20px; }
.pager{ display:flex; gap:8px; align-items:center; }
.pager a{
  display:inline-block; padding:6px 10px; border:1px solid #e6ecfb; border-radius:10px; color:#23345a; text-decoration:none; background:#fff;
}
.pager .disabled{ opacity:.5; pointer-events:none; }
.pager button{
  padding:6px 10px; border:1px solid #e6ecfb; background:#fff; border-radius:10px; cursor:pointer; color:#23345a;
}
.empty{
  padding:24px; text-align:center; color:#7b8ba7; border:1px dashed #eceff5; border-radius:12px; margin-top:12px;
}

/* ================= Redirect page bits ================= */
/* 注意：以下为跳转页结构（.box 等元素），如非跳转页请勿在全局 body 套用同款布局 */
.box{ max-width:520px; padding:24px; border:1px solid #eceff5; border-radius:12px; }
h1{ margin:0 0 8px; font-size:18px; color:#23345a; }
p{ margin:6px 0; color:#6b778c; }
a.btn{ display:inline-block; margin-top:10px; padding:8px 14px; border-radius:8px; background:var(--c); color:#fff; text-decoration:none; }
code{ background:#f6f8fa; border:1px solid #eceff5; border-radius:6px; padding:2px 6px; }



/* ================= Contact Modal ================= */
.modal{ position:fixed; inset:0; display:none; place-items:center;
  background:rgba(16,24,40,.36); backdrop-filter:saturate(140%) blur(4px); z-index:999; }
.modal.is-open{ display:grid; }
.modal-backdrop{ position:absolute; inset:0; }
.modal-dialog{
  position:relative; width:min(560px,92vw); background:#fff; border:1px solid #e8eaf3; border-radius:16px;
  box-shadow:0 20px 60px rgba(35,52,90,.18), 0 2px 8px rgba(35,52,90,.06); padding:18px 18px 14px; animation:modalIn .22s ease-out;
}
@keyframes modalIn{ from{ transform:translateY(14px); opacity:.6; } to{ transform:translateY(0); opacity:1; } }
.modal-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.modal-title{ margin:0; font-size:1.18rem; color:#23345a; }
.modal-close{
  border:1px solid #e6ecfb; background:#fff; border-radius:8px; cursor:pointer; width:32px; height:32px;
  display:grid; place-items:center; color:#7b8ba7; transition:background .16s, color .16s, box-shadow .16s;
}
.modal-close:hover{ background:#eef4ff; color:#2E5CD5; box-shadow:0 2px 10px rgba(51,120,240,.12); }

.contact-form{ display:flex; flex-direction:column; gap:12px; }
.form-field{ display:flex; flex-direction:column; gap:6px; }
.form-field label{ font-size:.96rem; color:#23345a; }
.req{ color:#df4343; margin-left:2px; }
.form-field input,.form-field textarea{
  padding:10px 12px; border:1px solid #e6ecfb; border-radius:12px; background:#fff; color:#23345a;
  font:inherit; outline:none; transition:border .16s, box-shadow .16s;
}
.form-field input:focus,.form-field textarea:focus{
  border-color:#3378f0; box-shadow:0 0 0 3px rgba(51,120,240,.12);
}
.form-field textarea{ resize:vertical; min-height:120px; }
.err{ color:#b42318; font-size:.85rem; min-height:1.1em; }
.form-actions{ display:flex; justify-content:flex-end; align-items:center; gap:10px; margin-top:4px; }

/* 按钮（与站点风格一致） */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; height:38px; padding:0 16px; border-radius:9px;
  border:none; cursor:pointer; background:linear-gradient(92deg,#3388ff 0%,#3378f0 100%); color:#fff; font-weight:600;
  box-shadow:0 2px 10px rgba(51,120,240,.10); transition:transform .14s, box-shadow .16s, background .16s;
}
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 22px rgba(51,120,240,.18); }
.btn-primary[disabled]{ opacity:.6; cursor:not-allowed; }

.form-tip{ margin:4px 2px 0; font-size:.92rem; color:#7b8ba7; min-height:1.2em; }

/* 蜜罐隐藏但保留在可访问树外（不打断布局） */
.hp-field{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }



/* ===== Submit modal additions ===== */
.result-card{
  border:1px solid #ecf1f7; background:#fafcff; border-radius:12px; padding:12px; margin-top:6px;
}
.result-head{ display:flex; gap:10px; align-items:center; }
.res-avatar{
  width:48px; height:48px; border-radius:10px; border:1px solid #e6ecfb; object-fit:cover; background:#eef3ff;
}
.result-meta{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.result-name{ font-weight:700; color:#23345a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.result-sub{ color:#7b8ba7; font-size:.92rem; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.result-desc{ margin-top:6px; color:#434b5e; font-size:.95rem; line-height:1.6; max-height:8.6em; overflow:auto; }
.hint{ color:#7b8ba7; font-size:.86rem; }

.tg-footer{background:var(--tg-bg);padding:16px;}
.tg-footer__inner{max-width:1120px; margin:0 auto; background:var(--tg-card); border:1px solid var(--tg-border); border-radius:var(--tg-radius); box-shadow:var(--tg-shadow); padding:14px 18px; display:flex;align-items:center;justify-content:space-between;gap:12px;}
.tg-foot-left{color:var(--tg-text);font-weight:500}
.tg-foot-right{display:flex;gap:6px;flex-wrap:wrap}
.tg-foot-right a{color:var(--tg-muted); text-decoration:none; padding:6px 10px; border-radius:8px; border:1px solid transparent; transition:.15s ease;}
.tg-foot-right a:hover{color:var(--tg-blue);background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.25);}
@media (max-width:640px){
    .tg-footer__inner{flex-direction:column;align-items:flex-start}
  }