/* 奥博老师 INS 工作台 · 在分身世界 tokens 上的轻量补充（不另起设计系统） */
:root {
  --aobo-ink: #121212;
  --aobo-soft: #f6f6f8;
}

.login-screen {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 22px 48px;
  background: #fff;
}

.login-screen .wordmark {
  font-family: "Songti SC", "STSong", "Hiragino Mincho ProN", serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 8px;
}

.login-screen .login-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin: 0 0 28px;
}

.login-screen label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.login-screen select,
.login-screen input {
  border: 1px solid #e4e4e8;
  border-radius: 10px;
  padding: 13px 12px;
  width: 100%;
  background: #fbfbfc;
  font: inherit;
  font-weight: 400;
  outline: none;
  color: #222;
  box-sizing: border-box;
}

.login-screen .studio-primary {
  width: 100%;
  margin-top: 8px;
}

.login-hint {
  margin-top: 18px;
  font-size: 11px;
  color: #999;
  line-height: 1.7;
}

.avatar-initials {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid #fff;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.avatar--small .avatar-initials {
  font-size: 13px;
}

.avatar--profile .avatar-initials {
  font-size: 36px;
}

.cover-block {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 16px;
  color: #fff;
  background: linear-gradient(160deg, #333 0%, var(--cover-tone, #1e293b) 100%);
}

.cover-block small {
  font-size: 11px;
  opacity: 0.85;
}

.cover-block b {
  font-size: 18px;
  letter-spacing: -0.04em;
  margin-top: 4px;
}

.progress-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 650;
  background: #f3f3f5;
  color: #555;
}

.progress-pill.is-green { background: #e8f7ee; color: #157a3c; }
.progress-pill.is-yellow { background: #fff6e0; color: #9a6b00; }
.progress-pill.is-red { background: #ffecec; color: #b42318; }
.progress-pill.is-report { background: #eef2ff; color: #3730a3; }
.progress-pill.is-evidence { background: #f1f5f9; color: #334155; }

.student-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  width: 100%;
  text-align: left;
}

.student-row > div {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.student-row b {
  font-size: 14px;
}

.student-row span {
  font-size: 11px;
  color: var(--muted);
}

.timeline-page {
  padding-bottom: 96px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  padding: 0 18px 22px;
}

.timeline-dot {
  width: 10px;
  height: 10px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px #fa625e22;
}

.timeline-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}

.timeline-card time {
  font-size: 11px;
  color: var(--muted);
}

.timeline-card b {
  display: block;
  margin: 4px 0 6px;
  font-size: 14px;
}

.timeline-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #444;
}

.chat-page {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 64px);
  padding-bottom: 88px;
}

.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.chat-bubble {
  max-width: 86%;
  padding: 11px 13px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

.chat-bubble.from-assistant {
  align-self: flex-start;
  background: var(--soft);
  color: #222;
  border-bottom-left-radius: 5px;
}

.chat-bubble.from-user {
  align-self: flex-end;
  background: #171717;
  color: #fff;
  border-bottom-right-radius: 5px;
}

.chat-compose {
  position: sticky;
  bottom: 71px;
  display: flex;
  gap: 8px;
  padding: 10px 12px max(10px, env(safe-area-inset-bottom));
  background: #fffffff5;
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

.chat-compose input {
  flex: 1;
  border: 1px solid #e4e4e8;
  border-radius: 20px;
  padding: 11px 14px;
  font: inherit;
  background: #f7f7f8;
  outline: none;
}

.chat-compose button {
  padding: 0 16px;
  border-radius: 18px;
  background: #171717;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
}

.org-chain {
  margin: 12px 18px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--soft);
  font-size: 12px;
  line-height: 1.7;
  color: #555;
}

.org-chain b {
  color: var(--ink);
}

.mock-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: #888;
  padding: 2px 7px;
  border: 1px solid #e8e8ec;
  border-radius: 999px;
}

.profile-tile .cover-block {
  height: 126px;
  padding: 10px 8px;
}

.profile-tile .cover-block b {
  font-size: 12px;
}

.stream-top .wordmark {
  font-family: "Songti SC", "STSong", "Hiragino Mincho ProN", serif;
}

.bottom-nav .nav-item--add .nav-icon {
  border: 2px solid currentColor;
  border-radius: 7px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
}

.students-page,
.home-feed {
  padding-bottom: 90px;
}

.filter-chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 16px 4px;
  scrollbar-width: none;
}

.filter-chip-row::-webkit-scrollbar { display: none; }

.filter-chip {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--soft);
  font-size: 12px;
  color: #666;
}

.filter-chip.is-active {
  background: #171717;
  color: #fff;
}

