/* ================================================================
 * profile_site.css | 教學網站樣式（不影響 Exam / FDM）
 * 僅整理程式碼排版與註解；保留原有色彩、尺寸、選擇器及呈現效果。
 * ================================================================ */

/* 適用頁面：教學網站（templates/base.html 與 11 門課程頁面），不影響 Exam/FDM；依區塊註記 CSS。 */
:root {
  /* 品牌色彩與背景 */
  --navy: #0b1f3a;
  --navy-2: #163a63;
  --blue: #2b69a6;
  --ice: #eef5fb;
  --line: #d8e3ee;
  /* 文字與輔助色 */
  --ink: #152033;
  --muted: #64748b;
  --white: #fff;
  /* 圓角與陰影 */
  --radius: 24px;
  --shadow: 0 18px 50px rgba(11,31,58,.09);
}

/* 教學網站：全域排版、Navbar、網站容器 */
* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
}

body {
  margin:0;
  color:var(--ink);
  background:#fff;
  font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,-apple-system,sans-serif;
  line-height:1.75;
}

.site-container {
  width:min(1180px,88vw);
}

a {
  text-decoration:none;
}

.site-nav {
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(216,227,238,.8);
  min-height:78px;
}

.navbar-brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--navy);
}

.brand-mark {
  width:42px;
  height:42px;
  border-radius:12px;
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-weight:800;
  letter-spacing:.05em;
}

.navbar-brand span:last-child {
  display:flex;
  flex-direction:column;
  line-height:1.1;
}

.navbar-brand small {
  font-size:.62rem;
  letter-spacing:.14em;
  color:var(--muted);
  margin-top:5px;
}

.site-nav .nav-link {
  color:#44546a;
  font-weight:700;
  font-size:.94rem;
  padding:.55rem .75rem!important;
  position:relative;
}

.site-nav .nav-link.active,.site-nav .nav-link:hover {
  color:var(--navy);
}

.site-nav .nav-link.active:after {
  content:"";
  position:absolute;
  left:.75rem;
  right:.75rem;
  bottom:.15rem;
  height:2px;
  background:var(--blue);
  border-radius:99px;
}

.navbar-toggler {
  border:0;
  box-shadow:none!important;
}

