/* ============================================================
   高中综合素质-评价系统 —— 共享设计令牌（暗色玻璃拟态）
   所有页面共用此文件；页面级样式放在各自 <style> 中。
   ============================================================ */
:root{
  --bg:#0A1412; --bg-2:#0E1B18;
  --ink:#EDF5F2; --ink-2:#9DB4AE; --ink-3:#5F766E;
  --brand:#14B8A6; --brand-hi:#5EEAD4; --brand-dim:#0F766E;
  --gold:#FBBF24; --gold-hi:#FDE68A; --gold-dim:#B45309;
  --blue:#0EA5E9; --violet:#A78BFA; --pink:#F472B6; --red:#F87171;
  --line:rgba(255,255,255,.08); --line-hi:rgba(255,255,255,.14);
  --glass:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  --r:22px; --r-sm:15px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(900px 520px at 80% -12%, rgba(20,184,166,.20), transparent 60%),
    radial-gradient(760px 520px at -12% 32%, rgba(251,191,36,.08), transparent 55%),
    radial-gradient(1000px 760px at 50% 128%, rgba(20,184,166,.14), transparent 62%),
    linear-gradient(158deg,#0D1A17 0%,#0A1412 52%,#0B1613 100%);
  color:var(--ink); font-size:14px; -webkit-font-smoothing:antialiased; overflow:hidden;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:52px 52px;
  -webkit-mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
          mask-image:radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aura{position:fixed;inset:-12%;z-index:0;pointer-events:none;filter:blur(64px);opacity:.55;
  background:
    radial-gradient(30% 30% at 20% 12%, rgba(20,184,166,.28), transparent 70%),
    radial-gradient(30% 30% at 76% 68%, rgba(251,191,36,.32), transparent 70%),
    radial-gradient(26% 26% at 64% 18%, rgba(94,234,212,.30), transparent 70%);
  animation:auraDrift 20s ease-in-out infinite alternate;}
@keyframes auraDrift{from{transform:translate3d(-2.5%,-2%,0) scale(1)}to{transform:translate3d(3%,3%,0) scale(1.14)}}

.shell{position:relative;height:100vh;display:grid;grid-template-rows:64px 1fr;z-index:1;}
main{display:grid;grid-template-rows:minmax(0,1fr);gap:18px;padding:24px 28px 26px;min-height:0;}

/* ---------- 顶栏 ---------- */
.topbar{display:flex;align-items:center;gap:20px;padding:0 28px;
  background:rgba(10,20,18,.5);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:34px;height:34px;border-radius:11px;position:relative;flex:none;
  background:linear-gradient(135deg,#3EE0C9 0%,#14B8A6 48%,#0B7A6E 100%);display:flex;align-items:center;justify-content:center;
  color:#F0FFFC;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -8px 16px rgba(0,0,0,.18),0 0 0 1px rgba(94,234,212,.45),0 6px 20px rgba(20,184,166,.38);}
.logo svg{width:18px;height:18px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.18));}
.logo::after{content:"";position:absolute;inset:0;border-radius:11px;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 46%);opacity:.32;pointer-events:none;}
.brand .name{font-weight:700;font-size:14px;letter-spacing:.3px;}
.brand .name .sub{color:var(--ink-3);font-weight:500;font-size:12px;margin-left:4px;}
.crumbs{color:var(--ink-3);font-size:12.5px;display:flex;align-items:center;gap:9px;margin-left:4px;}
.crumbs b{color:var(--ink-2);font-weight:500;}
.crumbs .sep{opacity:.4;}
.port-back{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:7px 11px;border:1px solid var(--line);border-radius:9px;color:var(--ink-3);background:rgba(255,255,255,.025);font-size:11px;text-decoration:none;white-space:nowrap;transition:.2s;}
.port-back:hover{color:var(--brand-hi);border-color:rgba(94,234,212,.4);background:rgba(20,184,166,.07);}
.port-back + .right{margin-left:0;}
.right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.rolechip{display:flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);}
.rolechip .rt{color:var(--brand-hi);font-weight:600;}
.icon-btn{position:relative;width:38px;height:38px;border-radius:12px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;transition:.2s;}
.icon-btn:hover{color:var(--ink);border-color:var(--line-hi);}
.icon-btn svg{width:18px;height:18px;}
.icon-btn .dot{position:absolute;top:7px;right:7px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;font-style:normal;line-height:1;color:#04211C;
  background:linear-gradient(135deg,#FDE68A,#FBBF24);box-shadow:0 0 0 2px #0A1412,0 0 10px rgba(251,191,36,.8);}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.7}}
.avatar{width:38px;height:38px;border-radius:50%;position:relative;
  background:linear-gradient(135deg,#14B8A6,#0F766E);display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#04211C;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 4px 14px rgba(0,0,0,.4);}

/* ---------- 玻璃卡片 ---------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--line);border-radius:var(--r);
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 60px rgba(0,0,0,.38);overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s;}
.glass:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 34px 70px rgba(0,0,0,.5);}
.glass::before{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);pointer-events:none;}
.glass::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(94,234,212,.09),transparent 60%);}
.glass:hover::after{opacity:1;}
.panel{padding:22px 24px;display:flex;flex-direction:column;min-height:0;}
.panel h3{font-size:13.5px;font-weight:700;letter-spacing:.5px;display:flex;align-items:center;gap:9px;margin-bottom:16px;}
.panel h3 svg{width:16px;height:16px;color:var(--brand-hi);}
.panel h3 .tag{font-size:10.5px;font-weight:500;color:var(--ink-3);letter-spacing:1px;margin-left:auto;border:1px solid var(--line);border-radius:999px;padding:2px 9px;}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:14px;padding:12px 20px;
  font-size:14px;font-weight:700;cursor:pointer;border:none;transition:.22s;text-decoration:none;letter-spacing:.3px;}
.btn svg{width:17px;height:17px;}
.btn-primary{position:relative;overflow:hidden;background:linear-gradient(135deg,#2DD4BF,#0F766E);color:#04211C;
  box-shadow:0 0 0 1px rgba(94,234,212,.5),0 10px 28px rgba(20,184,166,.4),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(94,234,212,.7),0 16px 36px rgba(20,184,166,.55),inset 0 1px 0 rgba(255,255,255,.5);}
.btn-ghost{background:rgba(255,255,255,.04);border:1px solid var(--line-hi);color:var(--ink);}
.btn-ghost:hover{border-color:rgba(94,234,212,.5);color:var(--brand-hi);background:rgba(20,184,166,.08);}
.btn-sm{padding:9px 15px;font-size:13px;border-radius:11px;}

/* ===== 形变动效 · 全局按键反馈 ===== */
/* ① 按压形变：所有可点元素按下时缩放 + 光环呼吸 */
.btn:active,.icon-btn:active,.chip:active,.act:active,.tile:active{
  transform:scale(.95);
  box-shadow:0 0 0 3px rgba(94,234,212,.2),0 6px 16px rgba(20,184,166,.24);
}
/* ② 圆角形态过渡：胶囊 chip 按下 / 选中时圆角收紧 */
.chip:active,.chip.on{border-radius:10px;}
/* ③ 尺寸变形：图标按钮按下微胀 */
.icon-btn:active{border-radius:14px;}
/* ④ 主按钮高光扫过（Fill 形变） */
.btn-primary::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.52),transparent);
  transform:skewX(-20deg);transition:left .55s var(--ease);pointer-events:none;}
.btn-primary:hover::after{left:130%;}

/* ---------- 徽标 ---------- */
.badge{font-size:10.5px;font-weight:600;padding:3px 9px;border-radius:999px;flex:none;letter-spacing:.5px;white-space:nowrap;}
.badge.warn{background:rgba(251,191,36,.12);color:var(--gold-hi);box-shadow:inset 0 0 0 1px rgba(251,191,36,.2);}
.badge.info{background:rgba(20,184,166,.1);color:var(--brand-hi);box-shadow:inset 0 0 0 1px rgba(94,234,212,.16);}
.badge.done{background:rgba(255,255,255,.06);color:var(--ink-3);}
.badge.red{background:rgba(248,113,113,.12);color:#FCA5A5;box-shadow:inset 0 0 0 1px rgba(248,113,113,.2);}
.badge.violet{background:rgba(167,139,250,.12);color:#C4B5FD;box-shadow:inset 0 0 0 1px rgba(167,139,250,.2);}

/* ---------- KPI 统计块 ---------- */
.kpi{display:flex;flex-direction:column;gap:5px;padding:15px 18px;border-radius:16px;
  background:rgba(255,255,255,.03);border:1px solid var(--line);}
.kpi .k{font-size:11.5px;color:var(--ink-3);letter-spacing:1px;}
.kpi .v{font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1;}
.kpi .v.grad{background:linear-gradient(120deg,#FDE68A,#FBBF24 60%,#5EEAD4);-webkit-background-clip:text;background-clip:text;color:transparent;}
.kpi .d{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.kpi .d.up{color:var(--brand-hi);}

/* ---------- 列表行（待办/审核通用） ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:13px;
  background:rgba(255,255,255,.025);border:1px solid transparent;transition:.2s;cursor:pointer;}
.row:hover{border-color:var(--line-hi);background:rgba(255,255,255,.05);}
.row .ti{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--brand-hi);background:rgba(20,184,166,.1);flex:none;box-shadow:inset 0 0 0 1px rgba(94,234,212,.14);}
.row .ti.gold{color:var(--gold-hi);background:rgba(251,191,36,.1);box-shadow:inset 0 0 0 1px rgba(251,191,36,.16);}
.row .ti.violet{color:var(--violet);background:rgba(167,139,250,.12);box-shadow:inset 0 0 0 1px rgba(167,139,250,.2);}
.row .ti svg{width:16px;height:16px;}
.row .tx{flex:1;min-width:0;}
.row .tx b{display:block;font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.row .tx span{font-size:11px;color:var(--ink-3);}

/* ---------- 动作卡 ---------- */
.act{display:flex;flex-direction:column;gap:9px;padding:15px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.028);border:1px solid var(--line);cursor:pointer;transition:.24s;text-decoration:none;color:inherit;position:relative;}
.act:hover{transform:translateY(-3px);border-color:rgba(94,234,212,.4);background:rgba(20,184,166,.07);
  box-shadow:0 14px 34px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);}
.act .ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  color:var(--brand-hi);background:rgba(20,184,166,.12);box-shadow:inset 0 0 0 1px rgba(94,234,212,.18);}
.act.gold .ic{color:var(--gold-hi);background:rgba(251,191,36,.1);box-shadow:inset 0 0 0 1px rgba(251,191,36,.18);}
.act.violet .ic{color:var(--violet);background:rgba(167,139,250,.12);box-shadow:inset 0 0 0 1px rgba(167,139,250,.2);}
.act .ic svg{width:19px;height:19px;}
.act b{font-size:13.5px;font-weight:650;}
.act span{font-size:11px;color:var(--ink-3);line-height:1.5;}
.act .go{position:absolute;top:15px;right:15px;color:var(--brand-hi);opacity:0;transform:translateX(-4px);transition:.2s;}
.act:hover .go{opacity:1;transform:none;}
.act .go svg{width:14px;height:14px;}

/* ---------- 表单控件 ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:8px;letter-spacing:.5px;}
.field label .req{color:var(--red);margin-left:2px;}
.input,select.input,textarea.input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
  border-radius:12px;color:var(--ink);font-size:13.5px;padding:11px 14px;font-family:inherit;transition:.2s;outline:none;}
.input:focus{border-color:rgba(94,234,212,.5);background:rgba(20,184,166,.05);box-shadow:0 0 0 3px rgba(20,184,166,.12);}
textarea.input{resize:none;line-height:1.7;}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239DB4AE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px;}
select.input option{background:#0E1B18;color:var(--ink);}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;}
.chip{padding:7px 14px;border-radius:999px;font-size:12.5px;border:1px solid var(--line);
  background:rgba(255,255,255,.03);color:var(--ink-2);cursor:pointer;transition:.2s;user-select:none;}
.chip:hover{border-color:var(--line-hi);color:var(--ink);}
.chip.on{background:rgba(20,184,166,.14);border-color:rgba(94,234,212,.5);color:var(--brand-hi);font-weight:600;}
.counter{font-size:11px;color:var(--ink-3);text-align:right;margin-top:6px;font-variant-numeric:tabular-nums;}
.counter.over{color:var(--red);}

/* ---------- 进度条 ---------- */
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2DD4BF,#0F766E);transform-origin:left;animation:fillbar 1s var(--ease) both;}
@keyframes fillbar{from{transform:scaleX(0)}}

/* ---------- 入场 + 呼吸 ---------- */
.reveal{animation:rise .7s var(--ease) both;animation-delay:var(--d,0s);}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.grow{transform-box:fill-box;transform-origin:center;animation:grow 1s var(--ease) both;animation-delay:.12s;}
@keyframes grow{from{opacity:0;transform:scale(.35)}to{opacity:1;transform:scale(1)}}
.count{display:inline-block;}
.logo{animation:logoPulse 6s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -8px 16px rgba(0,0,0,.18),0 0 0 1px rgba(94,234,212,.45),0 6px 20px rgba(20,184,166,.38)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -8px 16px rgba(0,0,0,.18),0 0 0 1px rgba(94,234,212,.7),0 6px 28px rgba(20,184,166,.6)}}

/* ---------- 步骤条（四环节流程通用） ---------- */
.stepper{display:flex;align-items:stretch;gap:0;}
.step{flex:1;position:relative;display:flex;flex-direction:column;gap:5px;padding:0 6px;}
.step .dotline{display:flex;align-items:center;}
.step .nd{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.05);color:var(--ink-3);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none;border:1px solid var(--line);}
.step.on .nd{background:linear-gradient(135deg,#2DD4BF,#0F766E);color:#04211C;border-color:transparent;
  box-shadow:0 0 0 1px rgba(94,234,212,.5),0 4px 14px rgba(20,184,166,.4);}
.step.done .nd{background:rgba(20,184,166,.16);color:var(--brand-hi);border-color:rgba(94,234,212,.4);}
.step .ln{flex:1;height:2px;background:rgba(255,255,255,.08);margin:0 6px;border-radius:2px;}
.step.done .ln,.step.on .ln{background:linear-gradient(90deg,rgba(45,212,191,.6),rgba(45,212,191,.2));}
.step:last-child .ln{display:none;}
.step b{font-size:12.5px;font-weight:600;color:var(--ink-2);}
.step.on b{color:var(--brand-hi);}
.step .cnt{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.step .cnt b{color:var(--gold-hi);font-weight:600;}

/* ---------- 通知铃铛 → 圆点变胶囊 ---------- */
.bell-wrap{position:relative;flex:none;}
.bell-pop{position:absolute;top:48px;right:0;width:280px;border-radius:16px;z-index:60;
  background:rgba(14,27,24,.96);border:1px solid rgba(94,234,212,.25);backdrop-filter:blur(20px);
  box-shadow:0 24px 60px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.06);
  transform-origin:top right;opacity:0;transform:scale(.4) translateY(-8px);pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);}
.bell-pop.open{opacity:1;transform:scale(1) translateY(0);pointer-events:auto;}
.bell-pop .bhead{display:flex;align-items:center;gap:8px;padding:14px 16px 10px;border-bottom:1px solid var(--line);}
.bell-pop .bhead .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;
  background:linear-gradient(135deg,#2DD4BF,#0F766E);color:#04211C;font-weight:700;font-size:12px;}
.bell-pop .bhead .pill i{width:6px;height:6px;border-radius:50%;background:#04211C;animation:pulse 2s infinite;}
.bell-pop .bhead .cnt{margin-left:auto;font-size:11px;color:var(--ink-3);}
.bell-pop ul{list-style:none;display:flex;flex-direction:column;padding:6px;max-height:300px;overflow-y:auto;}
.bell-pop li{display:flex;align-items:flex-start;gap:10px;padding:10px 11px;border-radius:11px;cursor:pointer;transition:.18s;}
.bell-pop li:hover{background:rgba(20,184,166,.08);}
.bell-pop li .ni{width:30px;height:30px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;
  color:var(--brand-hi);background:rgba(20,184,166,.1);box-shadow:inset 0 0 0 1px rgba(94,234,212,.14);}
.bell-pop li .ni svg{width:15px;height:15px;}
.bell-pop li b{font-size:12.5px;font-weight:600;display:block;color:var(--ink);}
.bell-pop li span{font-size:10.5px;color:var(--ink-3);}

::-webkit-scrollbar{width:0;height:0;}

/* ---------- 响应式 ---------- */
@media (max-width:1120px){ body{overflow-y:auto;} .shell{height:auto;} main{grid-template-rows:auto;} }

/* —— [伦理审查标注 v5] 输入 / 输出数据统一标注 —— */
.eth-chip{ flex:none; display:inline-flex; align-items:center; gap:3px; white-space:nowrap;
  font-size:9px; letter-spacing:.2px; line-height:1.4; padding:3px 8px; border-radius:999px;
  border:1px solid currentColor; color:inherit; opacity:.72; text-decoration:none; }
.eth-chip:active{ opacity:1; }
.eth-note{ display:flex; align-items:center; gap:6px; margin:14px 2px 2px; padding-top:10px;
  border-top:1px dashed currentColor; font-size:10px; line-height:1.6; color:inherit; opacity:.62; }
.eth-note span{ flex:1; }
.eth-note a{ flex:none; color:inherit; text-decoration:none; border-bottom:1px solid currentColor; }
.eth-tag{ display:block; margin-top:7px; text-align:right; font-size:9.5px; line-height:1.5;
  letter-spacing:.3px; color:inherit; opacity:.48; }
.eth-tag.inline{ display:inline-flex; align-items:center; flex:none; margin:0 0 0 6px; white-space:nowrap; }
.eth-chip i,.eth-note i,.eth-tag i{ font-style:normal; }