/* ---- Instagram-like shell (5 tabs) ---- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.avatar--tiny{width:26px;height:26px;flex-basis:26px}
.avatar--tiny .avatar-photo{border-width:0}
.ig-nav .nav-item span:last-child{font-size:10px}
.ig-nav .nav-avatar{display:grid;place-items:center;height:26px}
.ig-nav .nav-item.is-active .nav-avatar .avatar{box-shadow:0 0 0 2px #111}
.ig-top .wordmark{display:flex;align-items:center;gap:2px;font-size:26px}
.ig-post .like-count{margin:8px 0 0;font-size:14px}
.ig-post .stream-author-name a{color:inherit;text-decoration:none}
.story{position:relative}
.story.has-ring .avatar{background:linear-gradient(140deg,#f9ce34,#ee2a7b 52%,#6228d7)}
.story--self .story-plus{position:absolute;right:4px;bottom:18px;width:18px;height:18px;border-radius:50%;background:#0095f6;color:#fff;font-size:14px;line-height:16px;border:2px solid #fff;text-align:center;font-style:normal}
.profile-bio{padding:0 18px 12px}
.profile-bio b{display:block;font-size:14px}
.profile-bio .role-tag{display:inline-block;font-size:12px;color:#73737b;margin:2px 0 6px}
.profile-bio p{margin:0;font-size:13px;line-height:1.5}
.profile-bio .child-line{margin-top:6px;color:#555}
.ig-actions{flex-wrap:wrap}
.ig-actions a,.ig-actions button{text-decoration:none}
.is-locked-btn{opacity:.45;pointer-events:none}
.ig-profile-top .profile-switch{display:flex;align-items:center;gap:2px;font-size:16px;font-weight:700;background:none;border:0}
.text-btn{background:none;border:0;color:#0095f6;font-weight:700;font-size:15px;padding:8px}
.create-page{padding:0 0 100px}
.create-preview{aspect-ratio:1;background:#111;display:grid;place-items:center;overflow:hidden}
.create-preview img,.create-preview video{width:100%;height:100%;object-fit:cover}
.create-empty{color:#999;text-align:center}
.create-empty p{margin:10px 0 0}
.create-pick{display:flex;justify-content:center;margin:14px;cursor:pointer}
.create-pick input{display:none}
.create-pick span{display:inline-flex;gap:8px;align-items:center;padding:10px 16px;border-radius:10px;background:#f2f2f4;font-weight:600;font-size:14px}
.create-cap{display:flex;flex-direction:column;gap:8px;padding:0 16px;font-size:13px;color:#666}
.create-cap textarea{border:1px solid #ececef;border-radius:12px;padding:12px;font:inherit;resize:vertical}
.create-vis{display:flex;gap:14px;align-items:center;padding:16px;font-size:13px}
.create-vis .is-disabled{opacity:.4}
.explore-page{padding-bottom:90px}
.explore-tile{border:0;padding:0;position:relative;background:var(--cover-tone,#222);color:#fff;overflow:hidden}
.explore-tile .cover-block{height:100%;padding:12px;display:flex;flex-direction:column;justify-content:flex-end;text-align:left}
.explore-tile.is-game{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:12px;gap:4px}
.explore-tile.is-game b{font-size:10px;opacity:.85}
.explore-tile.is-game span{font-size:14px;font-weight:700}
.explore-tile.is-game small{font-size:10px;opacity:.8}
.reel-mark{position:absolute;right:6px;top:6px;color:#fff;filter:drop-shadow(0 1px 2px #0008)}
.search-results{padding:8px 0 40px}
.search-results h3{margin:14px 16px 6px;font-size:14px}
.search-hit{display:grid;grid-template-columns:88px 1fr;gap:10px;padding:8px 16px;align-items:center}
.search-hit .post-media{height:72px;border-radius:8px}
.search-hit b{display:block;font-size:13px}
.search-hit span{font-size:12px;color:#777}
.profile-tile{position:relative}

/* Reels fullscreen */
body.is-reels .app-shell{background:#000}
body.is-reels .bottom-nav{background:#0b0b0b;border-color:#252525;color:#fff}
body.is-reels .bottom-nav .nav-item{color:#a7a7a7}
body.is-reels .bottom-nav .is-active{color:#fff}
.reels-page{height:calc(100svh - 71px - env(safe-area-inset-bottom));background:#080808;color:#fff;position:relative;overflow:hidden}
.reels-top{position:absolute;top:0;left:0;right:0;z-index:25;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;background:linear-gradient(#0008,transparent);pointer-events:none}
.reels-top b{font-size:20px}
.reels-top button{pointer-events:auto;color:#fff;display:grid;place-items:center}
.reel-stack{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none}
.reel-stack::-webkit-scrollbar{display:none}
.reel{height:100%;scroll-snap-align:start;scroll-snap-stop:always;position:relative;margin:0;background:#000;overflow:hidden}
.reel-stage{position:absolute;inset:0}
.reel-stage video,.reel-cover{width:100%;height:100%;object-fit:cover}
.reel-cover{display:flex;align-items:flex-end;padding:100px 90px 120px 16px}
.reel-side{position:absolute;right:10px;bottom:110px;display:flex;flex-direction:column;gap:18px;align-items:center;z-index:5}
.reel-side button{color:#fff;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;font-size:12px}
.reel-side .is-liked{color:#ff2d55}
.reel-audio{margin-top:4px}
.reel-meta{position:absolute;left:0;right:70px;bottom:18px;display:flex;gap:10px;align-items:flex-end;padding:0 14px 8px;z-index:5}
.reel-meta p{margin:6px 0 0;font-size:13px;line-height:1.4}
.reel-user{display:flex;align-items:center;gap:8px}
.follow-mini{border:1px solid #fff;background:transparent;color:#fff;border-radius:8px;padding:2px 8px;font-size:12px;font-weight:700}

/* DM */
.dm-page{display:flex;flex-direction:column;height:calc(100dvh - 56px);max-width:500px;margin:0 auto}
.dm-head{display:flex;align-items:center;gap:8px}
.dm-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px}
.dm-bubble{max-width:75%;padding:10px 14px;border-radius:18px;font-size:14px;line-height:1.45;position:relative}
.dm-bubble time{display:block;font-size:10px;opacity:.55;margin-top:4px}
.dm-bubble.from-me{align-self:flex-end;background:#3797f0;color:#fff;border-bottom-right-radius:4px}
.dm-bubble.from-them{align-self:flex-start;background:#efefef;border-bottom-left-radius:4px}
.dm-compose{display:flex;gap:8px;padding:10px 12px max(10px,env(safe-area-inset-bottom));border-top:1px solid #ececef}
.dm-compose input{flex:1;height:42px;border-radius:22px;border:1px solid #dbdbdb;padding:0 14px;font-size:14px;outline:0}
.dm-compose button{border:0;background:none;color:#0095f6;font-weight:700}
.works-empty{grid-column:1/-1;text-align:center;color:#999;padding:40px 16px;font-size:13px}
.dm-hint{margin:8px 18px 0;font-size:11px;color:#8a8a90;display:flex;align-items:center;gap:4px}
.inbox-h{margin:16px 16px 6px;font-size:15px}
.inbox-h small{color:#999;font-weight:500}
.inbox-page .student-row{width:100%;text-align:left;background:none;border:0}
.inbox-page .student-row small{font-size:11px;color:#999}
.reels-top{gap:8px}
.video-tabs{display:flex;gap:16px;pointer-events:auto}
.video-tabs button{background:none;border:0;color:rgba(255,255,255,.65);font-size:15px;font-weight:600;padding:4px 0;cursor:pointer}
.video-tabs button.is-active{color:#fff;border-bottom:2px solid #fff}
.video-cat{display:inline-block;font-size:11px;background:rgba(255,255,255,.2);border-radius:6px;padding:1px 6px;margin-right:6px}
/* IG 资料按钮 / 三栏 tabs */
.ig-actions{display:flex;gap:6px;padding:0 16px}
.ig-actions>button,.ig-actions>a{flex:1;height:34px;border:0 !important;border-radius:8px;background:#efefef !important;color:#111 !important;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:4px}
.ig-actions>.is-primary{background:#0095f6 !important;color:#fff !important}
.ig-actions>.is-locked-btn{opacity:.4}
.profile-tabs{grid-template-columns:repeat(3,1fr) !important}

/* ---- 奥博世界 · AI 生成演示图（public/img/） ---- */
.cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.post-media.has-cover{position:relative;overflow:hidden;background:#eee}
.post-media.has-cover .play-badge{position:absolute;right:12px;top:12px;z-index:2}
.explore-tile .cover-img{z-index:0}
.explore-tile .reel-mark{z-index:2}
.explore-tile.is-game{isolation:isolate}
.explore-tile.is-game:has(.cover-img)::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.62) 100%)}
.explore-tile.is-game>b,.explore-tile.is-game>span,.explore-tile.is-game>small{position:relative;z-index:1;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.reel-cover.has-cover{position:relative;width:100%;height:100%;display:flex;align-items:flex-end;padding:100px 90px 140px 16px;color:#fff}
.reel-cover.has-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.55) 100%)}
.reel-cover.has-cover>b,.reel-cover.has-cover>.play-badge{position:relative;z-index:1}
.reel-cover.has-cover>b{font-size:22px;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.profile-tile .cover-img,.work-tile .cover-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.profile-tile .cover-block.on-photo{position:relative;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6) 100%)}
.tw-me.has-photo{padding:0;overflow:hidden}
.tw-me.has-photo img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.tw-photo{border-radius:50%;overflow:hidden;flex:0 0 auto;display:block}
.tw-photo img{width:100%;height:100%;object-fit:cover;display:block}
.tw-report-row{display:grid;grid-template-columns:48px 1fr;column-gap:10px;align-items:center}
.tw-report-row .tw-report-cover{grid-row:span 2;width:48px;height:64px;object-fit:cover;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.explore-tile.is-game>b{position:relative;left:auto;right:auto;bottom:auto;background:rgba(0,0,0,.38);padding:2px 7px;border-radius:999px;font-size:10px;font-weight:600}
.explore-tile.is-game>span{font-size:13px;line-height:1.25}
.explore-tile.is-game>small{font-size:10px;line-height:1.3}