:root{
  --font-title:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-body:"Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --accent-blue:#60a5fa;
  --bg:#0b0f17;
  --text:#e6eefc;
  --muted:#a6b3c9;
  --line:#22304a;
  --accent:#fb923c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{font-family: var(--font-body);margin:0;padding:0}
body{
  font-family: 'Nunito', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: radial-gradient(1000px 600px at 20% 0%, rgba(251,146,60,.16), transparent 60%),
              radial-gradient(900px 500px at 80% 10%, rgba(139,92,246,.14), transparent 55%),
              var(--bg);
  color: var(--text);
  line-height:1.6;
}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}

.layout{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{overflow-y:auto;
  position:sticky;top:0;height:100vh;
  padding:18px 16px;
  border-right:1px solid rgba(34,48,74,.7);
  background: rgba(11,15,23,.55);
  backdrop-filter: blur(10px);
}
.brand{
  display:flex;flex-direction:column;gap:6px;
  padding:10px 12px;border:1px solid rgba(34,48,74,.8);
  border-radius:18px;background: rgba(16,24,39,.55);
  margin-bottom:14px;
}
.brand .name{font-weight:750;font-size:16px}
.brand .role{color:var(--muted);font-size:13px}
.nav{display:flex;flex-direction:column;gap:6px;margin:10px 0 16px}
.nav a{padding:10px 12px;border-radius:14px;color:var(--muted)}
.nav a:hover{background: rgba(16,24,39,.6);text-decoration:none;color:var(--text)}
.nav a.active{background: rgba(251,146,60,.14);color:var(--text);border:1px solid rgba(251,146,60,.25)}
/* Side nav structure: desktop shows list; mobile.css turns it into a dropdown button. */
.nav .nav-menu-btn{display:none}
.nav .nav-list{display:flex;flex-direction:column;gap:6px}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:14px;border:1px solid rgba(34,48,74,.8);
  background: rgba(16,24,39,.6);
  color: var(--text);font-size:14px;
}
.btn:hover{background: rgba(16,24,39,.9);text-decoration:none}

.main{padding:28px 26px}
.container{max-width:1000px;margin:0 auto}
.hero{padding:16px 0 10px}
/* Hide the top hero only on localized pages, not on the root language chooser */
html[data-locale="zh"] .hero,
html[data-locale="en"] .hero{display:none}
.h1{font-size:42px;letter-spacing:-.02em;margin:0 0 10px}
.sub{color:var(--muted);max-width:80ch;margin:0 0 10px}
.section{padding:36px 0 20px;scroll-margin-top:18px}
.section h2{margin:0 0 14px;font-size:20px}
/* Section title style: white text + subtle orange "stroke" (no box background) */
.section h2,
.section-title{
  display:inline;
  border: none;
  border-radius: 0;
  padding: 0;
  color: #ffffff;
  background: none;
  text-shadow:
    0 -1px 0 rgba(251,146,60,.55),
    0  1px 0 rgba(251,146,60,.28),
    0  0 16px rgba(251,146,60,.16);
}
@media (max-width: 520px){
  .section{padding:30px 0 16px}
  .section h2{font-size:18px}
  .section-title{font-size:18px}
}
.hint{color:var(--muted);font-size:14px;margin:0 0 12px}
.grid{display:grid;grid-template-columns: 320px 1fr;gap:14px}
@media (max-width: 980px){
  /* Keep sidebar on the left for small screens (mobile/tablet). */
  .layout{grid-template-columns:220px 1fr}
  .sidebar{position:sticky;top:0;height:100vh}
  .main{padding:18px 14px}
  .grid{grid-template-columns:1fr}
  .h1{font-size:34px}

  /* About: keep photo compact on smaller screens. */
  #about .grid{grid-template-columns:220px 1fr}
  #about .photo{aspect-ratio:1 / 1}
}

/* Mobile-specific tweaks (do not affect desktop layout). */
@media (max-width: 520px){
  /* Prevent horizontal overflow on mobile (common with CSS grid/flex min-content sizing). */
  html,body{overflow-x:hidden}
  .main,.sidebar,.container{min-width:0}
  .grid > *{min-width:0}

  /* NOTE: 舊版手機 sidebar 仍在左邊，下面會被新的 touch mobile 規則覆蓋 */
  .layout{grid-template-columns:96px 1fr}
  .sidebar{padding:12px 10px;overflow-x:hidden}
  .brand{padding:8px 10px;border-radius:14px}
  .brand .role{display:none}
  .nav a{padding:8px 10px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .actions{flex-direction:column;align-items:stretch}
  .sidebar .btn{padding:8px 10px;font-size:12px;justify-content:flex-start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

  /* Make the whole blocks/cards narrower (not just padding) on mobile. */
  :root{--mobile-card-max:260px}
  .container{max-width:var(--mobile-card-max);margin-left:auto;margin-right:auto}
  .section > .card,
  .list,
  .classes-wrap,
  #certs-list,
  .activities-panel,
  .more-grid{
    max-width:var(--mobile-card-max);
    margin-left:auto;
    margin-right:auto;
  }

  /* Make "blocks" feel tighter on mobile (less empty space). */
  .card{padding:12px;border-radius:16px}
  .item{padding:12px;border-radius:16px}
  .classes-block{padding:12px}
  .cert-row{padding:12px}
  .activities-text{padding:12px}

  /* Smaller "small tiles/cards" on mobile. */
  .course-card{padding:8px 8px 10px;min-height:56px}
  .classes-grid-row .course-card{min-width:200px}
  .more-card{padding:6px 8px}

  /* Shrink Activities + More photos on mobile by constraining their containers. */
  .activities-album,.activities-text{max-width:var(--mobile-card-max);margin-left:auto;margin-right:auto}
  .act-imgwrap{aspect-ratio:1 / 1}

  /* About photo: smaller on mobile. */
  #about .grid{grid-template-columns:140px 1fr}
  #about .photo{aspect-ratio:1 / 1}
}

.card{
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.55);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
}

.photo{
  width:100%;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow:hidden;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.55);
}
.photo img{width:100%;height:100%;object-fit:cover;display:block}

