:root{
  --page-bg:#F6F6F5;
  --surface:#FFFFFF;
  --text-strong:#111111;
  --text-body:#4A4A48;
  --text-faint:#9A9A97;
  --hairline:#E4E3E0;
  --hairline-strong:#D3D2CE;
  --chip-bg:#EFEFED;
  --chip-text:#3A3A38;

  --panel:#111111;
  --panel-soft:#1D1D1D;
  --panel-border:#2C2C2C;
  --panel-fg:#FFFFFF;
  --panel-fg-dim:#B8B8B5;
  --panel-fg-faint:#9A9A97;

  --pink:#F472B6;
  --yellow:#FBBF24;
  --blue:#60A5FA;
  --danger:#E24B4A;

  --header-h:60px;
  --footer-h:34px;
}

html[data-theme="dark"]{
  --page-bg:#151517;
  --surface:#1F1F22;
  --text-strong:#F2F2F0;
  --text-body:#C4C3BF;
  --text-faint:#8A8A87;
  --hairline:#302F31;
  --hairline-strong:#3C3B3D;
  --chip-bg:#2A2A2D;
  --chip-text:#D6D5D1;
}

*{box-sizing:border-box; margin:0; padding:0;}
html, body{ height:100%; overflow:hidden; }
body{
  font-family:'Inter', sans-serif;
  background:var(--page-bg);
  color:var(--text-strong);
}

[contenteditable]{ outline:none; }
[contenteditable]:hover{ background:rgba(120,120,120,0.12); border-radius:4px; }
[contenteditable]:focus{ background:rgba(120,120,120,0.12); border-radius:4px; box-shadow:0 0 0 1px var(--hairline-strong); }

/* ===== HEADER ===== */
.site-header{
  position:fixed;
  top:0; left:0; right:0;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 1.5rem;
  z-index:50;
}
.header-logo{ grid-column:2; display:flex; align-items:center; gap:0.55rem; }
.header-logo .logo-mark{ width:26px; height:26px; flex-shrink:0; }
.header-logo .logo-text{
  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.06em;
  color:var(--text-strong);
}
.theme-toggle{
  grid-column:3;
  justify-self:end;
  width:36px; height:36px;
  border-radius:8px;
  border:1px solid var(--hairline);
  background:var(--surface);
  color:var(--text-strong);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.15s;
}
.theme-toggle:hover{ background:var(--chip-bg); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:block; }
.theme-toggle .icon-sun{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-moon{ display:none; }
html[data-theme="dark"] .theme-toggle .icon-sun{ display:block; }

/* ===== LAYOUT ===== */
.layout{
  position:fixed;
  top:var(--header-h);
  bottom:var(--footer-h);
  left:0; right:0;
  display:flex;
}

/* ===== SIDEBAR ===== */
.sidebar{
  width:300px; min-width:300px;
  height:100%;
  background:var(--panel);
  color:var(--panel-fg);
  padding:2rem 1.75rem;
  display:flex;
  flex-direction:column;
  overflow-y:auto;
}
.avatar-wrap{
  width:100%;
  aspect-ratio:1/1;
  flex-shrink:0;
  background:var(--panel-soft);
  border:1px solid var(--panel-border);
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--panel-fg-faint);
  font-family:'IBM Plex Mono', monospace;
  font-size:11px;
  letter-spacing:0.05em;
  margin-bottom:1.2rem;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  text-align:center;
  padding:0.5rem;
}
.avatar-wrap img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.avatar-wrap:hover{ border-color:var(--panel-fg-dim); }

.name{
  font-family:'Fraunces', serif;
  font-size:1.6rem;
  font-weight:500;
  line-height:1.15;
  margin-bottom:0.7rem;
  text-transform:capitalize;
}
.bio{
  font-size:0.84rem;
  line-height:1.55;
  color:var(--panel-fg-dim);
  margin-bottom:1.1rem;
}

