/* ================= VLINE · 中国梦 · 红旗飘飘主题 v1 =================
   思路：不动编译产物，用「运行时调色板重写(theme-red.js) + 本文件装饰」两层。
   本文件负责：红旗、五角星、金线、红金渐变、暖白底。强制 !important 以压过导航栏/底栏的行内样式。
   ==================================================================== */
:root{
  --cn-flag:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'><g fill='%23F2C14E'><path d='M13.0,11.5L14.9,17.4L21.1,17.4L16.1,21.0L18.0,26.9L13.0,23.2L8.0,26.9L9.9,21.0L4.9,17.4L11.1,17.4Z'/><path d='M24.0,3.6L24.8,5.9L27.2,5.9L25.2,7.4L26.0,9.8L24.0,8.3L22.0,9.8L22.8,7.4L20.8,5.9L23.2,5.9Z'/><path d='M30.0,9.6L30.8,11.9L33.2,11.9L31.2,13.4L32.0,15.8L30.0,14.3L28.0,15.8L28.8,13.4L26.8,11.9L29.2,11.9Z'/><path d='M30.0,18.6L30.8,20.9L33.2,20.9L31.2,22.4L32.0,24.8L30.0,23.3L28.0,24.8L28.8,22.4L26.8,20.9L29.2,20.9Z'/><path d='M24.0,24.6L24.8,26.9L27.2,26.9L25.2,28.4L26.0,30.8L24.0,29.3L22.0,30.8L22.8,28.4L20.8,26.9L23.2,26.9Z'/></g></svg>");
  --cn-red:#c8102e; --cn-red-mid:#b3162a; --cn-red-deep:#8e0b1e; --cn-red-dark:#6b0714;
  --cn-gold:#f2c14e; --cn-gold-lt:#ffdf9b; --cn-gold-dk:#c99a2e;
  --cn-bg:#fbf3ec; --cn-card:#fff; --cn-line:#f0e0d4; --cn-ink:#2b1a17; --cn-sub:#8a746b;
}
html,body,uni-page-wrapper,uni-page-body,uni-page{background:var(--cn-bg) !important}
.list-page,.conv-page,.friends-page,.msg-page{background:var(--cn-bg) !important}

