/* ============================================================
   NAT KHOO — natkhoo.com
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600&display=swap');

:root {
  --blue:         #7eb8f7;
  --blue-bright:  #a8d4ff;
  --amber:        #d4a84b;
  --amber-bright: #f0c96a;
  --bg:           #080b12;
  --bg-sidebar:   rgba(8,11,18,0.97);
  --text:         #e8f0ff;
  --muted:        rgba(220,232,255,0.72);
  --dim:          rgba(200,220,255,0.40);
  --border:       rgba(212,168,75,0.22);
  --border-blue:  rgba(126,184,247,0.14);
  --sidebar-w:    210px;
  --font:         'Exo 2', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  overflow: hidden;
}

a { color: var(--amber-bright); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Star grid background ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(168,212,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 68% 12%, rgba(168,212,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 60%, rgba(168,212,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 82% 45%, rgba(212,168,75,0.30) 0%, transparent 100%),
    radial-gradient(1px 1px at  8% 75%, rgba(168,212,255,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 85%, rgba(212,168,75,0.20) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 70%, rgba(168,212,255,0.25) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(212,168,75,0.20) 0%, transparent 100%),
    linear-gradient(rgba(126,184,247,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126,184,247,0.022) 1px, transparent 1px);
  background-size:
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    100% 100%, 100% 100%, 100% 100%, 100% 100%,
    44px 44px, 44px 44px;
}

/* ── Scanlines ── */
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 2px,
    rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px
  );
}

/* ── Ambient glow ── */
.shell::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 50%, rgba(212,168,75,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 20%, rgba(126,184,247,0.06) 0%, transparent 45%);
}

.shell {
  position: relative; z-index: 1;
  display: flex; height: 100vh; overflow: hidden;
}

/* ════════════════════════════════════════
   SIDEBAR
════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w); min-width: var(--sidebar-w);
  display: flex; flex-direction: column;
  padding: 30px 0 28px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  position: relative; z-index: 10; flex-shrink: 0;
  transition: transform 0.3s ease;
}
.sidebar::after {
  content: ''; position: absolute; top: 20%; right: -1px; bottom: 20%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(212,168,75,0.55), transparent);
  pointer-events: none;
}

.player-card {
  padding: 0 20px 22px;
  border-bottom: 1px solid rgba(212,168,75,0.12);
  margin-bottom: 14px;
}

.avatar-portrait {
  width: 56px; height: 56px; border-radius: 4px;
  border: 1px solid rgba(212,168,75,0.45);
  box-shadow: 0 0 14px rgba(212,168,75,0.2);
  overflow: hidden; background: rgba(212,168,75,0.08);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 12px;
}
.pixel-char { image-rendering: pixelated; width: 48px; height: 48px; }

.player-name {
  font-size: 21px; font-weight: 600;
  color: var(--text); letter-spacing: 0.04em; line-height: 1.1;
}
.player-fullname {
  font-size: 13px; font-weight: 400;
  color: rgba(200,220,255,0.32);
  letter-spacing: 0.06em; margin-top: 3px;
}

.nav { flex: 1; padding: 0 10px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; font-size: 15px; font-family: var(--font);
  color: var(--muted); cursor: pointer; position: relative;
  margin-bottom: 2px; border: 1px solid transparent;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  transition: all 0.15s; user-select: none; letter-spacing: 0.03em;
}
.nav-item:hover { color: var(--text); background: rgba(212,168,75,0.06); border-color: rgba(212,168,75,0.2); }
.nav-item.active { color: var(--amber-bright); background: rgba(212,168,75,0.09); border-color: rgba(212,168,75,0.35); }
.nav-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 2px; background: var(--amber-bright);
  box-shadow: 0 0 6px var(--amber), 0 0 14px rgba(212,168,75,0.4);
}
.nav-icon { font-size: 14px; opacity: 0.6; width: 14px; text-align: center; flex-shrink: 0; }

/* ════════════════════════════════════════
   MAIN
════════════════════════════════════════ */
.main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; z-index: 1; }

.mobile-topbar {
  display: none; align-items: center; gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(212,168,75,0.12);
  flex-shrink: 0; background: var(--bg-sidebar);
}
.hamburger { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 2px; }
.hamburger span { display: block; width: 18px; height: 1px; background: var(--amber-bright); transition: transform 0.2s, opacity 0.2s; }
.hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-name { font-size: 17px; font-weight: 600; color: var(--text); }