.socials{ display:flex; gap:0.55rem; margin-bottom:1.2rem; }
.social-icon{
  width:34px; height:34px;
  border:1px solid var(--panel-border);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  color:var(--panel-fg);
  text-decoration:none;
  transition:background 0.15s, border-color 0.15s;
}
.social-icon:hover{ background:var(--panel-soft); border-color:#4A4A48; }
.social-icon svg{ width:15px; height:15px; }
.social-icon-empty{ border-style:dashed; opacity:0.5; }

.avatar-edit-btn{
  position:absolute;
  bottom:8px; right:8px;
  width:30px; height:30px;
  border-radius:8px;
  border:none;
  background:rgba(0,0,0,0.6);
  color:#fff;
  font-size:0.85rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.avatar-edit-btn:hover{ background:rgba(0,0,0,0.85); }

.crop-modal{ max-width:400px; }
.crop-viewport{
  width:100%;
  max-width:320px;
  aspect-ratio:1/1;
  margin:0 auto;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  background:#111;
  cursor:grab;
  touch-action:none;
}
.crop-viewport.dragging{ cursor:grabbing; }
.crop-viewport img{
  position:absolute;
  top:0; left:0;
  max-width:none;
  user-select:none;
  -webkit-user-drag:none;
  will-change:transform;
}
.crop-zoom-row{
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin-top:1.1rem;
}
.crop-zoom-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
}
.crop-zoom-row input[type="range"]{ flex:1; }

.cta-btn{
  display:block;
  width:100%;
  text-align:center;
  background:var(--panel-fg);
  color:var(--panel);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.83rem;
  padding:0.8rem 1rem;
  border:none;
  border-radius:8px;
  cursor:pointer;
  margin-bottom:1.4rem;
  transition:opacity 0.15s;
  text-transform:capitalize;
}
.cta-btn:hover{ opacity:0.85; }

.section-label{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--panel-fg-faint);
  margin-bottom:0.6rem;
  border-bottom:1px solid var(--panel-border);
  padding-bottom:0.45rem;
}
.nav-list{ display:flex; flex-direction:column; gap:0.3rem; margin-bottom:1.2rem; }
.nav-item{
  background:none;
  border:1px solid transparent;
  color:var(--panel-fg-dim);
  text-align:left;
  font-family:'Inter', sans-serif;
  font-size:0.85rem;
  padding:0.55rem 0.65rem;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:0.45rem;
  transition:all 0.15s;
  text-transform:capitalize;
}
.nav-item:hover{ background:var(--panel-soft); color:var(--panel-fg); }
.nav-item.active{ background:var(--panel-fg); color:var(--panel); }
.nav-item .count{ font-family:'IBM Plex Mono', monospace; font-size:0.7rem; color:var(--panel-fg-faint); }
.nav-item.active .count{ color:var(--text-body); }
.nav-item-label{ flex:1; }
.nav-drag-handle{
  cursor:grab;
  color:var(--panel-fg-faint);
  font-size:0.8rem;
  line-height:1;
  flex-shrink:0;
}
.nav-drag-handle:active{ cursor:grabbing; }
.nav-item.nav-dragging{ opacity:0.35; }

.cv-link{
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid var(--panel-border);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.76rem;
  color:var(--panel-fg);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:0.4rem;
  text-transform:capitalize;
  cursor:pointer;
  background:none;
  border:none;
  width:100%;
  justify-content:flex-start;
}
.cv-link:hover{ color:var(--panel-fg-faint); }

/* ===== MAIN ===== */
.main{
  flex:1;
  height:100%;
  overflow-y:auto;
  padding:2.25rem 2.75rem 3rem;
  position:relative;
}
.main-header{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:1.6rem;
  gap:1rem;
}
.main-header h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.4rem;
  text-transform:capitalize;
}
.add-project-btn{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.82rem;
  background:var(--surface);
  color:var(--text-strong);
  border:1px solid var(--hairline-strong);
  border-radius:8px;
  padding:0.55rem 0.9rem;
  cursor:pointer;
  transition:background 0.15s;
  white-space:nowrap;
}
.add-project-btn:hover{ background:var(--chip-bg); }

.decor-shapes{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.shape{ position:absolute; }
.shape.circle{ border-radius:50%; }
.shape.square{ border-radius:8px; }
.shape.asterisk{ font-family:'Inter', sans-serif; font-weight:700; line-height:1; }

.grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:1.5rem;
  align-items:start;
}
.empty-note{ position:relative; z-index:1; color:var(--text-faint); font-size:0.85rem; padding:2rem 0; }

.card{
  background:var(--surface);
  border-radius:16px;
  box-shadow:0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.18s, box-shadow 0.18s;
  position:relative;
  cursor:pointer;
}
body.admin-mode .card{ cursor:grab; }
.card.dragging-card{ opacity:0.4; cursor:grabbing; }
.card.drag-over-top{ box-shadow:0 -3px 0 0 var(--text-strong), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); }
.card.drag-over-bottom{ box-shadow:0 3px 0 0 var(--text-strong), 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06); }

