/* ==========================================================================
   smartprix theme · base.css
   reset + 排版 + 页面骨架栅格（来源：us.smartprix.com index.3b4ef80b.css 首段）
   依赖 tokens.css
   ========================================================================== */

/* ---------- reset ---------- */
*{margin:0;padding:0;box-sizing:border-box}
table{border-collapse:collapse;width:100%}
ul,ol{list-style:none}
button{background:transparent;border:0;font:inherit;color:inherit}
img,svg,video,iframe{max-width:100%}
img{border:0}
[hidden]{display:none!important}

html,body{
  font-family:var(--sp-font-stack);
  font-size:var(--font-size);
  line-height:1.5;
  color:var(--color-text);
  background:var(--bg-body);
  height:100%;
  scrollbar-gutter:stable;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}

/* ---------- 页面骨架 ---------- */
#app{display:flex;flex-direction:column;min-height:100%;position:relative}
main{position:relative;flex:1;display:flex;flex-direction:column;width:100%;max-width:var(--main-width);margin:0 auto}

/* ---------- 链接 ---------- */
a{text-decoration:none;color:var(--color-link);cursor:pointer}
a:hover{color:var(--color-link-hover)}
a.disabled,*[role=button].disabled{opacity:.55;cursor:default;pointer-events:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--color-primary);outline-offset:1px}

/* ---------- 标题 ---------- */
h1{font-size:1.5715rem;line-height:1.4;font-weight:500;color:var(--color-text-dark)}
/* 原站不定义全局 h2–h6：标题尺寸一律由 .sm-box-header h2 / .sm-box>h3 / .sm-content h* 指定 */
main>h1,main>.h1{padding:12px 12px 10px;position:relative;display:flex;align-items:center;overflow:hidden}
main>h1+small,main>.h1+small{padding:0 12px 10px;margin-top:-8px;display:block;color:#777;font-size:12px}
h1>small{font-size:.9286rem;position:relative;top:-1px;color:var(--color-text-light);margin:0 2px}

/* ---------- 富文本 .sm-content ---------- */
.sm-content{font-size:1.0001rem;line-height:1.5;color:var(--color-text)}
.sm-content>*+*{margin-top:9px}
.sm-content h2,.sm-content h3,.sm-content h4{font-weight:600;line-height:1.3333;margin:26px 0 9px}
.sm-content h2{font-size:1.3571em}
.sm-content h3{font-size:1.1423em}
.sm-content h4{font-size:1em}
.sm-content p{margin-bottom:9px}
.sm-content strong,.sm-content b{font-weight:600}
.sm-content ul,.sm-content ol{margin:0 0 9px 20px}
.sm-content ul{list-style:disc}
.sm-content ol{list-style:decimal}
.sm-content li{margin-bottom:4px}
.sm-content a{color:var(--color-link)}
.sm-content a:hover{color:var(--color-link-hover);text-decoration:underline}
.sm-content blockquote{background:var(--sp-blockquote-bg);border-left:4px solid var(--sp-blockquote-border);padding:8px 12px;margin:0 0 9px}
.sm-content hr{border:0;border-top:1px solid var(--color-border);margin:16px 0}
.sm-content code,.sm-content pre{font-family:var(--sp-font-mono);font-size:.9286rem}
.sm-content code{background:var(--sp-blockquote-bg);border-radius:var(--sp-radius-sm);padding:1px 4px}
.sm-content pre{background:var(--sp-blockquote-bg);border-radius:var(--sp-radius);padding:10px 12px;overflow:auto}
.sm-content pre code{background:none;padding:0}
.sm-content img{height:auto}
.sm-content figure{margin:0 0 9px}
.sm-content figcaption{font-size:.8572rem;color:var(--color-text-light);margin-top:4px}

/* ---------- 表格（富文本） ---------- */
.sm-content table{font-size:inherit;width:100%;color:inherit;margin-bottom:9px}
.sm-content .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:9px}
.sm-content .table-scroll>table{margin-bottom:0}
.sm-content caption{margin-bottom:8px;font-weight:700}
.sm-content th,.sm-content td{padding:8px 10px;border-bottom:1px solid var(--sp-table-line);text-align:left}
.sm-content th{border-bottom:2px solid var(--sp-table-line);border-top:2px solid var(--sp-table-line);font-weight:700}
.sm-content table>tbody>tr:nth-of-type(odd){background-color:var(--sp-table-zebra)}