.sidebar-overlay { display: none; position: fixed; inset: 0; z-index: 9; background: rgba(0,0,0,0.55); }

.main-scroll {
  flex: 1; overflow-y: auto; padding: 32px 36px 48px;
  scrollbar-width: thin; scrollbar-color: rgba(126,184,247,0.2) transparent;
}
.main-scroll::-webkit-scrollbar { width: 4px; }
.main-scroll::-webkit-scrollbar-thumb { background: rgba(126,184,247,0.2); border-radius: 2px; }

/* ── Section transitions ── */
.section { display: none; opacity: 0; transform: translateX(18px); }
.section.active { display: block; animation: slideIn 0.32s cubic-bezier(0.22,1,0.36,1) forwards; }

.portfolio-shell { display: none; flex-direction: column; flex: 1; overflow: hidden; opacity: 0; transform: translateX(18px); }
.portfolio-shell.active { display: flex; animation: slideIn 0.32s cubic-bezier(0.22,1,0.36,1) forwards; }

@keyframes slideIn { to { opacity: 1; transform: translateX(0); } }

/* ── Panel headers ── */
.panel-header { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.corner-tag {
  font-size: 12px; font-weight: 600; color: var(--amber-bright);
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 11px; background: rgba(212,168,75,0.08);
  border: 1px solid rgba(212,168,75,0.3);
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  flex-shrink: 0;
}
.divider-line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(212,168,75,0.38), transparent); }
.section-title { font-size: 29px; font-weight: 600; color: var(--text); margin-bottom: 7px; letter-spacing: 0.02em; }
.section-sub { font-size: 15px; color: var(--muted); line-height: 1.75; margin-bottom: 24px; max-width: 480px; }

/* ════════════════════════════════════════
   ABOUT
════════════════════════════════════════ */
.about-full {
  background: rgba(126,184,247,0.03); border: 1px solid var(--border-blue);
  border-radius: 2px; padding: 16px 18px; margin-bottom: 12px; transition: box-shadow 0.2s;
}
.about-full:hover { box-shadow: 0 0 16px rgba(126,184,247,0.07); }
.about-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
.about-block {
  background: rgba(126,184,247,0.03); border: 1px solid var(--border-blue);
  border-radius: 2px; padding: 13px 15px; transition: border-color 0.2s, box-shadow 0.2s;
}
.about-block:hover { border-color: rgba(126,184,247,0.28); box-shadow: 0 0 14px rgba(126,184,247,0.07); }
.about-block-label { font-size: 12px; color: var(--amber); letter-spacing: 0.11em; text-transform: uppercase; margin-bottom: 7px; font-weight: 600; }
.about-block-text { font-size: 15px; color: var(--muted); line-height: 1.72; }