.list{display:flex;flex-direction:column;gap:12px}
.item{
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  border-radius:18px;
  padding:14px 14px 12px;
}
.item.active{
  border-color: rgba(251,146,60,.45);
  box-shadow: 0 0 0 3px rgba(251,146,60,.12);
}
.item .top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.item .title{font-weight:750}
.item .time{color:var(--muted);font-size:13px}
.item ul{margin:10px 0 0 18px;color:var(--muted);font-size:14px}

.tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tag{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(15,23,42,.55);
  color: rgba(229,231,235,.92);font-size:13px;
  cursor:pointer;
  user-select:none;
}
.tag-label{display:inline}
.tag-school{
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.35);
  color: rgba(229,231,235,.92);
}
.tag-school[data-school="nycu"]{
  border-color: rgba(251,146,60,.45);
  background: rgba(251,146,60,.12);
}
.tag-school[data-school="uiuc"]{
  border-color: rgba(96,165,250,.45);
  background: rgba(96,165,250,.12);
}
.tag:hover{color:var(--text);border-color: rgba(251,146,60,.35)}
.tag.on{color:var(--text);border-color: rgba(251,146,60,.55);background: rgba(251,146,60,.10)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;
  padding:7px 10px;border-radius:999px;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  color:var(--muted);font-size:13px;
  cursor:pointer;
  user-select:none;
}
.chip:hover{color:var(--text);border-color: rgba(251,146,60,.35)}
.chip.active{color:var(--text);border-color: rgba(251,146,60,.55);background: rgba(251,146,60,.10)}

.kv{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.kvrow{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:14px}
.kvrow a{color:var(--text);text-decoration:underline;text-decoration-color: rgba(251,146,60,.45)}
.kvrow a:hover{text-decoration-color: rgba(251,146,60,.85)}

/* Certifications (LinkedIn-like row with left icon) */
#certs-list{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  #certs-list{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  #certs-list{ grid-template-columns: 1fr; }
}
.cert-row{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  border-radius:18px;
  padding: 14px 14px;
  min-height: 120px;
}
.cert-icon{
  width: 54px;
  height: 54px;
  border-radius: 12px;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
}
.cert-icon svg{ width: 40px; height: 40px; }
.cert-icon img{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  display:block;
}
.cert-body{ min-width: 0; }
.cert-title{ font-weight: 800; color: var(--text); }
.cert-meta,.cert-id{ color: var(--muted); font-size: 13px; margin-top: 2px; }
.cert-link{ margin-top: 6px; }
.cert-link a{ color: var(--text); text-decoration:underline; text-decoration-color: rgba(251,146,60,.45); }
.cert-link a:hover{ text-decoration-color: rgba(251,146,60,.85); }
.small{font-size:12px;color:var(--muted)}
.hidden{display:none}

.form{display:flex;flex-direction:column;gap:10px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width: 720px){.row{grid-template-columns:1fr}}
label{font-size:13px;color:var(--muted)}
input,textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.35);
  color: var(--text);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{border-color: rgba(251,146,60,.55);box-shadow: 0 0 0 3px rgba(251,146,60,.12)}

/* Top-right social icons */
.topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin:0 0 10px}
.iconbar{display:flex;gap:10px;flex-wrap:wrap}
.iconbtn{
  width:38px;height:38px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  cursor:pointer;
}
.iconbtn:hover{border-color: rgba(251,146,60,.55);background: rgba(16,24,39,.75)}
.iconbtn svg{width:18px;height:18px;fill: var(--text);opacity:.9}

