:root{
  --page-w: 1180px;
  --text: #000;
  --muted: #222;
  --line: #d0d0d0;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family: Calibri, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  color: var(--text);
  background:#fff;
}

.wrap{max-width:var(--page-w);margin:0 auto;padding:0 18px;}

.wrap p.foot {text-align: center;}

.page-header{
  padding:18px 0 8px;
  border-bottom:1px solid var(--line);
}
.page-header h1{margin:0;font-size:28px;text-align: center;}
.page-header .sub{margin:6px 0 0;color:var(--muted);font-size:14px; text-align: justify;}

.track{margin:18px 0 26px;}
.track-title{
  margin:0 0 10px;
  font-size:18px;
  font-weight:700;
  color:  var(--accent);
}

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:26px;
}

.block-title{
  text-align: center;
  margin:0 0 10px;
  font-size:16px;
  font-weight:700;
}

.activities{display:flex;flex-direction:column;gap:10px;}

.activity{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:12px;
  align-items:stretch;
}

.code{
  background: var(--accent);
  color:#fff;
  font-weight:800;
  font-size:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
}

.body{
  padding:2px 0;
  border-bottom:1px solid var(--line);
}

.topline{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
}

.title{
  margin:0;
  font-size:15px;
  color: var(--accent);
  font-weight:700;
}

.lecturer{
  margin:0;
  font-size:13px;
  color: var(--accent);
  text-align:right;
  //min-width: 210px;
  width: 30%;
}

.k{font-weight:700;}

.facts{
  margin:6px 0 0;
  font-size:13px;
  display:grid;
  gap:2px;
}
.facts div{display:grid;grid-template-columns:150px 1fr;gap:10px;}
.facts dt{margin:0;font-weight:700;}
.facts dd{margin:0;}

.annotation{
  margin:6px 0 10px;
  font-size:13px;
  text-align: justify;
}

.page-footer{
  border-top:1px solid var(--line);
  padding:10px 0 18px;
  color:#333;
}

@media (max-width: 980px){
  .two-col{grid-template-columns:1fr;}
  .lecturer{min-width:unset;text-align:left;}
}

@media print{
  body{background:#fff;}
  .page-header,.page-footer{border-color:#aaa;}
  .two-col{gap:18px;}
  .body{border-bottom:1px solid #bbb;}
}


.countdown {
  margin: 10px 0 16px;
  font-size: 20px;
  font-weight: 700;
  color: #F00;
  display: block;
  width: 100%;
  text-align: center;
}

td	{vertical-align: top;}




/* Header: two columns that wrap like your cards */
.header-row{
  display: flex;
  flex-wrap: wrap;          /* allow wrapping when too narrow */
  gap: 18px;                /* space between columns */
  align-items: flex-start;  /* top-align */
  justify-content: center
}

/* Left column (logo) */
.header-logo{
  display: inline-block;
  width: 25%;
  min-width: 100px;
  max-width: 360px;
}

/* Right column (text) */
.header-text{
  display: inline-block;
  width: 70%;
  min-width: 100px;
}

}
.sd-logo{
  display: inline-block;
  width: 100%;
  height: auto;
}


@media (orientation: portrait) {
  .header-logo{width: 100%;}
  .header-text{width: 100%;}
}






.back-to-top{
  position: fixed;        /* stays in place while scrolling */ /* 【1-c96032】 */
  left: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 44px;
  height: 44px;
  border: none;
  border-radius: 999px;

  background: rgba(0,0,0,0.75);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 6px 16px rgba(0,0,0,0.18);
  transition: transform .15s ease, opacity .2s ease, background-color .2s ease;

  /* hidden by default, JS will toggle */
  opacity: 1;
  transform: translateY(8px);
}

.back-to-top:hover{
  background: rgba(0,0,0,0.85);
  transform: translateY(0);
}

.back-to-top:active{
  transform: translateY(0) scale(0.96);
}

.back-to-top:focus-visible{
  outline: 3px solid #000;
  outline-offset: 3px;
  background: rgba(0,0,0,0.9);
}

/* visible state */
.back-to-top.is-visible{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Optional: slightly larger touch target on small screens */
@media (max-width: 600px){
  .back-to-top{
    width: 52px;
    height: 52px;
    font-size: 24px;
    left: 14px;
    bottom: 14px;
  }
}


li {font-size: 14px;}