/* =========================
   Robert Lo — Global Styles
   ========================= */
:root {
  --bg:#121212; --card:#1b1b1b; --panel:#161616; --border:#242424;
  --muted:#8a8a8a; --accent:#3498db; --text:#fff;
  --radius:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
[hidden]{display:none !important}

/* Base */
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
  background:var(--bg); color:var(--text);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:focus-visible{outline:3px solid #7aa2ff; outline-offset:2px; border-radius:8px}
@media (prefers-reduced-motion: reduce){*{transition:none !important; animation:none !important}}

/* Layout */
main{display:grid; grid-template-columns:320px 1fr; gap:32px; max-width:1200px; margin:40px auto; padding:0 20px;}
@media (max-width:920px){ main{grid-template-columns:1fr} }
.separator{height:1px; background:#2a2a2a; margin:16px 0}

/* Sidebar */
.sidebar{position:sticky; top:24px; align-self:start; background:var(--card); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow)}
.sidebar .avatar-box{width:96px; height:96px; border-radius:12px; overflow:hidden; margin:0}
.sidebar .avatar-box img{width:100%; height:100%; object-fit:cover; display:block}
.info-content{margin-top:16px}
.name{margin:0; font-size:1.6rem; line-height:1.2}
.title{margin:6px 0 0; color:var(--muted)}
.info_more-btn{margin-top:16px; width:100%; padding:10px 12px; border-radius:10px; border:none; background:#262626; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px}
.contacts-list,.social-list{list-style:none; padding:0; margin:0}
.contacts-list{display:grid; gap:14px}
.contact-item{display:flex; gap:12px; align-items:flex-start}
.icon-box{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#262626}
.contact-title{margin:0; color:var(--muted); font-size:.9rem}
.contact-link,address,time{color:#ddd; text-decoration:none}
.social-list{display:flex; gap:10px; margin-top:10px}
.social-link{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:#262626; color:#fff}

/* Navbar */
.main-content{min-width:0}
.navbar{background:var(--card); border-radius:var(--radius); padding:8px; display:flex; justify-content:center; margin-bottom:24px}
.navbar-list{display:flex; gap:8px; list-style:none; padding:0; margin:0; flex-wrap:wrap; justify-content:center}
.navbar-link{background:#262626; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer}
.navbar-link.active{background:var(--accent); color:#000; font-weight:600}

/* Pages */
article{display:none; background:var(--card); border-radius:var(--radius); padding:24px}
article.active{display:block}
.h2.article-title{margin:0 0 12px}
.about-text p{color:#ddd}

/* Services */
.service-title{margin:24px 0 12px}
.service-list{list-style:none; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; padding:0; margin:0}
.service-item{display:flex; gap:12px; padding:14px; background:var(--panel); border:1px solid var(--border); border-radius:12px}
.service-icon-box{width:40px; height:40px; display:grid; place-items:center; font-size:22px; background:#202020; border-radius:10px}

/* Resume */
.timeline .title-wrapper{display:flex; align-items:center; gap:10px}
.timeline-list{list-style:none; padding:0; margin:12px 0 0; display:grid; gap:12px}
.timeline-item{padding:14px; background:var(--panel); border:1px solid var(--border); border-radius:12px}
.timeline-item .h4{margin:0 0 4px}
.timeline-text{color:#cfcfcf}

/* Skills */
.skills-title{margin:24px 0 8px}
.skills-list{list-style:none; padding:0; margin:0; display:grid; gap:12px}
.skills-item{background:var(--panel); border:1px solid var(--border); border-radius:12px; padding:12px}
.title-wrapper{display:flex; justify-content:space-between; align-items:center}
.skill-progress-bg{height:8px; background:#2a2a2a; border-radius:999px; overflow:hidden; margin-top:8px}
.skill-progress-fill{height:100%; background:var(--accent)}

/* Portfolio */
.projects{display:grid; gap:16px}
.filter-list{list-style:none; display:flex; gap:8px; padding:0; margin:0 0 8px}
.filter-item button{background:#262626; color:#fff; border:none; padding:8px 12px; border-radius:10px; cursor:pointer}
.filter-item .active{background:var(--accent); color:#000}
.filter-select-box{display:flex; gap:8px; align-items:center}
.filter-select{display:flex; align-items:center; gap:8px; background:#262626; color:#fff; border:none; padding:8px 12px; border-radius:10px; cursor:pointer}
.select-list{list-style:none; padding:8px; margin:8px 0 0; background:var(--panel); border:1px solid var(--border); border-radius:12px}
.project-list{list-style:none; padding:0; margin:8px 0 0; display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.project-item{background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.project-img{position:relative; margin:0}
.project-img img{display:block; width:100%; height:180px; object-fit:cover}
.project-item-icon-box{position:absolute; top:10px; right:10px; width:36px; height:36px; display:grid; place-items:center; background:rgba(0,0,0,.5); border-radius:10px}
.project-title{margin:10px 12px 0}
.project-category{margin:6px 12px 12px; color:var(--muted)}
/* Dropdown positioning (Portfolio) */
.filter-select-box{position:relative}
.select-list{
  position:absolute; top:100%; left:0;
  z-index:50; min-width:220px;
  box-shadow:0 10px 20px rgba(0,0,0,.35);
}
.filter-select[aria-expanded="true"] + .select-list{display:block}


/* Blog */
.blog-posts-list{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px}
.blog-post-item{background:var(--panel); border:1px solid var(--border); border-radius:12px; overflow:hidden}
.blog-banner-box img{width:100%; height:180px; object-fit:cover; display:block}
.blog-content{padding:12px}
.blog-meta{display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.9rem}
.blog-text{color:#ddd}

/* Contact */
.mapbox iframe{width:100%; border:0; border-radius:12px}
.contact-form .form{display:grid; gap:12px}
.input-wrapper{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:520px){ .input-wrapper{grid-template-columns:1fr} }
.form-input{width:100%; background:var(--panel); border:1px solid var(--border); color:#fff; padding:12px; border-radius:10px}
.form-btn{display:inline-flex; align-items:center; gap:8px; border:none; background:var(--accent); color:#000; padding:10px 14px; border-radius:10px; cursor:pointer}

/* Molecule widget */
#molecule-widget{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  width:300px; height:300px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(27,27,27,.78), rgba(22,22,22,.78));
  box-shadow:0 12px 30px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  z-index:999; overflow:hidden; color:#eaf2ff;
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,Helvetica,sans-serif;
}
#molecule-widget canvas{width:100%; height:100%; display:block}
#molecule-widget .mw-tag{
  position:absolute; left:10px; top:10px;
  font:600 12px/1.2 Poppins, system-ui, sans-serif;
  color:#9cc8ff; letter-spacing:.02em;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  padding:6px 8px; border-radius:8px; user-select:none;
}
#molecule-widget .mw-ctrl{position:absolute; right:10px; top:10px; display:flex; gap:6px}
#molecule-widget .mw-btn{
  width:28px; height:28px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#eaf2ff; font-size:13px; cursor:pointer;
}
#molecule-widget .mw-btn:focus-visible{outline:3px solid #7aa2ff; outline-offset:2px}
@media (max-width:920px){ #molecule-widget{display:none} }