/* ===== LIGHTBOX ===== */
.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
  padding:2rem;
}
.lightbox-overlay.active{ display:flex; }
.lightbox-card{
  background:var(--surface);
  border-radius:18px;
  width:100%;
  max-width:620px;
  max-height:90vh;
  overflow-y:auto;
  position:relative;
  box-shadow:0 30px 70px rgba(0,0,0,0.4);
}
.lightbox-close{
  position:absolute;
  top:1rem; right:1rem;
  width:34px; height:34px;
  border-radius:8px;
  border:none;
  background:rgba(0,0,0,0.45);
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lightbox-close:hover{ background:rgba(0,0,0,0.7); }

.lightbox-image-wrap{
  width:100%;
  position:relative;
  background:var(--page-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:70vh;
  overflow:hidden;
}
.lightbox-image-wrap img{
  max-width:100%;
  max-height:70vh;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:0 auto;
}

.lightbox-img-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:36px; height:36px;
  border-radius:50%;
  border:none;
  background:rgba(0,0,0,0.45);
  color:#fff;
  font-size:1.1rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2;
}
.lightbox-img-nav:hover{ background:rgba(0,0,0,0.7); }
.lightbox-img-prev{ left:0.7rem; }
.lightbox-img-next{ right:0.7rem; }

.lightbox-dots{
  position:absolute;
  bottom:0.7rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  z-index:2;
}

.lightbox-body{ padding:1.6rem 1.8rem 1.8rem; }
.lightbox-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.4rem;
  text-transform:capitalize;
  margin-bottom:0.6rem;
}
.lightbox-desc{
  font-size:0.92rem;
  color:var(--text-body);
  line-height:1.65;
  margin-bottom:1rem;
}
.lightbox-tags{ display:flex; flex-wrap:wrap; gap:0.4rem; }

.lightbox-project-nav{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.15);
  color:#fff;
  font-size:1.3rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:201;
  transition:background 0.15s;
}
.lightbox-project-nav:hover{ background:rgba(255,255,255,0.3); }
.lightbox-project-prev{ left:1.5rem; }
.lightbox-project-next{ right:1.5rem; }

@media (max-width:700px){
  .lightbox-project-nav{ display:none; }
}
.card:hover{ transform:translateY(-4px); box-shadow:0 4px 8px rgba(0,0,0,0.05), 0 16px 32px rgba(0,0,0,0.09); }

.card-admin-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0.5rem 0.6rem;
  background:var(--page-bg);
  border-bottom:1px solid var(--hairline);
}
.card-admin-bar .card-drag-handle,
.card-admin-bar .card-delete{
  position:static;
  opacity:1;
}
.card-drag-handle{
  width:26px; height:26px;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-faint);
  font-size:0.9rem;
  line-height:1;
  cursor:grab;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-drag-handle:hover{ background:var(--chip-bg); color:var(--text-strong); }
.card-drag-handle:active{ cursor:grabbing; }
.card.dragging{ opacity:0.35; }

.card-delete{
  width:26px; height:26px;
  border-radius:7px;
  border:none;
  background:transparent;
  color:var(--text-faint);
  font-size:0.9rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.card-delete:hover{ background:var(--danger); color:#fff; }

.thumb-empty{
  width:100%;
  aspect-ratio:16/9;
  background:var(--page-bg);
  background-image:
    linear-gradient(45deg, var(--hairline) 25%, transparent 25%),
    linear-gradient(-45deg, var(--hairline) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--hairline) 75%),
    linear-gradient(-45deg, transparent 75%, var(--hairline) 75%);
  background-size:16px 16px;
  background-position:0 0, 0 8px, 8px -8px, -8px 0px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-faint);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  letter-spacing:0.05em;
  cursor:pointer;
}

.thumb-img-wrap{
  width:100%;
  aspect-ratio:16/9;
  position:relative;
  overflow:hidden;
}
.thumb-img-wrap img{
  width:100%;
  height:100%;
  object-fit:cover;
  position:absolute;
  inset:0;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
}

