/* 与小郎工具站 tools.html 设计系统一致（班级管理套件外壳） */
@import url("./jx-gradient-ui.css");
:root{
  --primary-500:#16a34a;
  --primary-600:#15803d;
  --primary-700:#166534;
  --primary-400:#4ade80;
  --gray-950:#1a1a1a;
  --gray-900:#2a2a2a;
  --gray-700:#525252;
  --gray-500:#737373;
  --gray-200:#e5e5e5;
  --gray-100:#f5f5f4;
  --bg-page:#ecfdf5;
  --bg-elevated:rgba(255,255,255,.9);
  --text-primary:var(--gray-950);
  --text-secondary:var(--gray-700);
  --text-tertiary:var(--gray-500);
  --border-hairline:rgba(22,101,52,.09);
  --r-md:12px;
  --r-lg:16px;
  --s-1:8px;
  --s-2:16px;
  --s-3:24px;
  --shadow-1:0 1px 2px rgba(0,0,0,.04);
  --shadow-2:0 1px 2px rgba(0,0,0,.05),0 6px 20px rgba(22,101,52,.07);
  --ease-product:cubic-bezier(.25,.1,.25,1);
  --dur-fast:220ms;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--font);
  color:var(--text-primary);
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%,rgba(134,239,172,.35),transparent 55%),
    var(--bg-page);
  line-height:1.6;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
.nav{
  flex-shrink:0;
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  background:rgba(240,253,244,.82);
  border-bottom:1px solid rgba(22,101,52,.1);
}
.nav-inner{
  max-width:1480px;margin:0 auto;
  padding:var(--s-2) clamp(12px,3vw,40px);
  display:flex;align-items:center;justify-content:flex-start;gap:var(--s-2);flex-wrap:wrap;
}
.logo{display:flex;align-items:center;font-weight:700;letter-spacing:.08em;font-size:clamp(17px,1.9vw,20px);color:var(--gray-900)}
.logo .site-name{color:var(--primary-700)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .logo .site-name{
    background:linear-gradient(120deg,var(--primary-700) 0%,var(--primary-600) 50%,#0f766e 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
}
.nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* 返回链接等使用 jx-gradient-ui.css 的 .jx-btn--ghost */
.shell-main{flex:1;display:flex;flex-direction:column;min-height:0;padding:0 clamp(12px,3vw,40px) var(--s-2)}
.shell-head{
  max-width:1480px;width:100%;margin:0 auto;padding:var(--s-2) 0 var(--s-1);
}
.shell-title{margin:0;font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--gray-900)}
.shell-sub{margin:6px 0 0;font-size:13px;color:var(--text-secondary);max-width:52em}
.shell-banner{
  max-width:1480px;width:100%;margin:0 auto var(--s-2);
  padding:10px 14px;border-radius:var(--r-lg);
  font-size:13px;line-height:1.55;color:var(--text-secondary);
  background:rgba(255,255,255,.88);
  border:1px solid var(--border-hairline);
  box-shadow:var(--shadow-1);
}
.shell-banner strong{color:var(--primary-700);font-weight:600}
.frame-wrap{
  flex:1;min-height:320px;max-width:1480px;width:100%;margin:0 auto;
  border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(22,101,52,.12);
  box-shadow:var(--shadow-2);
  background:var(--bg-elevated);
}
.frame-wrap iframe{
  display:block;width:100%;height:min(78vh,820px);border:0;
}
/* 原生融入：与工具站同页渲染，无 iframe 窗口感 */
.native-panel{
  flex:1;max-width:1480px;width:100%;margin:0 auto;
  padding:var(--s-2) 0 calc(var(--s-3) + 8px);
  background:transparent;
  border:none;box-shadow:none;border-radius:0;
  min-height:0;
}