:root { color-scheme: light; font-family: "Times New Roman", "PMingLiU", "新細明體", serif; color: blue; background: #ffffcc; }
* { box-sizing: border-box; }
body { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: 70px minmax(0, 1fr); height: 100dvh; }
.title-frame { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; padding: 8px 16px; border-bottom: 3px ridge blue; overflow: auto; }
h1 { margin: 0; font-family: "DFKai-SB", "標楷體", "KaiTi", serif; color: #ff00ff; font-size: 24px; font-weight: normal; text-align: center; }
.menu-frame { border-right: 3px ridge blue; padding: 68px 10px 30px 19px; overflow: auto; }
.menu-frame > button { display: block; margin: 0 0 18px; white-space: nowrap; }
.menu-note { font-size: 12px; color: #66664b; line-height: 1.7; margin-top: 40px; }
#menu-user { font-size: 13px; margin-top: 22px; overflow-wrap: anywhere; }
.content-frame { overflow: auto; padding: 40px 30px; outline: none; }
button, input[type="submit"], input[type="button"] { color: #008585; font: 13px Arial, "新細明體", sans-serif; cursor: pointer; padding: 2px 7px; }
button:disabled { color: #777; cursor: wait; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid blue; outline-offset: 3px; }
input:not([type="file"]):not([type="checkbox"]), select, textarea { font-size: 16px; }
input[type="text"], input[type="password"] { color: #008585; max-width: 100%; padding: 3px; }
input[type="file"] { max-width: 100%; }
a { color: #0000ff; }
a:visited { color: #800080; }
h2 { font-family: "DFKai-SB", "標楷體", "KaiTi", serif; text-align: center; font-size: 24px; font-weight: normal; margin: 12px 0 28px; }
h3 { font-size: 18px; font-weight: normal; }
p { line-height: 1.8; }
.page { width: 700px; max-width: 100%; margin: 0 auto; }
.wide { width: 960px; }
.narrow { width: 340px; margin-top: 16px; }
.student-home { width: 180px; margin: 22px auto; }
.student-home p { margin: 0 0 18px; }
.student-home button { margin-bottom: 18px; }
.practice { color: #66664b; font-size: 13px; line-height: 1.7; }
.practice a { color: #555; }
.notice { border: 1px solid #aaa; padding: 12px 18px; margin: 20px 0; }
.notice strong { color: red; font-weight: normal; }
.success { color: red; }
.pending { color: #b000b0; }
.failed { color: #007575; }
.error { color: #b00000; line-height: 1.6; }
.small { font-size: 13px; }
.muted { color: #66664b; }
.black { color: #000; }
.form-row { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 10px; align-items: center; margin-bottom: 18px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0; align-items: center; }
.center { text-align: center; }
.topic-form { width: 300px; max-width: 100%; margin: 12px auto; }
.topic-form label { display: block; color: red; margin: 0 0 26px; }
.topic-form select { width: 100px; height: 194px; margin-bottom: 20px; font-size: 18px; }
.upload { margin-top: 8px; }
.upload hr { margin: 12px 0; }
.upload-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 28px 0 20px; }
.upload-line input { flex: 1; min-width: 180px; }
.upload-result { min-height: 24px; line-height: 1.8; overflow-wrap: anywhere; }
table { border: 1px outset #aaa; border-spacing: 2px; width: 100%; font-size: 15px; }
th, td { border: 1px inset #aaa; padding: 6px 8px; font-weight: normal; text-align: center; overflow-wrap: anywhere; }
.separator td { background: #bbffbb; height: 16px; padding: 0; }
.table-scroll { overflow-x: auto; }
.status-table { min-width: 620px; }
.status-table th { white-space: nowrap; }
.text-left { text-align: left; }
.toolbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.toolbar select, .toolbar input { max-width: 170px; }
.summary { text-align: center; margin: 20px 0; line-height: 1.8; }
.empty { padding: 28px 12px; }
.announcement-list { padding-left: 24px; line-height: 2; }
.announcement-list li { margin: 10px 0; }
details { margin: 22px 0; color: #555; font-size: 14px; line-height: 1.8; }
summary { cursor: pointer; }
progress { width: 220px; vertical-align: middle; }
.file-name { overflow-wrap: anywhere; }
.back-row { margin-top: 26px; }
.admin-form textarea { display: block; width: 100%; margin: 10px 0; min-height: 90px; }
@media (max-width: 700px) {
  body { grid-template-columns: 110px minmax(0, 1fr); grid-template-rows: 92px minmax(0, 1fr); }
  h1 { font-size: 20px; line-height: 1.5; }
  .menu-frame { padding: 35px 8px 20px 12px; }
  .content-frame { padding: 25px 16px; }
  h2 { font-size: 21px; line-height: 1.6; }
  .form-row { grid-template-columns: 1fr; gap: 5px; }
  .notice { padding: 10px; }
  .narrow, .student-home { max-width: 100%; }
  .topic-form { margin-top: 10px; }
}