.thumb-gradient{
  position:absolute;
  left:0; right:0; bottom:0;
  height:38px;
  background:linear-gradient(to top, rgba(0,0,0,0.4), transparent);
  z-index:1;
  pointer-events:none;
}
.thumb-dots{
  position:absolute;
  bottom:9px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  z-index:2;
}
.thumb-dot{
  width:6px; height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.5);
  cursor:pointer;
  border:none;
  padding:0;
}
.thumb-dot.active{ background:#ffffff; }

.thumb-admin-controls{
  display:flex;
  gap:0.5rem;
  padding:0.55rem 0.6rem;
  background:var(--page-bg);
  border-bottom:1px solid var(--hairline);
}
.thumb-control-btn{
  border:1px solid var(--hairline-strong);
  background:var(--surface);
  color:var(--text-body);
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  border-radius:6px;
  padding:0.3rem 0.6rem;
  cursor:pointer;
  transition:background 0.15s;
}
.thumb-control-btn:hover{ background:var(--chip-bg); color:var(--text-strong); }
.thumb-remove-btn:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }

.card-body{ padding:1.15rem 1.3rem 1.3rem; display:flex; flex-direction:column; flex:1; }
.card-title{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1rem;
  margin-bottom:0.4rem;
  text-transform:capitalize;
}
.card-desc{
  font-size:0.83rem;
  color:var(--text-body);
  line-height:1.55;
  margin-bottom:0.8rem;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.card-cat{ margin-bottom:0.8rem; }
.card-cat-label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.62rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:0.4rem;
}
.cat-chips{ display:flex; flex-wrap:wrap; gap:0.35rem; align-items:center; }
.cat-chip{
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  color:var(--surface);
  background:var(--text-strong);
  border:1px solid var(--text-strong);
  border-radius:20px;
  padding:0.3rem 1.35rem 0.3rem 0.7rem;
  position:relative;
  display:inline-flex;
  align-items:center;
}
.cat-chip-remove{
  position:absolute;
  right:0.55rem;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  font-size:0.8rem;
  line-height:1;
  color:var(--surface);
  opacity:0.75;
}
.cat-chip-remove:hover{ opacity:1; }
.cat-chip-add{
  font-family:'Inter', sans-serif;
  font-size:0.72rem;
  color:var(--text-faint);
  background:none;
  border:1px dashed var(--hairline-strong);
  border-radius:20px;
  padding:0.3rem 0.7rem;
  cursor:pointer;
  transition:all 0.15s;
}
.cat-chip-add:hover{ color:var(--text-strong); border-color:var(--text-faint); }
.tags{ display:flex; flex-wrap:wrap; gap:0.4rem; margin-top:auto; align-items:center; }
.tag{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.65rem;
  letter-spacing:0.02em;
  background:var(--chip-bg);
  color:var(--chip-text);
  padding:0.3rem 0.58rem;
  border-radius:6px;
  position:relative;
  padding-right:1.35rem;
}
.tag .tag-remove{
  position:absolute;
  right:0.35rem;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  color:var(--text-faint);
  font-size:0.7rem;
}
.tag .tag-remove:hover{ color:var(--danger); }
.tag-add{
  font-family:'IBM Plex Mono', monospace;
  font-size:0.65rem;
  color:var(--text-faint);
  background:none;
  border:1px dashed var(--hairline-strong);
  border-radius:6px;
  padding:0.28rem 0.5rem;
  cursor:pointer;
}
.tag-add:hover{ color:var(--text-strong); border-color:var(--text-faint); }

/* ===== FOOTER ===== */
.site-footer-bar{
  position:fixed;
  left:0; right:0; bottom:0;
  height:var(--footer-h);
  background:var(--panel);
  border-top:1px solid var(--panel-border);
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 1.5rem;
}
.site-footer-bar p{ font-size:0.68rem; color:var(--panel-fg-dim); font-family:'Inter', sans-serif; }
.site-footer-bar .credit{ font-family:'IBM Plex Mono', monospace; font-size:0.62rem; letter-spacing:0.02em; color:var(--panel-fg-faint); }
.footer-right{ display:flex; align-items:center; gap:0.9rem; }
.admin-link{
  background:none;
  border:none;
  color:var(--panel-fg-faint);
  font-family:'IBM Plex Mono', monospace;
  font-size:0.68rem;
  cursor:pointer;
  padding:0.2rem 0.3rem;
  transition:color 0.15s;
}
.admin-link:hover{ color:var(--panel-fg); }

