/* INS 排版 · 独立页样式（只作用于 /ins，不碰主站类名） */

#main {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 18px 26px 48px;
  overscroll-behavior: contain;
}

.ins-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 2px 0 14px; }
.ins-head h1 { margin: 0; font-size: 22px; letter-spacing: .5px; }
.ins-sub { color: #8a8a8a; font-size: 13px; }

.ins-pill {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  background: #f7e3ee; color: #b3608a; font-size: 12px; letter-spacing: .3px;
}

.ins-wrap {
  display: grid;
  /* v369（M4）：与主站工作台对齐。原来 300/1fr/380，实测三列 289/469/369，
     与工作台 327/475/343 不一致 —— 切页时右栏横跳。改用同一组 327 边缘。 */
  grid-template-columns: 327px minmax(0, 1fr) 327px;
  gap: 14px;
  align-items: start;
}

.ins-col { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.ins-card {
  background: #fff; border: 1px solid #ececec; border-radius: 12px;
  padding: 12px 13px 13px; box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.ins-card-title {
  font-size: 13px; font-weight: 600; color: #2b2b2b;
  margin-bottom: 10px; display: flex; align-items: baseline; gap: 8px;
}
.ins-hint { font-weight: 400; color: #9b9b9b; font-size: 11.5px; }
.ins-hint.warn { color: #c0392b; }

/* 上传区 */
.drop-zone {
  border: 1.5px dashed #dcdcdc; border-radius: 10px; background: #fbfbfb;
  padding: 22px 12px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.over { border-color: #e39ac0; background: #fff7fb; }
.dz-icon { width: 34px; height: 34px; margin: 0 auto 8px; color: #c9a3b8; }
.dz-icon svg { width: 100%; height: 100%; }
.dz-txt { font-size: 13px; color: #4a4a4a; }
.dz-sub { font-size: 11.5px; color: #a6a6a6; margin-top: 5px; }

.ins-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }
.ins-thumb { position: relative; border-radius: 7px; overflow: hidden; background: #f2f2f2; aspect-ratio: 3/4; }
.ins-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-thumb .x {
  position: absolute; top: 3px; right: 3px; width: 17px; height: 17px;
  border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; border: 0;
  font-size: 11px; line-height: 17px; text-align: center; cursor: pointer; padding: 0;
}
.ins-upfoot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

/* 文字区 */
.ins-ta {
  width: 100%; box-sizing: border-box; border: 1px solid #e6e6e6; border-radius: 9px;
  padding: 10px 11px; font-size: 13px; line-height: 1.65; resize: vertical;
  font-family: inherit; color: #2b2b2b; background: #fcfcfc;
}
.ins-ta:focus { outline: none; border-color: #e39ac0; background: #fff; }
.ins-txtfoot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }

.ins-parse { margin-top: 10px; border-top: 1px dashed #eee; padding-top: 9px; }
.ins-parse-row { display: flex; gap: 10px; font-size: 12.5px; padding: 3px 0; }
.ins-parse-row b { flex: none; width: 58px; color: #8a8a8a; font-weight: 500; }
.ins-parse-row span { color: #2b2b2b; word-break: break-all; }

/* 描述区 */
.ins-desc-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ins-chip {
  border: 1px solid #e8e8e8; background: #fafafa; color: #5b5b5b;
  border-radius: 999px; padding: 3.5px 10px; font-size: 11.5px; cursor: pointer;
  transition: all .13s;
}
.ins-chip:hover { border-color: #e39ac0; color: #b3608a; background: #fff5fa; }

/* 成品区 */
.ins-outcard { display: flex; flex-direction: column; }
.ins-actions { display: flex; gap: 8px; margin-bottom: 10px; }
.ins-outbox {
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 258px); overflow-y: auto;
}
.ins-empty { color: #b5b5b5; font-size: 12.5px; text-align: center; padding: 34px 0; }
.ins-shot { border: 1px solid #eee; border-radius: 10px; overflow: hidden; background: #fff; flex: 0 0 auto; }
.ins-shot img { width: 100%; display: block; }
.ins-shot .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 6px 9px; font-size: 11.5px; color: #7d7d7d; border-top: 1px solid #f2f2f2;
}
.ins-shot .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-shot .bar a { flex: none; color: #b3608a; text-decoration: none; }
.ins-shot .bar a:hover { text-decoration: underline; }

/* 窄屏 */
@media (max-width: 1180px) {
  .ins-wrap { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
  .ins-col-out { grid-column: 1 / -1; }
  .ins-outbox { max-height: none; }
  .ins-shot img { max-height: 460px; object-fit: contain; background: #fafafa; }
}
@media (max-width: 860px) {
  #main { padding: 14px 14px 40px; }
  .ins-wrap { grid-template-columns: minmax(0, 1fr); }
  .ins-col-out { grid-column: auto; }
}

/* ── M7 · INS 页视觉+侧栏（v369）───────────────────────────────────────
   7a 实测：INS 页页底 255 与卡内 255 完全同色，只靠 #E9E9E9 1px 边框分隔；
      而工作台页底 245、卡内 255。同一产品两套底色逻辑，INS 页卡片等于没有体积感。
      修法：INS 页给独立页底 + 卡片补一级极浅阴影。 */
/* v369（M7a）修正：原来写 body[data-page="ins"]{background:#F7F7F7}，
   实测 body 仍是 rgb(255,255,255) —— 被 html[data-ui="crisp"] 下的更早规则压住。
   提到同等特异性 + !important 才真的生效（改完实测 body=245 / card=255，Δ=10）。 */
html[data-ui="crisp"] body[data-page="ins"],
html body[data-page="ins"]{
  background: #F7F7F7 !important;
}
body[data-page="ins"] .ins-card{
  background:#fff;
  border:1px solid #EDEDED;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
/* 7b 侧栏与主站统一字号与节距（原来 INS 12px / 其它页 15px） */
body[data-page="ins"] #sidebar .nav-item{ font-size:15px; }
body[data-page="ins"] #sidebar .nav-item{ padding-top:9px; padding-bottom:9px; }

/* v369（M7a）：原皮肤（data-ui="none"）同样需要页底与卡片分层 */
html[data-ui="none"] body[data-page="ins"]{ background:#F7F7F7; }