/* 教學網站：首頁 Hero、最新消息 */
.hero {
  padding:158px 0 96px;
  background:linear-gradient(135deg,#f8fbfe 0%,#fff 48%,#eaf3fb 100%);
  overflow:hidden;
}

.hero h1,.page-title h1 {
  font-weight:850;
  letter-spacing:-.045em;
  color:var(--navy);
}

.hero h1 {
  font-size:clamp(2.7rem,5vw,3.8rem);
  line-height:1.05;
  max-width:900px;
}

.hero h1 span {
  color:var(--blue);
}

.eyebrow,.section-kicker,.page-title>span {
  font-size:.74rem;
  font-weight:800;
  letter-spacing:.18em;
  color:var(--blue);
}

.lead-copy {
  font-size:1.08rem;
  color:#526176;
  max-width:760px;
  margin:1.6rem 0 2rem;
}

.hero-actions {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn-primary-custom,.btn-outline-custom {
  border-radius:999px;
  padding:.75rem 1.25rem;
  font-weight:800;
}

.btn-primary-custom {
  background:var(--navy);
  border:1px solid var(--navy);
  color:#fff;
}

.btn-primary-custom:hover {
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
}

.btn-outline-custom {
  background:#fff;
  border:1px solid #b9c9da;
  color:var(--navy);
}

.btn-outline-custom:hover {
  background:var(--ice);
  color:var(--navy);
}

.feature-panel {
  background:var(--navy);
  color:#fff;
  border-radius:28px;
  padding:34px;
  box-shadow:0 28px 70px rgba(11,31,58,.18);
  transform:rotate(1deg);
}

.feature-panel ul {
  padding-left:1.1rem;
  margin:1rem 0 0;
}

.feature-panel li {
  margin:.55rem 0;
  color:#dce8f5;
}

.mini-label {
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.15em;
  color:#8ab4da;
}

.section-block {
  padding:86px 0;
}

.compact-top {
  padding-top:70px;
}

.section-muted {
  background:#f6f9fc;
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:28px;
  margin-bottom:36px;
}

.section-heading h2,.about-main h2,.research-main h2,.contact-info h2 {
  font-size:clamp(2rem,3.5vw,3.2rem);
  font-weight:850;
  color:var(--navy);
  letter-spacing:-.03em;
  margin:.35rem 0 0;
}

.section-heading>p {
  max-width:520px;
  color:var(--muted);
  margin:0
}

.news-grid {
  display:grid;
  gap:16px;
}

.news-card {
  display:grid;
  grid-template-columns:74px 1fr auto;
  align-items:center;
  gap:20px;
  border-top:1px solid var(--line);
  padding:24px 10px;
  color:inherit;
  transition:.25s;
}

.news-card:last-child {
  border-bottom:1px solid var(--line);
}

.news-card:hover {
  padding-left:22px;
  background:#f9fbfd;
}

.news-no {
  font-size:1.7rem;
  font-weight:850;
  color:#a3b8ca;
}

.news-card small,.tool-card small,.path-content small {
  font-size:.68rem;
  letter-spacing:.15em;
  font-weight:800;
  color:var(--blue);
}

.news-card h3 {
  font-size:1.35rem;
  font-weight:800;
  color:var(--navy);
  margin:.2rem 0;
}

.news-card p {
  margin:0;
  color:var(--muted);
}

.news-card b {
  font-size:1.6rem;
  color:var(--blue);
}

/* 教學網站：課程與關於等內頁 Hero */
.page-hero {
  padding:145px 0 62px;
  position:relative;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.page-hero:after {
  content:"";
  position:absolute;
  right:-8vw;
  top:60px;
  width:340px;
  height:340px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(43,105,166,.14),rgba(43,105,166,0) 68%);
}

.page-hero-about {
  background:#fbfdff;
}

.page-hero-adobe {
  background:linear-gradient(120deg,#f7faff,#eef5fb);
}

.page-hero-textile {
  background:linear-gradient(120deg,#f7fbfa,#edf7f4);
}

.page-hero-thesis {
  background:linear-gradient(120deg,#fbf9ff,#f2f0fa);
}

.page-hero-contact {
  background:linear-gradient(120deg,#fbfcfe,#f1f5f9);
}

.page-title {
  max-width:780px;
  position:relative;
  z-index:1
}

.page-title h1 {
  font-size:clamp(2rem,3.5vw,3.8rem);
  margin:.4rem 0 .7rem;
}

.page-title p {
  font-size:1.08rem;
  color:var(--muted);
  max-width:700px;
}

/* 教學網站：關於我區塊 */
.about-layout {
  display:grid;
  grid-template-columns:minmax(260px,390px) 1fr;
  gap:70px;
  align-items:center;
}

.portrait-wrap {
  position:relative;
}

.portrait-wrap img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  border-radius:32px;
  box-shadow:var(--shadow);
  background:#eef2f6;
}

.portrait-caption {
  position:absolute;
  right:-18px;
  bottom:28px;
  background:var(--navy);
  color:#fff;
  padding:12px 18px;
  border-radius:14px;
  font-weight:800;
  box-shadow:var(--shadow);
}

.about-main h2 small {
  display:block;
  font-size:1.05rem;
  color:var(--muted);
  font-weight:600;
  letter-spacing:0;
  margin-top:.5rem;
}

.contact-pills {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 34px;
}

.contact-pills span {
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:999px;
  font-size:.92rem;
}

.contact-pills b {
  color:var(--navy);
  margin-right:7px;
}

.info-grid {
  display:grid;
  grid-template-columns:1.3fr .9fr;
  gap:18px;
}

.info-grid article {
  background:#f7fafc;
  border:1px solid var(--line);
  border-radius:22px;
  padding:24px;
}

.info-grid article>span {
  font-weight:850;
  color:#9bb3c8;
}

.info-grid h3 {
  font-size:1.05rem;
  color:var(--navy);
  font-weight:800;
  margin:.4rem 0 1rem;
}

.info-grid ul {
  margin:0;
  padding-left:1.1rem;
}

.info-grid p {
  margin:0;
  color:#526176;
}

/* 教學網站：電腦相關／Office 教學卡片 */
.tool-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  align-items:stretch;
}

.tool-card {
  border:1px solid var(--line);
  border-radius:26px;
  padding:30px;
  background:#fff;
  min-height:330px;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 32px rgba(11,31,58,.04);
  transition:.25s;
}

.tool-card:hover {
  transform:translateY(-7px);
  box-shadow:var(--shadow);
}

.tool-card.featured {
  background:var(--navy);
  color:#dbe7f3;
  transform:translateY(-16px);
}

.tool-card.featured h2 {
  color:#fff;
}

.tool-letter {
  width:58px;
  height:58px;
  border-radius:15px;
  background:var(--ice);
  color:var(--navy);
  display:grid;
  place-items:center;
  font-weight:900;
  font-size:1.25rem;
  margin-bottom:52px;
}

.featured .tool-letter {
  background:#fff;
  color:var(--navy);
}

.tool-card h2 {
  color:var(--navy);
  font-size:1.7rem;
  font-weight:850;
}

.tool-card p {
  margin-top:auto;
  color:#5f6f82;
}

.featured p {
  color:#dbe7f3;
}

.office-strip {
  display:grid;
  gap:14px;
}

.office-strip article {
  display:grid;
  grid-template-columns:64px 1fr;
  gap:20px;
  align-items:start;
  background:#fff;
  border:1px solid var(--line);
  padding:22px;
  border-radius:18px;
}

.office-strip article>b {
  width:54px;
  height:54px;
  border-radius:14px;
  background:var(--navy);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:1.35rem;
}

.office-strip h3 {
  font-size:1rem;
  font-weight:850;
  color:var(--navy);
  margin:0 0 .25rem;
}

.office-strip p {
  margin:0;
  color:var(--muted);
}

/* 教學網站：織品課程路徑 */
.textile-path {
  max-width:930px;
  margin:auto;
  position:relative;
}

.path-line {
  position:absolute;
  left:38px;
  top:40px;
  bottom:40px;
  width:1px;
  background:#bfd3c9;
}

.path-item {
  display:grid;
  grid-template-columns:78px 1fr;
  gap:28px;
  position:relative;
  margin:0 0 22px;
}

.path-index {
  width:78px;
  height:78px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid #bfd3c9;
  color:#2d6653;
  font-weight:850;
  z-index:1
}

.path-content {
  border:1px solid #d7e6df;
  border-radius:24px;
  padding:28px 32px;
  background:#fbfefd;
}

.path-content small {
  color:#39705d;
}

.path-content h2 {
  font-weight:850;
  color:#193c31;
  font-size:1.6rem;
  margin:.3rem 0 .7rem;
}

.path-content p {
  margin:0;
  color:#61736c;
}

/* 教學網站：論文寫作區塊 */
.research-layout {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:50px;
  align-items:start;
}

.research-steps {
  list-style:none;
  padding:0;
  margin:28px 0 0;
  border-top:1px solid var(--line);
}

.research-steps li {
  display:grid;
  grid-template-columns:60px 1fr;
  gap:18px;
  padding:18px 0;
  border-bottom:1px solid var(--line);
  align-items:center;
}

.research-steps b {
  color:#8f9fb5;
  font-size:1.2rem;
}

.research-steps span {
  font-weight:750;
  color:var(--navy);
}

.research-aside {
  background:var(--navy);
  color:#dce6f1;
  border-radius:28px;
  padding:34px;
  position:sticky;
  top:105px;
}

.research-aside h3 {
  color:#fff;
  font-size:1.8rem;
  font-weight:850;
  margin:.7rem 0 1rem;
}

.research-aside p {
  margin:0
}

.quote-line {
  margin-top:30px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.2);
  font-family:Georgia,serif;
  font-style:italic;
  color:#fff;
}

/* 教學網站：聯絡表單 */
.contact-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:50px;
  align-items:start;
}

.contact-info {
  padding:20px 0;
}

.contact-info>p {
  color:var(--muted);
  max-width:420px;
}

.contact-list {
  margin-top:35px;
  display:grid;
  gap:12px;
}

.contact-list div {
  padding:16px 0;
  border-top:1px solid var(--line);
}

.contact-list small {
  display:block;
  font-size:.66rem;
  letter-spacing:.15em;
  color:var(--muted);
  font-weight:800;
}

.contact-list b {
  color:var(--navy);
}

.contact-form {
  background:#f7fafc;
  border:1px solid var(--line);
  border-radius:28px;
  padding:32px;
}

.form-label {
  font-weight:800;
  color:var(--navy);
  font-size:.9rem;
}

.form-control {
  border:1px solid #ccd8e4;
  border-radius:12px;
  padding:.75rem .9rem;
  background:#fff;
}

.form-control:focus {
  border-color:#7ca5ca;
  box-shadow:0 0 0 .2rem rgba(43,105,166,.1);
}

.form-success {
  display:none;
  color:#2d6a4f;
  font-weight:700;
  font-size:.9rem;
}

.form-success.show {
  display:inline;
}

/* 教學網站：頁尾、動畫、響應式排版 */
.site-footer {
  border-top:1px solid var(--line);
  padding:26px 0;
  color:#718096;
  font-size:.82rem;
  background:#fbfcfe;
}

.reveal {
  opacity:0;
  transform:translateY(16px);
  transition:opacity .65s ease,transform .65s ease;
}

.reveal.visible {
  opacity:1;
  transform:none;
}

.pulse-panel {
  animation:pulsePanel .8s ease;
}

@keyframes pulsePanel {
  0% {
    transform:rotate(1deg) scale(1);
  }
  50% {
    transform:rotate(0) scale(1.025);
  }
  100% {
    transform:rotate(1deg) scale(1);
  }
}

@media(max-width:991.98px) {
  .site-container {
    width:min(92vw,760px);
  }
  .site-nav .navbar-collapse {
    padding:12px 0 18px;
  }
  .site-nav .nav-link.active:after {
    display:none;
  }
  .hero {
    padding:128px 0 72px;
  }
  .section-block {
    padding:64px 0;
  }
  .section-heading {
    display:block;
  }
  .section-heading>p {
    margin-top:12px;
  }
  .about-layout,.research-layout,.contact-layout {
    grid-template-columns:1fr;
    gap:34px;
  }
  .portrait-wrap {
    max-width:430px;
    margin:auto;
  }
  .tool-grid {
    grid-template-columns:1fr;
  }
  .tool-card.featured {
    transform:none;
  }
  .research-aside {
    position:static;
  }
  .info-grid {
    grid-template-columns:1fr;
  }
  .page-hero {
    padding:122px 0 48px;
  }
}

@media(max-width:575.98px) {
  .site-container {
    width:91vw;
  }
  .hero h1 {
    font-size:2.55rem;
  }
  .page-title h1 {
    font-size:2rem;
  }
  .news-card {
    grid-template-columns:48px 1fr;
  }
  .news-card>b {
    display:none;
  }
  .path-item {
    grid-template-columns:54px 1fr;
    gap:16px;
  }
  .path-index {
    width:54px;
    height:54px;
  }
  .path-line {
    left:27px;
  }
  .path-content {
    padding:22px;
  }
  .contact-form {
    padding:22px;
  }
  .portrait-caption {
    right:10px;
  }
  .brand-mark {
    width:38px;
    height:38px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important;
  }
  .reveal {
    opacity:1;
    transform:none;
  }
}

/* 教學網站：Flask 系統專區 Navbar 與訊息 */
/* Flask platform integration */
.site-nav .system-link {
  color:var(--navy);
  border:1px solid var(--line);
  border-radius:999px;
  margin-left:.35rem;
  padding:.48rem .8rem!important;
  background:#fff;
}

.site-nav .system-link:hover {
  background:var(--ice);
}

.site-nav .login-pill {
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  border-radius:999px;
  background:var(--navy);
  color:#fff!important;
  padding:.5rem .85rem!important;
  margin-left:.4rem;
}

.site-nav .login-pill:hover {
  background:var(--blue);
}

.site-nav .dropdown-menu {
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:.5rem;
  min-width:230px;
}

.site-nav .dropdown-item {
  border-radius:10px;
  padding:.58rem .7rem;
  font-weight:650;
  color:#3f4f63;
}

.site-nav .dropdown-item:hover {
  background:var(--ice);
  color:var(--navy);
}

.flash-zone {
  position:fixed;
  z-index:1080;
  top:86px;
  left:0;
  right:0;
  pointer-events:none;
}

.flash-zone .alert {
  pointer-events:auto;
  border-radius:14px;
  box-shadow:0 12px 35px rgba(11,31,58,.12);
}

.contact-form .btn-primary-custom {
  cursor:pointer;
}

.contact-form .form-text {
  color:var(--muted);
}

@media(max-width:1199.98px) {
  .site-nav .nav-link {
    font-size:.88rem;
    padding:.48rem .52rem!important;
  }
  .site-nav .system-link,.site-nav .login-pill {
    margin-left:0;
    margin-top:.35rem;
    width:max-content;
  }
}

/* 教學網站：課程選單與 16 週進度表 */
/* 2026-09-14 course navigation + 16-week teaching pages */
.site-nav .course-nav-menu {
  min-width:285px;
}

.site-nav .dropdown-header {
  font-size:.67rem;
  letter-spacing:.15em;
  font-weight:850;
  color:#7a8ca2;
  padding:.5rem .7rem .25rem;
}

.site-nav .dropdown-item.active {
  background:var(--navy);
  color:#fff;
}

.site-nav .dropdown-item.active:hover {
  background:var(--navy);
  color:#fff;
}

.course-intro-block {
  padding-bottom:54px;
}

.course-intro-grid {
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:42px;
  align-items:start;
}

.course-copy h2 {
  font-size:clamp(2rem,3.4vw,3.15rem);
  font-weight:850;
  color:var(--navy);
  letter-spacing:-.03em;
  margin:.35rem 0 1rem;
}

.course-copy p {
  font-size:1.05rem;
  color:var(--muted);
  max-width:760px;
  margin:0
}

.course-meta {
  border:1px solid var(--line);
  border-radius:24px;
  background:#f8fbfe;
  padding:6px 26px;
}

.course-meta>div {
  padding:20px 0;
  border-bottom:1px solid var(--line);
}

.course-meta>div:last-child {
  border-bottom:0
}

.course-meta small {
  display:block;
  color:var(--muted);
  font-size:.7rem;
  font-weight:800;
  letter-spacing:.12em;
  margin-bottom:5px;
}

.course-meta strong {
  display:block;
  color:var(--navy);
  font-size:.98rem;
}

.course-focus-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:32px;
}

.course-focus-card {
  border:1px solid var(--line);
  border-radius:20px;
  padding:22px;
  background:#fff;
}

.course-focus-card span {
  font-size:.72rem;
  font-weight:900;
  color:#9aafc2;
}

.course-focus-card h3 {
  font-size:1.04rem;
  font-weight:850;
  color:var(--navy);
  margin:.45rem 0 0;
}

.course-table-wrap {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 12px 32px rgba(11,31,58,.04);
}

.course-table {
  width:100%;
  border-collapse:collapse;
  min-width:920px;
}

.course-table th {
  background:var(--navy);
  color:#fff;
  text-align:left;
  padding:15px 18px;
  font-size:.78rem;
  letter-spacing:.06em;
}

.course-table th:first-child {
  width:74px;
}

.course-table td {
  padding:16px 18px;
  border-bottom:1px solid #e5edf4;
  vertical-align:top;
  color:#56667a;
}

.course-table tbody tr:last-child td {
  border-bottom:0
}

.course-table tbody tr:hover {
  background:#f8fbfe;
}

.course-table td:first-child b {
  display:inline-grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  background:var(--ice);
  color:var(--navy);
}

.course-table td strong {
  color:var(--navy);
}

@media(max-width:991.98px) {
  .course-intro-grid {
    grid-template-columns:1fr;
  }
  .course-focus-grid {
    grid-template-columns:1fr;
  }
  .site-nav .course-nav-menu {
    min-width:100%;
  }
}

/* 教學網站：資料庫課程進度與教材連結 */
/* 2026-09-15 database-backed course progress: "current week" banner + row highlight */
.progress-banner {
  display:flex;
  align-items:center;
  gap:10px;
  border-radius:16px;
  padding:14px 20px;
  margin-bottom:20px;
  font-weight:700;
  font-size:.95rem;
}

.progress-banner i {
  font-size:1.05rem;
}

.progress-banner.is-active {
  background:#eaf6ee;
  color:#1f6b3f;
  border:1px solid #bfe4cc;
}

.progress-banner.is-upcoming {
  background:var(--ice);
  color:var(--blue);
  border:1px solid #c9ddef;
}

.progress-banner.is-finished {
  background:#f1f3f5;
  color:#556070;
  border:1px solid #dde2e7;
}

.course-table tbody tr.is-current-week {
  background:#fff8e6;
  box-shadow:inset 3px 0 0 #e0a800;
}

.course-table tbody tr.is-current-week:hover {
  background:#fff3d6;
}

.course-table tbody tr.is-current-week td:first-child b {
  background:#e0a800;
  color:#fff;
}

.course-resource-cell {
  display:flex;
  flex-direction:column;
  gap:6px;
}

.course-resource-cell a {
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:.85rem;
  font-weight:700;
  color:var(--blue);
}

.course-resource-cell a:hover {
  color:var(--navy);
  text-decoration:underline;
}

/* 教學網站 Navbar：系統專區「安全登出」紅色 */
/* edo_06: 教學網站系統專區安全登出，與參考圖一致的紅色。 */
.site-nav .dropdown-menu .dropdown-item.logout-action, .site-nav .dropdown-menu .dropdown-item.logout-action i  {
  color: #dc3545 !important;
  font-weight: 700;
}

.site-nav .dropdown-menu .dropdown-item.logout-action:hover, .site-nav .dropdown-menu .dropdown-item.logout-action:focus-visible  {
  color: #b42332 !important;
  background-color: #fff1f2;
}

.site-nav .dropdown-menu .dropdown-item.logout-action:hover i, .site-nav .dropdown-menu .dropdown-item.logout-action:focus-visible i  {
  color: #b42332 !important;
}

/* 適用頁面：教學網站 Navbar；分離「系統專區」與使用者帳號選單。 */
.site-nav .account-link {
  border:1px solid var(--line);
  border-radius:999px;
  margin-left:.35rem;
  padding:.48rem .8rem!important;
  background:#fff;
  white-space:nowrap;
}

.site-nav .account-link:hover {
  background:var(--ice);
}

.site-nav .account-link .badge {
  font-size:.68rem;
  vertical-align:middle;
  margin-left:.2rem;
}

@media(max-width:1199.98px) {
  .site-nav .account-link {
    margin-left:0;
    margin-top:.35rem;
    width:max-content;
  }
}

/* ================================================================
 * edo_12｜教學網站共用 Navbar（templates/base.html）
 * 品牌在左、五個公開導覽項目水平置中、帳號／系統選單在右。
 * 小螢幕採 Bootstrap 收合選單，不使用桌面三欄排列。
 * ================================================================ */
.site-nav .brand-mark {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  font-size: .92rem;
  letter-spacing: 0;
  text-transform: none;
}

.site-nav .navbar-brand strong {
  font-size: 1.05rem;
  white-space: nowrap;
}

/* 兩組導航：公開項目（中間）及登入後功能（右側）。 */
.site-nav .primary-nav,
.site-nav .utility-nav {
  gap: 0;
}

@media (min-width: 1200px) {
  .site-nav .site-container {
    width: min(1600px, 96vw);
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: .7rem;
  }

  /* 僅桌機展開後將 collapse 的兩組清單放入三欄網格。 */
  .site-nav #mainNav.navbar-collapse {
    display: contents !important;
  }

  .site-nav .navbar-brand {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
    margin-right: 0;
  }

  .site-nav .primary-nav {
    grid-column: 2;
    justify-self: center;
    white-space: nowrap;
  }

  .site-nav .utility-nav {
    grid-column: 3;
    justify-self: end;
    white-space: nowrap;
  }

  .site-nav .primary-nav .nav-link {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
  }
}

@media (max-width: 1199.98px) {
  .site-nav .navbar-brand strong {
    font-size: 1rem;
  }

  .site-nav .primary-nav,
  .site-nav .utility-nav {
    align-items: stretch !important;
  }

  .site-nav .utility-nav {
    border-top: 1px solid var(--line);
    margin-top: .6rem;
    padding-top: .6rem;
  }
}