/* About format */
.about-name{
  font-weight:800;
  font-size:34px;
  letter-spacing:-.02em;
  margin:0 0 12px;
  background: linear-gradient(90deg,
    #ffffff 0%,
    #e0f2fe 18%,
    #93c5fd 42%,
    #3b82f6 70%,
    #1d4ed8 100%);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 480px 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 0 26px rgba(59,130,246,.26);
}
html[data-locale="zh"] #about-name{ background-size: 520px 100%; }
html[data-locale="en"] #about-name{ background-size: 420px 100%; }

/* Hide the About section heading visually, but keep it in DOM for sidebar nav label */
#about-title{display:none}
.about-box{
  border:1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  border-radius:18px;
  padding:14px;
}
.about-labels{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
  margin:0 0 10px;
  color: var(--muted);
  font-size:12px;
  letter-spacing:.06em;
  text-transform: uppercase;
  opacity:.9;
}
.about-grid{
  display:grid;
  grid-template-columns: 320px 1fr;
  gap:14px;
}
@media (max-width: 980px){
  .about-labels,.about-grid{grid-template-columns:1fr}
  .about-name{font-size:30px}
  .about-labels{display:none}
}

/* Floating icons fixed */
.floating-icons{
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}
.floating-icons .iconbar{pointer-events:none !important}
.floating-icons .iconbtn{pointer-events:auto !important; backdrop-filter: blur(6px);}
@media (max-width: 520px){
  .floating-icons{top: 10px !important; right: 10px !important}
}

/* Hero card like screenshot */
.hero-card{
  margin-top: 18px;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  border-radius: 26px;
  padding: 18px;
  box-shadow: 0 0 0 1px rgba(251,146,60,.08) inset;
}
.hero-card-inner{
  display:grid;
  grid-template-columns: 380px 1fr;
  gap: 18px;
  align-items: center;
}
.hero-photo{
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.35);
}
.hero-photo img{
  width:100%;
  height: 320px;
  object-fit: cover;
  display:block;
}
.hero-about-title{
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
  color: var(--text);
}
.hero-about-text{
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 780px;
}
.hero-quick{
  display:flex;
  flex-wrap: wrap;
  gap: 12px;
}
.chip{
  border-radius: 999px;
  padding: 12px 18px;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.chip:hover{
  transform: translateY(-1px);
  border-color: rgba(251,146,60,.55);
  background: rgba(16,24,39,.75);
}
.chip-cta{
  text-decoration:none;
  border-color: rgba(251,146,60,.35);
  box-shadow: 0 0 0 1px rgba(251,146,60,.12) inset;
}
@media (max-width: 980px){
  .hero-card-inner{grid-template-columns: 1fr}
  .hero-photo img{height: 280px}
  .hero-about-title{font-size: 34px}
}

/* Classes grouped cards */
.classes-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}
.classes-block{
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  border-radius: 18px;
  padding: 14px;
}
.classes-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}
.classes-block-title{
  font-weight: 800;
  letter-spacing: -0.01em;
}
.classes-block-sub{
  color: var(--muted);
  font-size: 12px;
  text-align:right;
}
.classes-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.classes-nycu .classes-grid{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Group courses by category: each category is one horizontal row */
.classes-grid.classes-by-cat{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.classes-grid-row.classes-by-cat{
  display:flex;
  flex-direction: column;
  gap: 10px;
  overflow: visible;
  padding-bottom: 0;
  scroll-snap-type: none;
}
.course-cat-row{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow: visible;
  padding-bottom: 0;
}
@media (max-width: 980px){
  .course-cat-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .course-cat-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.course-card{
  border-radius: 14px;
  padding: 10px 10px 12px;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.25);
  cursor: default;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height: 64px;
}
.course-card.cat-basic{ background: rgba(96,165,250,.10); }
.course-card.cat-code{ background: rgba(34,197,94,.10); }
.course-card.cat-econ{ background: rgba(251,146,60,.10); }
.course-card.cat-other{ background: rgba(168,85,247,.10); }
.course-card.has-project{ cursor: pointer; }
.course-card.has-project:hover{
  transform: translateY(-1px);
  border-color: rgba(251,146,60,.55);
  background: rgba(2,6,23,.42);
}
.course-term{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.course-name{
  font-size: 14px;
  line-height: 1.25;
  color: var(--text);
  font-weight: 650;
}
.course-card.active{
  border-color: rgba(251,146,60,.70);
  box-shadow: 0 0 0 1px rgba(251,146,60,.22) inset;
}
/* Theme accents */
.classes-nycu{ box-shadow: 0 0 0 1px rgba(251,146,60,.10) inset; }
.classes-uiuc{ box-shadow: 0 0 0 1px rgba(96,165,250,.14) inset; }
.classes-uiuc .course-card.has-project:hover{ border-color: rgba(96,165,250,.55); }
.classes-uiuc .course-card.active{ border-color: rgba(96,165,250,.70); box-shadow: 0 0 0 1px rgba(96,165,250,.22) inset; }
@media (max-width: 980px){
  .classes-wrap{ grid-template-columns: 1fr; }
  .classes-grid{ grid-template-columns: 1fr 1fr; }
  .classes-nycu .classes-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .classes-grid{ grid-template-columns: 1fr 1fr; }
  .classes-nycu .classes-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* UIUC horizontal row */
.classes-grid-row{
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
}
.classes-grid-row::-webkit-scrollbar{ height: 8px; }
.classes-grid-row .course-card{
  min-width: 260px;
  scroll-snap-align: start;
}

/* More about me photo tiles */
.subhead{
  margin: 0 0 6px 0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}
.more-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}
.more-tile{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.35);
  height: 140px;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease;
}
.more-tile:hover{
  transform: translateY(-1px);
  border-color: rgba(251,146,60,.55);
}
.more-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}
.more-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  padding: 10px;
  /* Always show the label, but do NOT dim the image by default. */
  background: none;
  opacity: 1;
  transition: opacity .15s ease, background .15s ease;
  pointer-events: none;
}
.more-tile:hover .more-overlay{ opacity: 1; }

