/* ============================================================
   LELE CONCEPT · 私域中央管理系统 — 外壳样式（白 · 暖）
   只做品牌容器与导航，不干预原系统任何样式
   ============================================================ */

:root{
  --bg:        #faf8f5;
  --surface:   #ffffff;
  --line:      #ebe4da;
  --line-soft: #f3eee7;
  --ink:       #221d17;
  --ink-2:     #6b6258;
  --ink-3:     #a99b88;
  --gold:      #8f6f3e;
  --gold-bg:   #f5ede1;
  --gold-line: #e9d9bd;
  --nav-h:     60px;
  --radius:    9px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{
  margin:0; padding:0;
  height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}

.shell{
  display:flex;
  flex-direction:column;
  height:100vh;
  height:100dvh;
  overflow:hidden;
}

/* ------------------------------------------------------------
   顶栏（按设计稿：LC 标识 + 品牌 + 金色胶囊端 + 两侧金丝带）
   ------------------------------------------------------------ */
.topbar{
  flex:none;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:16px;
  padding:0 14px 0 26px;
  background:#fff;
  position:relative;
  z-index:2;
  isolation:isolate;
  box-shadow:0 1px 0 rgba(198,176,144,.62);
}

/* 两侧香槟金丝带 */
.topbar::before{
  content:"";
  position:absolute; inset:0;
  background:
    /* 左端金带：从左下向右上斜切 */
    linear-gradient(101deg, rgba(188,150,90,.42) 0%, rgba(206,174,120,.26) 4.5%, rgba(226,203,167,.13) 9%, rgba(255,255,255,0) 17%),
    /* 右端金带 */
    linear-gradient(259deg, rgba(196,160,101,.34) 0%, rgba(212,183,138,.20) 4%, rgba(231,211,180,.09) 8%, rgba(255,255,255,0) 15%),
    /* 两端柔光 */
    radial-gradient(96% 190% at -6% 128%, rgba(203,170,113,.42) 0%, rgba(232,214,182,.18) 32%, rgba(255,255,255,0) 58%),
    radial-gradient(78% 170% at 105% -44%, rgba(208,177,131,.30) 0%, rgba(240,226,202,.13) 36%, rgba(255,255,255,0) 62%),
    /* 中央极淡暖光 */
    radial-gradient(52% 190% at 50% 128%, rgba(243,232,214,.55) 0%, rgba(255,255,255,0) 72%);
  pointer-events:none;
  z-index:-1;
}
/* 丝带上的斜向细纹 */
.topbar::after{
  content:"";
  position:absolute; inset:0;
  background:repeating-linear-gradient(116deg, rgba(255,255,255,.62) 0 2px, rgba(255,255,255,0) 2px 10px);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 24%,transparent 76%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0%,transparent 24%,transparent 76%,#000 100%);
  opacity:.72;
  pointer-events:none;
  z-index:-1;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  flex:none;
  min-width:0;
}

.mark{
  width:46px; height:30px;
  flex:none;
  display:grid; place-items:center;
  color:var(--gold);
}
.mark svg{ width:100%; height:100%; display:block; }

.name{
  font-size:15px;
  font-weight:500;
  letter-spacing:.22em;
  color:#2a241c;
  white-space:nowrap;
}

.sub{
  font-size:11.5px;
  color:#a99b88;
  letter-spacing:.05em;
  padding-left:12px;
  margin-left:1px;
  border-left:1px solid #e7ddd0;
  white-space:nowrap;
}

/* ------------------------------------------------------------
   端切换
   ------------------------------------------------------------ */
.ends{
  display:flex;
  align-items:center;
  gap:3px;
  min-width:0;
  overflow:visible;
}

.end{
  appearance:none;
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid transparent;
  background:transparent;
  color:#8b8073;
  font:inherit;
  font-size:13px;
  line-height:1;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.end svg{ width:15px; height:15px; flex:none; opacity:.8; }

/* 端之间的发丝分隔线 */
.end + .end::before{
  content:"";
  position:absolute; left:-2px; top:50%;
  transform:translateY(-50%);
  width:1px; height:14px;
  background:#e8ded0;
}
.end.on::before,
.end.on + .end::before{ display:none; }

.end:hover{
  background:rgba(246,238,225,.8);
  color:#6b5228;
}
.end:hover svg{ opacity:1; }

.end.on{
  background:linear-gradient(180deg,#f9efdc 0%,#f1e0c2 100%);
  border-color:#e2c99f;
  color:#6b5228;
  font-weight:500;
  box-shadow:0 1px 2px rgba(143,111,62,.10), inset 0 1px 0 rgba(255,255,255,.92);
}
.end.on svg{ opacity:1; color:#8a6a3b; }

.end:focus-visible{
  outline:2px solid #e2c99f;
  outline-offset:1px;
}

/* ------------------------------------------------------------
   右侧动作
   ------------------------------------------------------------ */
.acts{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:2px;
  flex:none;
}

.ico{
  appearance:none;
  width:32px;height:32px;
  display:grid;place-items:center;
  border:1px solid transparent;
  background:transparent;
  border-radius:8px;
  color:#b3a48f;
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
.ico:hover{ background:rgba(246,238,225,.85); color:#8a6a3b; }
.ico svg{ width:16px;height:16px; }

/* ------------------------------------------------------------
   内容区
   ------------------------------------------------------------ */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  min-width:0;
  background:var(--bg);
}

#frame{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:var(--surface);
}

.veil{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:var(--bg);
  color:var(--ink-3);
  font-size:12px;
  letter-spacing:.04em;
  transition:opacity .35s ease,visibility .35s ease;
}
.veil.hide{ opacity:0; visibility:hidden; }

.spin{
  width:20px;height:20px;
  border:1.5px solid var(--line);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

/* ------------------------------------------------------------
   窄屏
   ------------------------------------------------------------ */
@media (max-width:1080px){
  .sub{ display:none; }
}

@media (max-width:820px){
  :root{ --nav-h:54px; }

  .topbar{
    gap:8px;
    padding:0 8px 0 10px;
  }
  .brand{ gap:7px; flex:none; }
  .mark{ width:30px;height:24px; }
  /* 手机空间有限：只留 LC 标识，四个端才排得下 */
  .name{ display:none; }
  .sub{ display:none; }

  .ends{
    flex:1 1 auto;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    padding:2px 0;
    gap:0;
  }
  .ends::-webkit-scrollbar{ display:none; }

  .end{
    padding:6px 8px;
    font-size:11.5px;
    gap:0;
  }
  .end svg{ display:none; }
  .end + .end::before{ height:12px; left:-1px; }

  .acts{ gap:0; }
  #btnFull{ display:none; }
  .ico{ width:28px;height:28px; }
}

@media (prefers-reduced-motion:reduce){
  .spin{ animation-duration:2s; }
  .veil{ transition:none; }
}