/* ---------- 顶部导航栏：红金渐变 + 金线 ---------- */
uni-page-head .uni-page-head, uni-page-head{background:linear-gradient(135deg,var(--cn-red) 0%,var(--cn-red-deep) 55%,var(--cn-red-dark) 100%) !important;box-shadow:0 2px 12px rgba(142,11,30,.28) !important}
uni-page-head .uni-page-head{border-bottom:1.5px solid var(--cn-gold) !important}
uni-page-head .uni-page-head__title,uni-page-head .uni-page-head-hd,uni-page-head .uni-page-head-bd .uni-page-head__title{color:#fff !important;font-weight:700 !important;letter-spacing:.5px}
uni-page-head .uni-btn-icon,uni-page-head [class*=uni-page-head-btn]{color:#fff !important}

/* ---------- 底部 tab：暖白 + 红金渐变顶线 + 选中红 ---------- */
.uni-tabbar{background:linear-gradient(180deg,#fff 0%,#fdf6ef 100%) !important;box-shadow:0 -4px 16px rgba(142,11,30,.10) !important}
.uni-tabbar .uni-tabbar-border{background:linear-gradient(90deg,var(--cn-red),var(--cn-gold),var(--cn-red)) !important;height:2px !important;transform:none !important}
.uni-tabbar__item .uni-tabbar__label{font-weight:600}
.uni-tabbar__reddot,.uni-tabbar__badge{background:linear-gradient(135deg,var(--cn-red),var(--cn-red-deep)) !important;box-shadow:0 1px 4px rgba(142,11,30,.4)}
.uni-tabbar__item::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%) scaleX(0);width:22px;height:2px;background:linear-gradient(90deg,transparent,var(--cn-red),transparent);transition:transform .25s}
.uni-tabbar__item.active::before{transform:translateX(-50%) scaleX(1)}

/* ---------- 「我的」页头部卡片：红金渐变 + 祥云 + 飘旗 ---------- */
.me-card{background:
   radial-gradient(circle at 88% 12%,rgba(242,193,78,.28),transparent 45%),
   radial-gradient(circle at 12% 88%,rgba(255,223,155,.18),transparent 50%),
   linear-gradient(135deg,var(--cn-red) 0%,var(--cn-red-deep) 62%,var(--cn-red-dark) 100%) !important;
  border-bottom:3px solid var(--cn-gold) !important;position:relative;overflow:visible}
.me-card::after{ /* 飘动的红旗 */
  content:"";position:absolute;top:14px;right:16px;width:52px;height:34px;pointer-events:none;
  background-image:var(--cn-flag),linear-gradient(135deg,var(--cn-red) 0%,var(--cn-red-dark) 100%);background-size:80% 80%,100% 100%;background-position:14% center,0 0;background-repeat:no-repeat,no-repeat;
  clip-path:polygon(0 0,100% 6%,100% 94%,0 100%);border-radius:2px 7px 7px 2px;
  box-shadow:0 3px 10px rgba(0,0,0,.28);transform-origin:left center;animation:vl-wave 3.6s ease-in-out infinite}
.me-card::before{content:none}
.me-avatar{border:2px solid var(--cn-gold) !important;box-shadow:0 4px 14px rgba(0,0,0,.22)}

/* ---------- 登录页：整屏红金 + 大五角星 + 飘旗 ---------- */
.login-page{background:
   radial-gradient(circle at 50% 16%,rgba(242,193,78,.22),transparent 55%),
   repeating-linear-gradient(45deg,rgba(255,255,255,.028) 0 12px,transparent 12px 24px),
   linear-gradient(160deg,var(--cn-red) 0%,var(--cn-red-deep) 58%,var(--cn-red-dark) 100%) !important;
   position:relative;overflow:hidden}
.login-page::before{content:"★";position:absolute;top:-46px;right:-26px;font-size:230px;color:rgba(242,193,78,.10);line-height:1;pointer-events:none}
.login-page::after{content:"";position:absolute;top:30px;left:24px;width:84px;height:54px;pointer-events:none;
   background-image:var(--cn-flag),linear-gradient(135deg,var(--cn-red) 0%,var(--cn-red-dark) 100%);background-size:80% 80%,100% 100%;background-position:14% center,0 0;background-repeat:no-repeat,no-repeat;
   clip-path:polygon(0 0,100% 7%,100% 93%,0 100%);border-radius:3px 10px 10px 3px;
   box-shadow:0 6px 18px rgba(0,0,0,.3);transform-origin:left center;animation:vl-wave 3.4s ease-in-out infinite}
.logo-area{position:relative;z-index:3}
.app-name{color:#fff !important;letter-spacing:5px;font-weight:800;text-shadow:0 2px 12px rgba(0,0,0,.35)}
.app-name::after{content:" ★";color:var(--cn-gold-lt);font-size:.55em;vertical-align:super}
.app-slogan{color:rgba(255,240,222,.92) !important;letter-spacing:2px}
.tab-bar{background:transparent !important;border-bottom:1px solid rgba(242,193,78,.42) !important;position:relative;z-index:3}
.tab-item{color:#f6dfc8 !important;font-weight:600}
.tab-item.active{color:var(--cn-gold-lt) !important;border-bottom:2px solid var(--cn-gold) !important}
.form-area{background:rgba(255,255,255,.985) !important;border-radius:18px !important;border:1.5px solid rgba(242,193,78,.55) !important;
   box-shadow:0 18px 44px rgba(40,0,8,.35) !important;position:relative;z-index:3;overflow:hidden}
.form-area::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--cn-red),var(--cn-gold),var(--cn-red))}
.input-label{color:var(--cn-red-deep) !important;font-weight:700}
.input-row{border-bottom:1px solid var(--cn-line) !important}
.form-area .btn,.login-page .btn{background:linear-gradient(135deg,var(--cn-red) 0%,var(--cn-red-deep) 100%) !important;color:#fff !important;
   border:1px solid var(--cn-gold) !important;box-shadow:0 6px 18px rgba(142,11,30,.35) !important;font-weight:700;letter-spacing:3px}
.form-area .btn:active{filter:brightness(1.07)}

/* ---------- 聊天气泡：我方红金，对方暖白 ---------- */
.mine .bubble{background:linear-gradient(135deg,var(--cn-red) 0%,var(--cn-red-mid) 100%) !important;color:#fff !important;border:1px solid rgba(242,193,78,.45) !important;box-shadow:0 2px 8px rgba(142,11,30,.22)}
.bubble{background:#fff !important;border:1px solid var(--cn-line) !important;box-shadow:0 1px 4px rgba(43,26,23,.06)}
.msg-row.mentioned .bubble{background:#fff6e6 !important;border:1px solid var(--cn-gold) !important}
.msg-area,.msg-list{background:var(--cn-bg) !important}
.input-area{background:#fff !important;border-top:1px solid var(--cn-line) !important}
.chat-input{background:#f7efe8 !important}

/* ---------- 通用卡片/列表/按钮：金描边 + 红主色 ---------- */
.list-item,.conv-item,.g-card,.create-card,.form-card,.card,.fwd-item,.search-bar,.top-bar,.login-card{background:var(--cn-card)}
.conv-item:active,.list-item:active{background:#fdf1e4 !important}
[class*=btn],[class*=button]{border-radius:1.375rem}
.tab-bar{background:#fff;box-shadow:inset 0 -2px 0 var(--cn-gold)}
.fwd-panel,.mention-panel,.dialog,.uni-modal{border-top:2px solid var(--cn-gold) !important}

/* ---------- 通用：滚动条 / 选中 / 高亮 ---------- */
::selection{background:var(--cn-red);color:#fff}
.vl-gold-line{height:2px;background:linear-gradient(90deg,transparent,var(--cn-gold),transparent)}
@keyframes vl-wave{0%,100%{transform:perspective(70px) rotateY(-8deg) skewY(-1.2deg)}50%{transform:perspective(70px) rotateY(9deg) skewY(1.6deg)}}
@media (prefers-reduced-motion:reduce){.me-card::after,.login-page::after{animation:none}}