/* ===== 翼讲解 交互原型 基础样式 ===== */
/* 单位：1dp ≈ 1px，设备框 480×853（5.7″ 1280×720，hdpi density1.5；状态栏24 + 内容829） */
:root{
  --black:#000000; --white:#FFFFFF;
  --yellow:#FFE283;        /* color_studyTour_yellow 选中态 */
  --study-text:#412900;    /* color_studyTour_text */
  --kg-text:#4D2933;       /* color_knowledgegrap_text */
  --kg-no-text:#7E7366;
  --kg-untext:#FFCC97;
  --red:#FB0000;
  --yellow-top:#FFD235; --yellow-bottom:#FFA618;
  --bg-bottom-view:linear-gradient(#313131,#373E3C,#525D5A);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  background:#0c0c0c; display:flex; align-items:center; justify-content:center;
  min-height:100vh; overflow:auto;
  font-family:"PingFang SC","Microsoft YaHei",sans-serif; -webkit-font-smoothing:antialiased;
}
img{display:block; -webkit-user-drag:none;}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}

/* ===== 设备框 ===== */
.frame-wrap{ flex:0 0 auto; }
.phone-frame{
  position:relative; width:480px; height:773px; background:#000;
  border-radius:42px; overflow:hidden; transform-origin:top left;
  box-shadow:0 0 0 10px #2b2b2b, 0 0 0 12px #555, 0 24px 70px rgba(0,0,0,.65);
}
/* 状态栏（浮层，不占内容空间） */
.status-bar{
  position:absolute; top:0; left:0; right:0; height:24px; z-index:300;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 18px; color:#fff; font-size:13px; font-weight:600; pointer-events:none;
}
.status-bar .icons{display:flex; gap:5px; align-items:center;}
.status-bar svg{fill:currentColor;}

/* app 容器（扣去状态栏28，内容区887px） */
#app{position:absolute; top:24px; left:0; right:0; bottom:0; overflow:hidden;}

/* ===== 页面转场（模拟 Activity 栈） ===== */
.page{position:absolute; inset:0; overflow:hidden; background:#000;}
.page.enter{animation:pgEnter .3s ease both;}
.page.exit{animation:pgExit .3s ease both;}
.page.enter-back{animation:pgEnterBack .3s ease both;}
.page.exit-back{animation:pgExitBack .3s ease both;}
@keyframes pgEnter{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes pgExit{from{transform:translateX(0);opacity:1}to{transform:translateX(-28%);opacity:.45}}
@keyframes pgEnterBack{from{transform:translateX(-28%);opacity:.45}to{transform:translateX(0);opacity:1}}
@keyframes pgExitBack{from{transform:translateX(0)}to{transform:translateX(100%)}}

/* 返回按钮（55dp） */
.back-btn{position:absolute; top:30px; left:30px; width:55px; height:55px; z-index:20; cursor:pointer;}
.back-btn img{width:100%; height:100%;}

/* 工具类 */
.bg-cover{background-size:cover; background-position:center; background-repeat:no-repeat;}
.scroll{overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.scroll::-webkit-scrollbar{display:none;}
.scroll-x{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
.scroll-x::-webkit-scrollbar{display:none;}

/* seekbar（seekbar_progress.xml：轨道#635E5E 10dp / 进度#F6CF64 / thumb 白圆 30dp） */
.seekbar{-webkit-appearance:none;appearance:none;width:100%;height:30px;background:transparent;outline:none;cursor:pointer;}
.seekbar::-webkit-slider-runnable-track{height:10px;border-radius:5px;background:linear-gradient(to right,#F6CF64 var(--pct,0%),#635E5E var(--pct,0%));}
.seekbar::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;cursor:pointer;margin-top:-10px;}
.seekbar::-moz-range-track{height:10px;border-radius:5px;background:#635E5E;}
.seekbar::-moz-range-progress{height:10px;border-radius:5px;background:#F6CF64;}
.seekbar::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:0;cursor:pointer;}

/* loading */
.loading-mask{position:absolute;inset:0;z-index:300;background:rgba(0,0,0,.7);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:var(--yellow);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg)}}