/* ---------- 表单默认 ---------- */
input,select,textarea,button{font-family:inherit;font-size:inherit}

/* ---------- 断点：移动 ---------- */
@media (max-width:750px){
  aside{margin-top:6px;display:none}
  .sm-content img,.sm-content video{width:100%}
}

/* ---------- 断点：桌面 ---------- */
@media (min-width:750px){
  main{padding:var(--mv) 10px}
  h1{font-size:28px;line-height:1.25}
  .aside-320{--aside-w:var(--sp-aside-320);display:grid;grid-template-columns:1fr var(--aside-w);grid-gap:var(--mv)}
  .aside-360{--aside-w:var(--sp-aside-360);display:grid;grid-template-columns:1fr var(--aside-w);grid-gap:var(--mv)}
  .aside-320>*,.aside-360>*{min-width:0}
  .aside-left{grid-template-columns:var(--aside-w) 1fr;grid-template-areas:"aside rest"}
  .aside-left>*{grid-area:rest}
  .aside-left>aside{grid-area:aside}
  .aside-sticky>aside{position:sticky;top:calc(var(--top-fixed,0px) - 4px);height:100vh;background:var(--sp-aside-gradient);box-shadow:var(--sp-shadow-card);border:1px solid var(--sp-card-border);padding:8px;overflow:hidden;z-index:var(--z-aside);border-radius:var(--sp-radius)}
}
@media (min-width:750px) and (max-width:1124px){
  .aside-320{--aside-w:25%}
  .aside-360,.aside-320.aside-imp{--aside-w:30%}
}
@media (min-width:750px) and (max-width:960px){
  h1{font-size:24px}
  .aside-360:not(.aside-imp),.aside-320:not(.aside-imp){grid-template-columns:1fr;grid-gap:0}
  .aside-360:not(.aside-imp) aside,.aside-320:not(.aside-imp) aside{display:none}
  /* 原站特异性：必须压过上面的 `.aside-320:not(.aside-imp) aside{display:none}` */
  .aside-360.aside-small-below,.aside-320.aside-small-below{grid-template-areas:"rest" "aside"}
  .aside-360.aside-small-below aside,.aside-320.aside-small-below aside{display:block;columns:2;margin-top:12px;column-gap:10px}
  .aside-360.aside-small-below aside>*,.aside-320.aside-small-below aside>*{break-inside:avoid}
}

/* ---------- 首屏淡入（原站 @keyframes sminit 覆盖） ---------- */
@keyframes sminit{0%{opacity:0}100%{opacity:1}}
@keyframes shake{
  0%{transform:translate(0,0) rotate(0)}
  10%{transform:translate(-1px,-1px) rotate(-2deg)}
  20%{transform:translate(1px,-1px) rotate(2deg)}
  30%{transform:translate(-1px,1px) rotate(-2deg)}
  40%{transform:translate(1px,1px) rotate(2deg)}
  50%{transform:translate(-1px,-1px) rotate(-1deg)}
  60%{transform:translate(1px,-1px) rotate(1deg)}
  70%{transform:translate(-1px,1px) rotate(-1deg)}
  80%{transform:translate(1px,1px) rotate(1deg)}
  90%{transform:translate(-1px,-1px) rotate(0)}
  100%{transform:translate(0,0) rotate(0)}
}
@keyframes fadein{0%{opacity:0}100%{opacity:1}}