/* ===== MODALS ===== */
.modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,10,10,0.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:100;
  padding:1.5rem;
}
.modal-overlay.active{ display:flex; }
.modal{
  background:var(--surface);
  border-radius:16px;
  width:100%;
  max-width:420px;
  padding:2rem;
  position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.modal-close{
  position:absolute;
  top:1.1rem; right:1.1rem;
  width:32px; height:32px;
  border:none;
  background:var(--page-bg);
  border-radius:8px;
  font-size:1.1rem;
  line-height:1;
  color:var(--text-body);
  cursor:pointer;
}
.modal-close:hover{ background:var(--chip-bg); color:var(--text-strong); }
.modal h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.25rem;
  text-transform:capitalize;
  margin-bottom:1.3rem;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:0.9rem; }
.form-group{ margin-bottom:1rem; }
.form-group label{
  display:block;
  font-family:'IBM Plex Mono', monospace;
  font-size:0.66rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:0.35rem;
}
.form-group input, .form-group textarea{
  width:100%;
  font-family:'Inter', sans-serif;
  font-size:0.9rem;
  color:var(--text-strong);
  background:var(--page-bg);
  border:1px solid var(--hairline-strong);
  border-radius:8px;
  padding:0.6rem 0.7rem;
  resize:vertical;
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--text-strong); background:var(--surface); }
.send-btn{
  width:100%;
  background:var(--text-strong);
  color:var(--surface);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:0.88rem;
  border:none;
  border-radius:8px;
  padding:0.8rem 1rem;
  cursor:pointer;
  margin-top:0.3rem;
  transition:opacity 0.15s;
}
.send-btn:hover{ opacity:0.85; }
.form-note{ font-size:0.72rem; color:var(--text-faint); margin-top:0.75rem; text-align:center; }

.pdf-modal .modal{ max-width:1000px; width:92vw; padding:1.5rem; }
.pdf-frame-wrap{
  width:100%;
  height:85vh;
  border-radius:10px;
  overflow:hidden;
  border:1px solid var(--hairline-strong);
  margin-top:0.5rem;
}
.pdf-frame-wrap iframe{ width:100%; height:100%; border:none; }
.pdf-empty{
  height:30vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-faint);
  font-size:0.85rem;
  border:1px dashed var(--hairline-strong);
  border-radius:10px;
  margin-top:0.5rem;
}

@media (max-width:900px){
  html, body{ overflow:auto; }
  .layout{ position:static; flex-direction:column; }
  .site-header{ position:fixed; }
  .sidebar{ width:100%; height:auto; padding-top:calc(var(--header-h) + 1.5rem); }
  .main{ height:auto; overflow:visible; padding:1.5rem 1.25rem 3rem; }
  .site-footer-bar{ padding:0 1.25rem; }
}

/* ===== ADMIN-ONLY UI (hidden for visitors) ===== */
body:not(.admin-mode) .card-delete,
body:not(.admin-mode) .card-drag-handle,
body:not(.admin-mode) .add-project-btn,
body:not(.admin-mode) .thumb-add-btn,
body:not(.admin-mode) .thumb-remove-btn,
body:not(.admin-mode) .tag-remove,
body:not(.admin-mode) .tag-add,
body:not(.admin-mode) .cat-chip,
body:not(.admin-mode) .cover-picker,
body:not(.admin-mode) #resumeUploadBtn{
  display:none !important;
}
body:not(.admin-mode) [contenteditable]{
  pointer-events:none;
}
body:not(.admin-mode) .card-cat{ display:none; }
#adminLogoutBtn{ display:none; }
body.admin-mode #adminLoginBtn{ display:none; }
body.admin-mode #adminLogoutBtn{ display:inline-block; }
body:not(.admin-mode) #avatarWrap{ cursor:default; pointer-events:none; }

/* ===== COVER IMAGE PICKER ===== */
.cover-picker{
  display:flex;
  flex-wrap:wrap;
  gap:0.4rem;
  padding:0.7rem 1.3rem 0;
}
.cover-thumb{
  width:42px; height:42px;
  border-radius:6px;
  overflow:hidden;
  position:relative;
  cursor:pointer;
  border:2px solid transparent;
  padding:0;
  background:var(--page-bg);
}
.cover-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cover-thumb.active{ border-color:var(--text-strong); }
.cover-check{
  position:absolute;
  top:1px; right:1px;
  width:14px; height:14px;
  border-radius:50%;
  background:var(--text-strong);
  color:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  line-height:1;
}