/* Dim only after click (toggled via JS). */
.more-tile.is-dimmed .more-overlay{
  background: linear-gradient(180deg, rgba(2,6,23,0) 30%, rgba(2,6,23,.78) 100%);
}
.more-tile.is-dimmed .more-img{
  filter: brightness(.78) saturate(1.02) contrast(1.02);
}
.more-card{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.60);
  padding: 8px 10px;
  color: var(--text);
  font-weight: 800;
  letter-spacing: -0.01em;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
}
.more-card span{
  color: rgba(251,146,60,.95);
  font-weight: 800;
}
@media (max-width: 980px){
  .more-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Course project card hover + repo icon */
.card[data-card-href]{ position: relative; }
.card[data-card-href]:hover{
  border-color: rgba(251,146,60,.62) !important;
  box-shadow: 0 0 0 1px rgba(251,146,60,.16) inset;
  transform: translateY(-1px);
}
.repo-link{
  position:absolute;
  right: 12px;
  bottom: 12px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.35);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.repo-link:hover{
  transform: translateY(-1px);
  border-color: rgba(251,146,60,.62);
  background: rgba(2,6,23,.55);
}
.repo-link svg{ width: 18px; height: 18px; fill: none; stroke: rgba(229,231,235,.92); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.skill-chips{ display:flex; flex-wrap:wrap; gap: 8px; margin-top: 10px; }
.skill-chip{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(2,6,23,.22);
  color: rgba(229,231,235,.92);
}

/* Hover highlight for clickable course project cards */
.item[data-card-href]:hover{
  border-color: rgba(251,146,60,.62) !important;
  box-shadow: 0 0 0 1px rgba(251,146,60,.16) inset;
  transform: translateY(-1px);
}

h1,h2,h3,.h1,.name,.brand .name{
  font-family: var(--font-title);
  letter-spacing: -0.02em;
}

/* Stack UIUC then NYCU (vertical) */
.classes-wrap{
  display:flex;
  flex-direction: column;
  gap: 16px;
}

/* Whole-block color distinction (not card hover) */
.classes-block{
  border: 1px solid rgba(34,48,74,.85);
  background: rgba(16,24,39,.45);
  border-radius: 18px;
  padding: 14px;
}
.classes-uiuc{
  box-shadow: 0 0 0 1px rgba(96,165,250,.18) inset;
}
.classes-nycu{
  box-shadow: 0 0 0 1px rgba(251,146,60,.14) inset;
}

.course-card.has-project:hover{
  border-color: rgba(251,146,60,.55);
}

/* Sidebar "More" tiles (templates) */
.sidebar-more{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(34,48,74,.55);
}
.sidebar-more-title{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(230,238,252,.85);
  margin-bottom: 10px;
}
.sidebar-more-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.sidebar-more-grid .more-tile{
  height: 92px;
}
.sidebar-more-grid .more-card{
  padding: 6px 8px;
  font-size: 12px;
}

/* Clickable list items */
.item[data-card-href]{ position: relative; }
.item[data-card-href]:hover{
  border-color: rgba(251,146,60,.62);
  box-shadow: 0 0 0 1px rgba(251,146,60,.16) inset;
  transform: translateY(-1px);
}
/* Course projects use blue highlight */
.item.is-course-project[data-card-href]:hover{
  border-color: rgba(96,165,250,.72);
  box-shadow: 0 0 0 1px rgba(96,165,250,.20) inset;
}

/* UIUC/NYCU tinted backgrounds */
.classes-uiuc{
  background: linear-gradient(180deg, rgba(96,165,250,.08), rgba(16,24,39,.45));
}
.classes-nycu{
  background: linear-gradient(180deg, rgba(251,146,60,.06), rgba(16,24,39,.45));
}

/* Force vertical stacking for Classes */
.classes-wrap{
  display:flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Force course project hover blue */
.item.is-course-project[data-card-href]:hover{
  border-color: rgba(96,165,250,.78) !important;
  box-shadow: 0 0 0 1px rgba(96,165,250,.22) inset !important;
}

.about-mini{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.mini-card{
  border: 1px solid rgba(34,48,74,.7);
  background: rgba(16,24,39,.35);
  border-radius: 14px;
  padding: 10px 10px 12px;
}
.mini-top{
  font-size: 11px;
  color: rgba(230,238,252,.65);
  margin-bottom: 6px;
}
.mini-title{
  font-weight: 800;
  color: rgba(243,244,246,.95);
  margin-bottom: 4px;
}
.mini-sub{
  font-size: 12px;
  color: rgba(230,238,252,.78);
}

.more-tile img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* Force font variables */
body, button, input, textarea, select{
  font-family: var(--font-body) !important;
}
h1,h2,h3,.section-title,.name,.brand .name{
  font-family: var(--font-title) !important;
}

/* Force classes blocks vertical stack */
.classes-wrap{
  display:flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Hover: orange default, blue for course projects only */
.item[data-card-href]:hover{
  border-color: rgba(251,146,60,.62);
  box-shadow: 0 0 0 1px rgba(251,146,60,.16) inset;
  transform: translateY(-1px);
}
.item.is-course-project[data-card-href]:hover{
  border-color: rgba(96,165,250,.72);
  box-shadow: 0 0 0 1px rgba(96,165,250,.22) inset;
}

.about-badges{
  margin-top: 14px;
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
.badge-card{
  border: 1px solid rgba(34,48,74,.75);
  background: rgba(16,24,39,.45);
  border-radius: 14px;
  padding: 10px 12px;
}
.badge-top{
  font-size: 12px;
  font-weight: 800;
  color: rgba(229,231,235,.85);
  margin-bottom: 6px;
}
.badge-main{
  font-size: 13px;
  color: rgba(229,231,235,.92);
  line-height: 1.35;
}
@media (max-width: 860px){
  .about-badges{ grid-template-columns: 1fr; }
}

/* More About Me album tiles */
.more-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin: 10px auto 0;
}
@media (max-width: 720px){
  .more-grid{ grid-template-columns: 1fr; }
}
.more-tile{
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  border: 1px solid rgba(34,48,74,.75);
  background: rgba(16,24,39,.35);
  height: auto;
}
.more-imgwrap{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.more-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  transform: scale(1.01);
  transition: transform .22s ease, filter .22s ease;
}
.more-tile:not(.is-dimmed):hover .more-img{
  transform: scale(1.04);
  filter: brightness(1.05);
}
.more-nav{
  position:absolute;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,.28);
  background: rgba(2,6,23,.55);
  color: rgba(229,231,235,.92);
  font-size: 24px;
  line-height: 34px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.more-nav-left{ left: 10px; }
.more-nav-right{ right: 10px; }
.more-tile:hover .more-nav{ opacity: 1; }
.more-nav:hover{
  background: rgba(2,6,23,.75);
  transform: translateY(-50%) scale(1.04);
}
/* Activities section */
.activities-tabs{
  display:flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
  margin-bottom: 14px;
}
.activities-tabs .tab{
  border: 1px solid rgba(34,48,74,.75);
  background: rgba(16,24,39,.35);
  color: rgba(229,231,235,.92);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.activities-tabs .tab:hover{
  border-color: rgba(251,146,60,.50);
}
.activities-tabs .tab.active{
  border-color: rgba(251,146,60,.70);
  box-shadow: 0 0 0 1px rgba(251,146,60,.18) inset;
}
.activities-panel{
  display:grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px){
  .activities-panel{ grid-template-columns: 1fr; }
}
.activities-album{
  border: 1px solid rgba(34,48,74,.75);
  background: rgba(16,24,39,.30);
  border-radius: 18px;
  overflow: hidden;
}
.act-imgwrap{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.act-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}
.act-nav{
  position:absolute;
  bottom: 10px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,.28);
  background: rgba(2,6,23,.55);
  color: rgba(229,231,235,.92);
  font-size: 22px;
  line-height: 32px;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}
.act-nav-left{ left: 10px; }
.act-nav-right{ right: 10px; }
.activities-album:hover .act-nav{ opacity: 1; }
.act-nav:hover{
  background: rgba(2,6,23,.75);
  transform: scale(1.04);
}

.activities-text{
  border: 1px solid rgba(34,48,74,.75);
  background: rgba(16,24,39,.35);
  border-radius: 18px;
  padding: 14px;
}
.act-meta{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.act-badge{
  border: 1px solid rgba(34,48,74,.75);
  background: rgba(16,24,39,.30);
  border-radius: 14px;
  padding: 10px 12px;
}
.act-badge-top{
  font-size: 12px;
  font-weight: 900;
  color: rgba(229,231,235,.75);
  margin-bottom: 6px;
}
.act-badge-main{
  font-size: 13px;
  font-weight: 700;
  color: rgba(229,231,235,.92);
  line-height: 1.35;
}
.act-title{
  font-size: 18px;
  font-weight: 900;
  margin: 6px 0 10px;
  color: rgba(229,231,235,.95);
}
.act-bullets{
  margin: 0;
  padding-left: 18px;
  color: rgba(229,231,235,.88);
  line-height: 1.55;
}

/* =========================================================
   Mobile on real phones: sidebar -> top horizontal bar
   用 (pointer: coarse) 避免影響電腦把視窗縮窄的情況
   也能處理手機缺少 viewport meta 導致寬度接近 980 的狀況
   ========================================================= */
@media (max-width: 1024px) and (pointer: coarse){
  html, body{ overflow-x: hidden; max-width: 100%; }

  /* Layout: 變成上下結構，sidebar 在上 */
  .layout{
    display:flex !important;
    flex-direction: column !important;
    min-height: 100vh;
  }

  .sidebar{
    position: sticky !important;
    top: 0 !important;
    height: auto !important;
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(34,48,74,.7) !important;
    padding: 10px 12px !important;
    background: rgba(11,15,23,.72) !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  .brand{ margin-bottom: 8px !important; }
  .brand .role{ display:none !important; }

  /* Nav: 變橫向，超出可水平滑 */
  .nav{
    flex-direction: row !important;
    gap: 8px !important;
    margin: 6px 0 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    padding-bottom: 6px !important;
  }
  .nav::-webkit-scrollbar{ height: 6px; }
  .nav a{
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Actions: 同一列或可換行，避免把寬度撐爆 */
  .actions{
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
  }
  .actions .btn,
  .actions select.btn{
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  .sidebar-more{ display:none !important; }

  /* Main content: 寬度變合理，置中 */
  .main{ padding: 14px 12px !important; }
  .container{
    width: 100% !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    min-width: 0 !important;
  }

  /* Grid / cards: 防止 min-content 撐寬 */
  .main, .container, .grid, .about-grid, .about-labels,
  .classes-wrap, .classes-block, .classes-grid, .course-cat-row,
  .classes-grid-row, .activities-panel, .activities-album, .activities-text,
  .more-grid, .list, #certs-list{
    min-width: 0 !important;
  }
  .grid > *, .about-grid > *, .about-labels > *,
  .classes-wrap > *, .classes-block > *, .classes-grid > *,
  .course-cat-row > *, .activities-panel > *, .more-grid > *{
    min-width: 0 !important;
  }

  /* About: 照片不要撐太大，改成上圖下文 */
  #about .grid{
    grid-template-columns: 1fr !important;
  }
  #about .photo{
    max-width: 220px !important;
    margin: 0 auto !important;
    aspect-ratio: 1 / 1 !important;
  }

  /* Courses: 手機改成單欄，避免兩欄造成總寬度被撐大 */
  .classes-grid{ grid-template-columns: 1fr !important; }
  .classes-nycu .classes-grid{ grid-template-columns: 1fr !important; }
  .course-cat-row{ grid-template-columns: 1fr !important; }

  /* UIUC horizontal row: 降低卡片 min-width，避免整頁被撐寬 */
  .classes-grid-row{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .classes-grid-row .course-card{
    min-width: 210px !important;
  }

  /* Activities: 相簿比例偏正方，整體不會太寬 */
  .activities-panel{ grid-template-columns: 1fr !important; }
  .act-imgwrap{ aspect-ratio: 1 / 1 !important; }

  /* More: 改單欄，縮到合理寬度 */
  .more-grid{
    grid-template-columns: 1fr !important;
    max-width: 680px !important;
    margin: 10px auto 0 !important;
  }
  .more-tile{
    max-width: 520px !important;
    margin: 0 auto !important;
  }
}

/* 更小手機再收一點 */
@media (max-width: 520px) and (pointer: coarse){
  .container{ max-width: 430px !important; }
  .course-name{ font-size: 13px !important; }
  .course-term{ font-size: 10px !important; }
  .card,.item,.classes-block,.cert-row,.activities-text{ padding: 12px !important; }
  .repo-link{ right: 10px !important; bottom: 10px !important; }
}

/* =========================================================
   Mobile overrides v2
   只作用在手機 touch 裝置，不影響 desktop
   直接貼在 style.css 最底部
   ========================================================= */
   @media (max-width: 1024px) and (pointer: coarse){

    /* 1) Sidebar 改成懸浮在左半側 */
    .sidebar{
      position: fixed !important;
      top: 10px !important;
      left: 10px !important;
  
      /* 左半側寬度：視窗的一半左右，並限制最大寬 */
      width: min(52vw, 540px) !important;
      height: auto !important;
  
      border-right: 0 !important;
      border-bottom: 1px solid rgba(34,48,74,.7) !important;
  
      border-radius: 18px !important;
      padding: 10px 12px !important;
  
      background: rgba(11,15,23,.72) !important;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.28);
  
      z-index: 9999 !important;
      overflow: hidden !important;
    }
  
    /* Sidebar 內容橫向化，避免高度太高 */
    .brand{
      margin-bottom: 8px !important;
    }
    .brand .role{
      display:none !important;
    }
  
    .nav{
      flex-direction: row !important;
      gap: 8px !important;
      margin: 6px 0 8px !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      white-space: nowrap !important;
      padding-bottom: 6px !important;
    }
    .nav a{
      flex: 0 0 auto !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
      border-radius: 999px !important;
    }
  
    .actions{
      flex-direction: row !important;
      align-items: center !important;
      gap: 8px !important;
      flex-wrap: wrap !important;
    }
    .actions .btn,
    .actions select.btn{
      padding: 8px 10px !important;
      font-size: 12px !important;
    }
  
    /* 右半側圖標保持在右上，並對齊同一高度 */
    .floating-icons{
      position: fixed !important;
      top: 10px !important;
      right: 10px !important;
      left: auto !important;
      bottom: auto !important;
      z-index: 10000 !important;
    }
  
    /* 內容往下推，避免被懸浮 sidebar 蓋住 */
    .main{
      padding-top: 92px !important;
    }
  
    /* 2) NYCU 課程：一行三個 */
    .classes-nycu .classes-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    .course-cat-row{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  
    /* 3) 活動經歷照片縮小 1.5 倍 */
    .activities-panel{
      grid-template-columns: 1fr !important;
    }
    .activities-album{
      width: 100% !important;
      max-width: min(66vw, 420px) !important; /* 約縮到 2/3 */
      margin: 0 auto !important;
    }
    .act-imgwrap{
      aspect-ratio: 1 / 1 !important;
    }
  }
  
  /* 更小手機再收斂字體，讓 NYCU 三欄不擠 */
  @media (max-width: 520px) and (pointer: coarse){
    .sidebar{
      width: min(56vw, 380px) !important;
      top: 8px !important;
      left: 8px !important;
    }
    .floating-icons{
      top: 8px !important;
      right: 8px !important;
    }
    .course-name{
      font-size: 12px !important;
    }
    .course-term{
      font-size: 10px !important;
    }
  }

/* =========================================================
   Mobile overrides v3
   只作用在手機 touch 裝置，不影響 desktop
   直接貼在 style.css 最底部
   ========================================================= */
   @media (max-width: 1024px) and (pointer: coarse){

    /* 1) 側邊欄的名字刪掉（brand 整塊隱藏） */
    .sidebar .brand{ display:none !important; }
  
    /* 3) 目錄在左邊，兩排（wrap 成 2 rows） */
    .sidebar .nav{
      display:flex !important;
      flex-direction: row !important;
      flex-wrap: wrap !important;
      align-content: flex-start !important;
  
      /* 兩排的關鍵：限制高度並讓內容自動換到第二排 */
      max-height: 78px !important;
      overflow-y: hidden !important;
      overflow-x: auto !important;
  
      gap: 8px !important;
      margin: 0 !important;
      padding: 8px 8px 6px !important;
    }
    .sidebar .nav a{
      flex: 0 0 auto !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
      border-radius: 999px !important;
    }
  
    /* 左側懸浮 sidebar：因為名字拿掉了，高度可以更矮 */
    .sidebar{
      padding: 8px 8px !important;
    }
  
    /* 2) 中英文與履歷改到右邊：把 sidebar 內的 actions 整個搬到右側浮層 */
    .sidebar .actions{
      position: fixed !important;
      top: 54px !important;     /* 圖標下方 */
      right: 10px !important;
      left: auto !important;
  
      display:flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
  
      z-index: 10001 !important;
      padding: 0 !important;
      margin: 0 !important;
  
      /* 讓它看起來像一個小懸浮區塊 */
      width: 150px !important;
    }
    .sidebar .actions .btn,
    .sidebar .actions select.btn{
      width: 100% !important;
      justify-content: center !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
  
      border-radius: 14px !important;
      border: 1px solid rgba(34,48,74,.85) !important;
      background: rgba(16,24,39,.55) !important;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.22);
    }
  
    /* 右上圖標保持在最上層，actions 會在它下面 */
    .floating-icons{
      z-index: 10002 !important;
    }
  
    /* 內容往下推，避免被左側 nav 與右側 actions 蓋住 */
    .main{
      padding-top: 110px !important;
    }
  }
  
  /* 更小手機再縮一點右側 actions 寬度 */
  @media (max-width: 520px) and (pointer: coarse){
    .sidebar .actions{
      top: 50px !important;
      right: 8px !important;
      width: 138px !important;
    }
    .sidebar .nav{
      max-height: 74px !important;
    }
  }


  /* =========================================================
   Mobile fix: force actions to right floating (under icons)
   只作用在手機 touch 裝置，不影響 desktop
   ========================================================= */
@media (max-width: 1024px) and (pointer: coarse){

  /* 強制把中英文與履歷這組 actions 搬到右側浮層 */
  .actions{
    position: fixed !important;
    top: 54px !important;
    right: 10px !important;
    left: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;

    z-index: 10001 !important;
    width: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .actions .btn,
  .actions select.btn{
    width: 100% !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    font-size: 12px !important;

    border-radius: 14px !important;
    border: 1px solid rgba(34,48,74,.85) !important;
    background: rgba(16,24,39,.55) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.22);
  }

  /* 右上圖標永遠蓋在最上面 */
  .floating-icons{ z-index: 10002 !important; }

  /* 主內容往下推，避免被 nav 與右側 actions 蓋住 */
  .main{ padding-top: 110px !important; }
}

@media (max-width: 520px) and (pointer: coarse){
  .actions{
    top: 50px !important;
    right: 8px !important;
    width: 138px !important;
  }
}

/* =========================================================
   Mobile final override
   修正重疊 + 左側懸浮目錄 + 右側 icons + actions
   只影響手機
   ========================================================= */
   @media (max-width: 520px){

    /* 讓內容往下避開懸浮層，避免被蓋到 */
    .main{
      padding-top: 200px !important;
    }
    /* 點 sidebar 目錄跳轉時，也要避開懸浮層高度 */
    .section{
      scroll-margin-top: 200px !important;
    }
  
    /* 左側懸浮 sidebar 只佔左半邊，不要全寬 */
    .sidebar{
      position: fixed !important;
      top: 10px !important;
      left: 10px !important;
      right: auto !important;
  
      width: calc(100% - 190px) !important; /* 右側保留 icons + actions */
      max-width: 520px !important;
      height: auto !important;
      max-height: 160px !important;
  
      overflow: hidden !important;
      border-right: 0 !important;
      border-bottom: 1px solid rgba(34,48,74,.7) !important;
      border-radius: 22px !important;
      background: rgba(11,15,23,.72) !important;
      backdrop-filter: blur(10px);
      z-index: 10000 !important;
      padding: 10px 10px !important;
    }
  
    /* 刪掉 sidebar 的名字區塊 */
    .brand{
      display: none !important;
    }
  
    /* 目錄在左邊兩排 */
    .nav{
      display: grid !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: 8px !important;
      margin: 0 !important;
      padding: 0 !important;
  
      overflow: hidden !important;
      white-space: normal !important;
    }
    .nav a{
      padding: 8px 10px !important;
      font-size: 12px !important;
      border-radius: 999px !important;
      text-align: center !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
    }
  
    /* 右上 icons 保持最上層 */
    .floating-icons{
      z-index: 10002 !important;
    }
  
    /* 把 sidebar 內的 actions 從左側拿掉，避免它還卡在 sidebar 裡造成擠壓 */
    .sidebar .actions{
      display: none !important;
    }
  
    /* 任何地方的 actions 都強制固定到右側 icons 下面 */
    .actions{
      position: fixed !important;
      top: 56px !important;
      right: 10px !important;
      left: auto !important;
  
      display: flex !important;
      flex-direction: column !important;
      align-items: stretch !important;
      gap: 8px !important;
  
      z-index: 10001 !important;
      width: 160px !important;
      margin: 0 !important;
      padding: 0 !important;
    }
    .actions .btn,
    .actions select.btn{
      width: 100% !important;
      justify-content: center !important;
      padding: 8px 10px !important;
      font-size: 12px !important;
  
      border-radius: 14px !important;
      border: 1px solid rgba(34,48,74,.85) !important;
      background: rgba(16,24,39,.55) !important;
      backdrop-filter: blur(10px);
      box-shadow: 0 10px 30px rgba(0,0,0,.22);
    }
  
    /* NYCU 課程一行三個 */
    .classes-nycu .course-cat-row{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    /* 兼容你可能用到的另一種 NYCU grid */
    .classes-nycu .classes-grid{
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  
    /* 活動經歷照片縮小 1.5 倍左右 (寬度約 2/3) */
    .activities-album{
      max-width: 66.67% !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* =========================================================
   Mobile LAST override
   只改手機版：sidebar 左上懸浮，actions 右側浮層(icons下方)
   ========================================================= */

   /* Mobile layout patch v20251222c */
@media (max-width: 520px){
  html, body{ overflow-x: hidden; }

  /* Sidebar becomes floating top layer */
  .layout{
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
  }

  .sidebar{
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    /* Only occupy the left half; reserve the right half for icons + actions. */
    right: calc(50vw + 6px) !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 1px solid rgba(34,48,74,.7) !important;
    padding: 10px 10px !important;
    background: rgba(11,15,23,.72) !important;
    backdrop-filter: blur(10px);
    z-index: 9999 !important;
    overflow: visible !important;
  }

  /* Remove name block on mobile */
  .sidebar .brand{ display: none !important; }

  /* Left side: nav in two rows, constrained to left half */
  .sidebar .nav{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    white-space: normal !important;
  }

  .sidebar .nav a,
  .sidebar .nav .nav-item{
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  /* Right side: move actions out as a floating panel under icons */
  .sidebar .actions{
    position: fixed !important;
    top: 62px !important;
    right: 10px !important;
    left: auto !important;

    width: calc(50vw - 20px) !important;
    max-width: calc(50vw - 20px) !important;

    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    align-items: stretch !important;

    padding: 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(34,48,74,.7) !important;
    background: rgba(11,15,23,.72) !important;
    backdrop-filter: blur(10px);

    z-index: 10000 !important;
  }

  .sidebar .actions .btn,
  .sidebar .actions select.btn{
    width: 100% !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    justify-content: center !important;
  }

  /* Keep icons on the right, above actions */
  .floating-icons{
    top: 10px !important;
    right: 10px !important;
    z-index: 10010 !important;
  }

  /* Optional: hide sidebar extra tiles on mobile */
  .sidebar-more{ display: none !important; }
  /* Main content spacing so it does not hide behind floating sidebar */
  .main{
    padding: 14px 12px !important;
    padding-top: 128px !important;
  }

  .container{
    max-width: 420px !important;
    width: 100% !important;
    margin: 0 auto !important;
    min-width: 0 !important;
  }
}