/* ═══════════════════════════════════════════════════════════════
     个人端(me.html)· 布局与学校端 app.html 保持一致,主色调改为暖色。
     色板:陶土(主色)· 琥珀(强调)· 沙色/奶油(底)· 暖灰阶(层次)
     骨架版(2026-09-03):结构、分类、卡片、配图位先立住,内容随后开发。
     ═══════════════════════════════════════════════════════════════ */
  :root{
    --ink:#3a2a1e; --muted:#9a8878; --line:#eee4d9; --warm:#b8562a; --gold:#e0a63a;
    --bg:#faf6f1; --card:#ffffff;
    --g1:#f7f2ec; --g2:#efe7de; --g3:#e2d7ca; --g4:#b9a897; --g5:#7c6a58;
    /* 三类应用的色调:同一暖色系里拉开层次,不抢主色 */
    --cat-self-bg:#fbe9dd;  --cat-self-fg:#a04a25;   /* 认识自己 · 陶土 */
    --cat-world-bg:#f6ecd4; --cat-world-fg:#8a5a12;  /* 认识世界 · 琥珀 */
    --cat-choose-bg:#ece9e0;--cat-choose-fg:#5e5a48; /* 做出选择 · 橄榄沙 */
  }
  *{ box-sizing:border-box; }
  html{ height:100%; }
  body{ margin:0; font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
    color:var(--ink); background:var(--bg); display:flex; min-height:100vh; }

  /* ── 左侧栏(与学校端同构) ── */
  .rail{ width:96px; flex:0 0 96px; background:#fff; border-right:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; padding:18px 0 14px; position:sticky; top:0; height:100vh; }
  .rail .logo{ width:44px; height:44px; object-fit:contain; margin-bottom:22px; }
  .rail .item{ width:76px; padding:10px 0 8px; border-radius:12px; display:flex; flex-direction:column; align-items:center;
    gap:5px; font-size:11.5px; font-weight:600; color:#8a7666; cursor:pointer; border:0; background:transparent;
    font-family:inherit; transition:.15s; margin-bottom:6px; }
  .rail .item svg{ width:21px; height:21px; }
  .rail .item:hover{ background:var(--g1); color:var(--ink); }
  .rail .item.on{ background:var(--g2); color:var(--warm); }
  .rail .spacer{ flex:1; }
  .rail .avatar{ width:38px; height:38px; border-radius:50%; background:var(--warm); color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:800; cursor:default; }

  /* ── 主区 ── */
  .main{ flex:1; min-width:0; padding:26px clamp(20px,3vw,44px) 48px; }
  .topbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:26px; }
  .tab{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:11px; border:0; background:transparent;
    font:inherit; font-size:13.5px; font-weight:700; color:#7c6a58; cursor:pointer; transition:.15s; }
  .tab svg{ width:17px; height:17px; }
  .tab:hover{ background:var(--g2); }
  .tab.on{ background:#fff; color:var(--ink); box-shadow:0 4px 14px rgba(120,70,30,.10); }
  .topbar .right{ margin-left:auto; display:flex; align-items:center; gap:10px; }
  .who{ text-align:right; }
  .who .name{ font-size:13px; font-weight:700; }
  .who .role{ font-size:11px; color:var(--muted); }
  .logout{ border:1.6px solid var(--line); background:#fff; border-radius:10px; padding:8px 14px;
    font:inherit; font-size:12.5px; font-weight:700; color:#5e4a3a; cursor:pointer; transition:.15s; }
  .logout:hover{ border-color:var(--warm); color:var(--warm); }

  .sect{ margin:30px 0 14px; font-size:17px; font-weight:800; letter-spacing:-.3px; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
  .sect:first-of-type{ margin-top:4px; }
  .sect .cnt{ font-size:12.5px; font-weight:600; color:var(--muted); }
  .sect .lead{ font-size:12.5px; font-weight:500; color:var(--g5); flex-basis:100%; margin-top:2px; }

  /* ── 占位表单(报告 / 设置) ── */
  .form{ max-width:720px; background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px 28px 22px; }
  .form h2{ font-size:17px; font-weight:800; margin:0 0 4px; }
  .form .fsub{ font-size:12.5px; color:var(--muted); margin:0 0 20px; line-height:1.7; }
  .row2{ display:flex; gap:10px; align-items:center; padding:8px 0; border-bottom:1px dashed var(--line); font-size:12.8px; }
  .row2:last-child{ border-bottom:0; }
  .row2 .k{ color:#7c6a58; min-width:120px; }
  .row2 .v{ margin-left:auto; font-weight:700; }


a{text-decoration:none}a.act{display:inline-flex;align-items:center;justify-content:center}a.item,a.tab{text-decoration:none}.act{padding:9px 14px;border:0;border-radius:10px;font:inherit;font-size:12px;cursor:pointer}.act.open{background:var(--warm);color:white}.act.prev{background:var(--g1);color:#7c6a58}.act.soon{background:var(--g1);color:var(--muted);cursor:default}.muted{color:var(--muted)}.mobile-nav{display:none}.page-loading{color:var(--muted);padding:30px 0}.detail-body{max-width:850px;background:white;border:1px solid var(--line);border-radius:16px;padding:26px;line-height:1.8}.detail-body h2{margin-top:0}.detail-body .detail-actions{display:flex;gap:12px;align-items:center}.return-link{display:inline-block;color:var(--warm);margin-bottom:18px;font-size:13px}@media(max-width:760px){.rail{display:none}.main{padding-bottom:95px}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:20;background:#fffcf9;border-top:1px solid var(--line);padding:10px 8px calc(10px + env(safe-area-inset-bottom));justify-content:space-around}.mobile-nav a{font-size:12px;padding:10px;color:#8a7666}.mobile-nav a.on{background:var(--g2);border-radius:9px;color:var(--warm)}.form{padding:22px 18px}.row2{flex-wrap:wrap}.row2 .k{min-width:90px}}

/* 未开通应用:灰色操作按钮比未授权状态标签更深。 */
.act.activate{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#e2e0dc;color:#65615c;box-shadow:none}
.act.activate:hover{background:#d5d2cd;color:#4f4b46}
.act.activate:focus-visible{outline:2px solid #807a72;outline-offset:3px}
.act.activate .activate-lock{width:14px;height:14px;flex:none}