/* Credentials */
.cred-list { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cred-item { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.cred-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.cred-dot-done { background: var(--amber-bright); box-shadow: 0 0 6px rgba(212,168,75,0.5); }
.cred-dot-progress { background: var(--amber-bright); box-shadow: 0 0 6px rgba(212,168,75,0.5); }
.cred-name { flex: 1; color: var(--text); }

/* ════════════════════════════════════════
   EXPLORER SHELL (Portfolio + Posts)
════════════════════════════════════════ */
.portfolio-header { flex-shrink: 0; padding: 32px 36px 18px; }

.posts-tabs-bar { flex-shrink: 0; padding: 0 36px; border-bottom: 1px solid rgba(212,168,75,0.14); }
.posts-tabs { display: flex; gap: 6px; padding: 13px 0; }
.tab-btn {
  font-size: 13px; font-family: var(--font); padding: 5px 14px;
  border: 1px solid rgba(212,168,75,0.2); color: rgba(220,232,255,0.42);
  background: rgba(212,168,75,0.04); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
  transition: all 0.15s; letter-spacing: 0.07em; user-select: none;
}
.tab-btn:hover { color: rgba(220,232,255,0.88); background: rgba(212,168,75,0.08); border-color: rgba(212,168,75,0.35); }
.tab-btn.active { color: var(--amber-bright); background: rgba(212,168,75,0.12); border-color: rgba(212,168,75,0.5); }

.explorer { flex: 1; display: flex; overflow: hidden; border-top: 1px solid rgba(126,184,247,0.08); }

/* Left list */
.proj-list {
  width: 210px; min-width: 210px;
  overflow-y: auto; border-right: 1px solid rgba(126,184,247,0.1);
  padding: 8px 0; flex-shrink: 0;
  scrollbar-width: thin; scrollbar-color: rgba(126,184,247,0.15) transparent;
}
.proj-list::-webkit-scrollbar { width: 3px; }
.proj-list::-webkit-scrollbar-thumb { background: rgba(126,184,247,0.15); border-radius: 2px; }

.proj-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px; cursor: pointer;
  border-left: 2px solid transparent; transition: background 0.12s;
}
.proj-item:hover { background: rgba(212,168,75,0.05); }
.proj-item.active { background: rgba(212,168,75,0.09); border-left-color: var(--amber-bright); }
.proj-item.active .pi-name { color: var(--amber-bright); }

/* Folder icon */
.pf { flex-shrink: 0; width: 20px; height: 18px; position: relative; margin-top: 1px; }
.pf-body { width: 20px; height: 14px; border-radius: 0 2px 2px 2px; background: rgba(212,168,75,0.18); border: 1px solid rgba(212,168,75,0.4); position: absolute; bottom: 0; transition: background 0.12s; }
.pf-tab { width: 8px; height: 5px; background: rgba(212,168,75,0.25); border: 1px solid rgba(212,168,75,0.4); border-bottom: none; border-radius: 2px 2px 0 0; position: absolute; top: 0; left: 1px; }
.proj-item.active .pf-body, .proj-item:hover .pf-body { background: rgba(212,168,75,0.32); }

/* Lines icon (posts) */
.lines-icon { flex-shrink: 0; width: 14px; margin-top: 4px; display: flex; flex-direction: column; gap: 3px; }
.lines-icon span { display: block; height: 1.5px; width: 14px; background: rgba(212,168,75,0.4); border-radius: 1px; transition: background 0.12s; }
.lines-icon .lines-short { width: 9px !important; }
.proj-item.active .lines-icon span,
.proj-item:hover .lines-icon span { background: rgba(212,168,75,0.8); }

.pi-info { overflow: hidden; flex: 1; }
.pi-name { font-size: 14px; font-weight: 500; color: var(--text); line-height: 1.35; white-space: normal; }
.pi-cat { font-size: 12px; color: rgba(212,168,75,0.62); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }

/* Detail panel */
.proj-detail {
  flex: 1; overflow-y: auto; padding: 28px 36px 48px;
  scrollbar-width: thin; scrollbar-color: rgba(126,184,247,0.15) transparent;
}
.proj-detail::-webkit-scrollbar { width: 3px; }
.proj-detail::-webkit-scrollbar-thumb { background: rgba(126,184,247,0.15); border-radius: 2px; }

.d-empty { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.d-empty-text { font-size: 13px; color: rgba(200,220,255,0.2); letter-spacing: 0.12em; text-transform: uppercase; }

.d-content { display: none; opacity: 0; }
.d-content.vis { display: block; animation: slideIn 0.25s cubic-bezier(0.22,1,0.36,1) forwards; }

.d-header-row { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.d-folder { flex-shrink: 0; margin-top: 2px; }
.d-titles { flex: 1; }
.d-title { font-size: 23px; font-weight: 600; color: var(--text); margin-bottom: 4px; line-height: 1.3; letter-spacing: 0.02em; }
.d-type { font-size: 12px; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; }
.d-rule { height: 1px; background: linear-gradient(90deg, rgba(126,184,247,0.22), transparent); margin-bottom: 16px; }
.d-section-label { font-size: 12px; color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.d-desc { font-size: 12.5px; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }
.d-body-label { font-size: 12px; color: rgba(126,184,247,0.6); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.d-body { font-size: 15px; color: rgba(220,232,255,0.65); line-height: 1.85; margin-bottom: 24px; padding-left: 16px; border-left: 1px solid rgba(126,184,247,0.18); white-space: pre-line; }
.d-tags-label { font-size: 12px; color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.d-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.d-tag { font-size: 12px; padding: 3px 10px; border: 1px solid rgba(126,184,247,0.2); color: rgba(168,212,255,0.75); background: rgba(126,184,247,0.04); letter-spacing: 0.05em; }

/* Post detail */
.post-meta { font-size: 12px; color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.post-title { font-size: 25px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 4px; letter-spacing: 0.02em; }
.post-desc { font-size: 16px; color: var(--muted); line-height: 1.75; margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid rgba(126,184,247,0.1); }
.post-body p { font-size: 16px; color: rgba(220,232,255,0.75); line-height: 1.9; margin-bottom: 20px; }
.post-body p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════════
   CONTACT
════════════════════════════════════════ */
.contact-row { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(126,184,247,0.08); }
.contact-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--amber-bright); border: 1px solid rgba(212,168,75,0.3); flex-shrink: 0; }
.contact-label { font-size: 13px; color: var(--dim); margin-bottom: 2px; }
.contact-val { font-size: 12.5px; color: var(--text); }
.contact-note { margin-top: 22px; padding: 16px 18px; background: rgba(212,168,75,0.05); border: 1px solid rgba(212,168,75,0.18); border-radius: 2px; font-size: 15px; color: var(--muted); line-height: 1.7; }

/* Images */
.detail-img-wrap { margin-bottom: 20px; border: 1px solid rgba(126,184,247,0.15); border-radius: 2px; overflow: hidden; }
.detail-img { width: 100%; display: block; object-fit: cover; max-height: 320px; filter: brightness(0.92) saturate(0.85); transition: filter 0.2s; }
.detail-img:hover { filter: brightness(1) saturate(1); }
.detail-img-caption { padding: 8px 12px; font-size: 13px; color: var(--dim); line-height: 1.5; background: rgba(126,184,247,0.03); border-top: 1px solid rgba(126,184,247,0.1); }

/* ════════════════════════════════════════
   MOBILE
════════════════════════════════════════ */
@media (max-width: 680px) {
  body { overflow: auto; }
  .shell { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar { position: fixed; top: 0; left: 0; bottom: 0; transform: translateX(-100%); width: 240px; min-width: 240px; z-index: 20; box-shadow: 4px 0 24px rgba(0,0,0,0.5); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.visible { display: block; }
  .mobile-topbar { display: flex; }
  .main { flex: none; min-height: 100vh; }
  .main-scroll { overflow: visible; padding: 24px 20px 48px; }
  .portfolio-shell { min-height: 80vh; }
  .portfolio-header { padding: 24px 20px 14px; }
  .explorer { flex-direction: column; overflow: visible; }
  .proj-list { width: 100% !important; min-width: 0 !important; border-right: none; border-bottom: 1px solid rgba(126,184,247,0.1); overflow-y: visible; }
  .proj-detail { overflow: visible; padding: 20px 20px 48px; }
  .posts-tabs-bar { padding: 0 20px; position: sticky; top: 0; background: var(--bg); }
  .section-title { font-size: 25px; }
  .d-title { font-size: 19px; }
  .about-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   MOBILE BOTTOM NAV
════════════════════════════════════════ */
.mobile-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(8,11,18,0.97);
  border-top: 1px solid rgba(212,168,75,0.22);
  flex-direction: row;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.4);
}
.bn-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 10px 4px 8px;
  font-size: 10px; color: rgba(200,220,255,0.42);
  cursor: pointer; transition: color 0.15s; user-select: none;
  letter-spacing: 0.05em; gap: 4px;
  border-top: 2px solid transparent;
}
.bn-item:hover { color: rgba(200,220,255,0.7); }
.bn-item.active { color: var(--amber-bright); border-top-color: var(--amber-bright); }
.bn-icon { font-size: 16px; line-height: 1; }
.bn-label { font-size: 10px; }

@media (max-width: 680px) {
  /* Show bottom nav */
  .mobile-bottom-nav { display: flex; }

  /* Hide hamburger topbar */
  .mobile-topbar { display: none !important; }

  /* Hide desktop sidebar */
  .sidebar { display: none !important; }

  /* Add padding so content doesn't hide behind bottom nav */
  .main-scroll { padding-bottom: 80px; }
  .portfolio-shell { padding-bottom: 70px; }
  .portfolio-header { padding: 20px 20px 14px; }
  .posts-tabs-bar { padding: 0 16px; }

  /* Shell fills full height */
  body { overflow: auto; }
  .shell { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .main { flex: none; min-height: 100vh; }
  .main-scroll { overflow: visible; padding: 20px 16px 80px; }

  /* Explorer goes vertical */
  .explorer { flex-direction: column; overflow: visible; }
  .proj-list {
    width: 100% !important; min-width: 0 !important;
    border-right: none; border-bottom: none;
    overflow-y: visible; max-height: none;
  }
  .proj-detail { overflow: visible; padding: 16px 16px 80px; }

  /* Modal full width on mobile */
  .modal-window {
    width: 100vw !important;
    max-height: 90vh !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%) !important;
    border-left: none; border-right: none; border-bottom: none;
    align-self: flex-end;
    border-radius: 0;
  }
  .modal-overlay { align-items: flex-end !important; }

  .section-title { font-size: 24px; }
  .about-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   MODAL — mobile only, slides up from bottom
════════════════════════════════════════ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,7,18,0.82);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }

.modal-window {
  width: 100vw;
  max-height: 90vh;
  background: #0b0f1c;
  border: 1px solid rgba(126,184,247,0.22);
  border-left: none; border-right: none; border-bottom: none;
  display: flex; flex-direction: column;
  position: relative;
  transform: translateY(100%);
  transition: transform 0.32s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 -12px 60px rgba(0,0,0,0.6);
}
.modal-overlay.open .modal-window { transform: translateY(0); }

.modal-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px;
  border-bottom: 1px solid rgba(126,184,247,0.1);
  flex-shrink: 0;
  background: rgba(8,11,18,0.5);
}
.modal-type {
  font-size: 12px; color: var(--amber);
  letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
}
.modal-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: var(--muted); cursor: pointer;
  border: 1px solid rgba(126,184,247,0.15);
  transition: all 0.15s;
}
.modal-close:hover { color: var(--text); border-color: rgba(248,113,113,0.45); background: rgba(248,113,113,0.09); }

.modal-body {
  overflow-y: auto; padding: 24px 22px 40px; flex: 1;
  scrollbar-width: thin; scrollbar-color: rgba(126,184,247,0.15) transparent;
}
.modal-body::-webkit-scrollbar { width: 3px; }
.modal-body::-webkit-scrollbar-thumb { background: rgba(126,184,247,0.15); border-radius: 2px; }

.modal-title { font-size: 22px; font-weight: 600; color: var(--text); line-height: 1.3; margin-bottom: 5px; }
.modal-rule { height: 1px; background: linear-gradient(90deg, rgba(126,184,247,0.22), transparent); margin: 12px 0 16px; }
.modal-desc { font-size: 14px; color: var(--muted); line-height: 1.82; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(126,184,247,0.1); }
.modal-section-label { font-size: 11px; color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.modal-body-text { font-size: 14px; color: rgba(220,232,255,0.72); line-height: 1.9; margin-bottom: 24px; padding-left: 16px; border-left: 1px solid rgba(126,184,247,0.18); }
.modal-tags-label { font-size: 11px; color: var(--amber); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; font-weight: 600; }
.modal-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.modal-tag { font-size: 11px; padding: 4px 12px; border: 1px solid rgba(126,184,247,0.2); color: rgba(168,212,255,0.75); background: rgba(126,184,247,0.04); }
.modal-img-wrap { margin-bottom: 20px; border: 1px solid rgba(126,184,247,0.15); border-radius: 2px; overflow: hidden; }
.modal-img { width: 100%; display: block; max-height: 280px; object-fit: cover; filter: brightness(0.92) saturate(0.85); }
.modal-img-caption { padding: 8px 12px; font-size: 11px; color: var(--dim); background: rgba(126,184,247,0.03); border-top: 1px solid rgba(126,184,247,0.1); }
.modal-post-meta { font-size: 11px; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.modal-post-body p { font-size: 14px; color: rgba(220,232,255,0.75); line-height: 1.9; margin-bottom: 18px; }
.modal-post-body p:last-child { margin-bottom: 0; }

/* Desktop — hide modal, show normal explorer layout */
@media (min-width: 681px) {
  .modal-overlay { display: none !important; }
  .proj-detail { display: flex !important; flex: 1; overflow-y: auto; padding: 28px 36px 48px; }
  .explorer { display: flex !important; }
  .proj-list { width: 210px !important; min-width: 210px !important; border-right: 1px solid rgba(126,184,247,0.1) !important; max-height: none !important; }
  #postList { width: 240px !important; min-width: 240px !important; }
}