/* Notifications */
.notif-wrap{position:relative;display:flex;align-items:center}
.notif-btn{position:relative;padding:7px 9px;border:1px solid var(--border);background:none;border-radius:3px;cursor:pointer;color:var(--muted);display:flex;align-items:center;line-height:0;transition:all .2s}
.notif-btn:hover{border-color:#444;color:var(--text)}
.notif-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;background:var(--accent);border-radius:8px;font-size:9px;color:#fff;display:none;align-items:center;justify-content:center;padding:0 3px;font-family:'DM Sans',sans-serif;font-weight:500}
.notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:300px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;z-index:400;display:none;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.notif-panel.open{display:block}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--border)}
.notif-header>span{font-size:12px;color:var(--text);font-weight:500;letter-spacing:.5px}
.notif-mark-all{background:none;border:none;font-size:11px;color:var(--muted);cursor:pointer;font-family:'DM Sans',sans-serif;padding:0;transition:color .2s}
.notif-mark-all:hover{color:var(--text)}
.notif-list{max-height:360px;overflow-y:auto}
.notif-item{display:flex;align-items:flex-start;gap:10px;width:100%;padding:12px 16px;border:0;border-bottom:1px solid var(--border);background:none;color:inherit;text-align:left;font-family:'DM Sans',sans-serif;cursor:pointer;transition:background .2s}
.notif-item:last-child{border-bottom:none}
.notif-item:hover{background:var(--bg3)}
/* unread — highlighted */
.notif-item.unread{background:rgba(200,121,65,.07)}
.notif-item.unread:hover{background:rgba(200,121,65,.13)}
/* read — visibly dimmed so user can tell at a glance */
.notif-item:not(.unread){opacity:.55}
.notif-item:not(.unread):hover{opacity:.8;background:var(--bg3)}
/* dot indicator for unread */
.notif-dot{flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-top:5px}
.notif-content{flex:1;min-width:0}
.notif-ntitle{font-size:12px;color:var(--text);margin-bottom:3px;line-height:1.4}
.notif-item.unread .notif-ntitle{color:var(--white);font-weight:500}
.notif-nbody{font-size:11px;color:var(--muted);margin-bottom:4px;line-height:1.4;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.notif-ntime{font-size:10px;color:var(--dim)}
.notif-empty{padding:24px 16px;text-align:center;font-size:12px;color:var(--dim);font-style:italic}
.notif-view-all{display:block;padding:10px 16px;font-size:11px;color:var(--accent);text-align:center;text-decoration:none;border-top:1px solid var(--border);transition:background .2s}
.notif-view-all:hover{background:var(--bg3)}
.notif-toast{position:fixed;bottom:28px;right:28px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:12px 18px;font-size:13px;color:var(--text);z-index:9999;transform:translateY(20px);opacity:0;transition:transform .3s,opacity .3s;pointer-events:none;max-width:300px;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.notif-toast.show{transform:translateY(0);opacity:1}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible){
  outline:none;
}

html[data-theme="light"] {
  --bg: #f7f4ef;
  --bg2: #efe9e1;
  --bg3: #e6e0d6;
  --border: #d0c8bb;
  --text: #1a1a1a;
  --muted: #888;
  --dim: #bbb;
  --accent: #c87941;
  --white: #111;
}
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
/* Hero always has a dark background — keep text light regardless of theme */
html[data-theme="light"] .ht { color: #f0ece4; }
html[data-theme="light"] .hs { color: #b8b4ac; }
html[data-theme="light"] .btn-solid { background: #111; color: #f7f4ef; }
html[data-theme="light"] nav { background: var(--bg); border-bottom-color: var(--border); }

html[data-theme="light"] input:not([type="file"]):not([type="range"]),
html[data-theme="light"] textarea,
html[data-theme="light"] select {
  background: var(--bg3) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
html[data-theme="light"] .field-prefix span {
  background: var(--bg2) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}

/* ── Auth modal: always dark regardless of theme ─────────────────── */
html[data-theme="light"] .modal { background:#111; border-color:#1e1e1e; }
html[data-theme="light"] .modal-title  { color:#f0ece4; }
html[data-theme="light"] .modal-sub    { color:#8a8a8a; }
html[data-theme="light"] .modal-close  { color:#8a8a8a; }
html[data-theme="light"] .tabs-row     { border-color:#1e1e1e; }
html[data-theme="light"] .tab-btn      { color:#8a8a8a; }
html[data-theme="light"] .tab-btn.active { color:#d8d4cc; border-bottom-color:#c87941; }
html[data-theme="light"] .modal .field label { color:#8a8a8a; }
html[data-theme="light"] .modal .field input {
  background:#080808 !important;
  border-color:#1e1e1e !important;
  color:#d8d4cc !important;
}
html[data-theme="light"] .modal .field input:focus { border-color:#333 !important; }
html[data-theme="light"] .btn-cta  { background:#f0ece4 !important; color:#0b0b0b !important; }
html[data-theme="light"] .forgot-link { color:#8a8a8a; }
html[data-theme="light"] .oauth-sep { color:#7a7a7a; }
html[data-theme="light"] .oauth-sep::before,
html[data-theme="light"] .oauth-sep::after { background:#1e1e1e; }
html[data-theme="light"] .btn-google { border-color:#1e1e1e; color:#8a8a8a; background:none; }
html[data-theme="light"] .btn-google:hover { border-color:#444; color:#d8d4cc; background:#141414; }
html[data-theme="light"] .modal .policy-consent { color:#b8b4ac; }
html[data-theme="light"] .modal .policy-consent a { color:#d8d4cc; border-bottom-color:#8a8a8a; }
html[data-theme="light"] .modal .policy-consent a:hover { color:#f0ece4; border-bottom-color:#c87941; }

/* ── Takeover modal: always dark regardless of theme ─────────────── */
html[data-theme="light"] .tk-modal { background:#111 !important; border-color:#1e1e1e !important; color:#d8d4cc; }
html[data-theme="light"] .tk-modal input,
html[data-theme="light"] .tk-modal textarea {
  background:#0f0f0f !important;
  color:#d8d4cc !important;
  border-color:#1e1e1e !important;
}
html[data-theme="light"] .tk-modal input:focus,
html[data-theme="light"] .tk-modal textarea:focus { border-color:#333 !important; }
html[data-theme="light"] .pkg-card        { border-color:#1e1e1e; }
html[data-theme="light"] .pkg-card:hover  { background:#1a1a1a !important; border-color:#333; }
html[data-theme="light"] .pkg-card.sel    { background:rgba(200,121,65,.1) !important; border-color:#c87941; }
html[data-theme="light"] .tk-row          { border-bottom-color:#1a1a1a; color:#d8d4cc; }
html[data-theme="light"] .tk-back         { color:#8a8a8a; }
html[data-theme="light"] .tk-back:hover   { color:#d8d4cc; }
html[data-theme="light"] .tk-modal .policy-consent { color:#b8b4ac; }
html[data-theme="light"] .tk-modal .policy-consent a { color:#d8d4cc; border-bottom-color:#8a8a8a; }
html[data-theme="light"] .tk-modal .policy-consent a:hover { color:#f0ece4; border-bottom-color:#c87941; }

/* ── Contributor upload modal: always dark regardless of theme ───── */
html[data-theme="light"] #upload-modal .modal-box {
  background:#0f0f0f !important;
  border-color:#1e1e1e !important;
  color:#d8d4cc !important;
}
html[data-theme="light"] #upload-modal .modal-title { color:#f0ece4 !important; }
html[data-theme="light"] #upload-modal .modal-close { color:#8a8a8a !important; }
html[data-theme="light"] #upload-modal .field label { color:#8a8a8a !important; }
html[data-theme="light"] #upload-modal .field input,
html[data-theme="light"] #upload-modal .field textarea {
  background:#080808 !important;
  color:#d8d4cc !important;
  border-color:#1e1e1e !important;
}
html[data-theme="light"] #upload-modal .drop-zone {
  border-color:#1e1e1e !important;
  background:transparent !important;
}
html[data-theme="light"] #upload-modal .dz-text { color:#8a8a8a !important; }
html[data-theme="light"] #upload-modal .tag-pill {
  color:#7a7a7a !important;
  border-color:#1e1e1e !important;
  background:none !important;
}
html[data-theme="light"] #upload-modal .tag-pill:hover { color:#d8d4cc !important; border-color:#333 !important; }
html[data-theme="light"] #upload-modal .tag-pill.sel {
  background:rgba(200,121,65,.12) !important;
  border-color:#c87941 !important;
  color:#c87941 !important;
}
html[data-theme="light"] #upload-modal [style*="color:var(--dim)"] { color:#555 !important; }
html[data-theme="light"] #upload-modal [style*="color:var(--muted)"] { color:#7a7a7a !important; }

/* ── Mobile hamburger menu ─────────────────────────────────────── */
.mobile-menu-btn{display:none;border:1px solid var(--border);background:none;color:var(--muted);border-radius:3px;width:38px;height:38px;padding:0;align-items:center;justify-content:center;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .2s,color .2s}
.mobile-menu-btn:hover{border-color:var(--muted);color:var(--text)}
.mobile-menu-btn span{width:16px;height:1.5px;background:currentColor;border-radius:2px;display:block}
.mobile-menu-scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);border:0;z-index:650;cursor:pointer}
.mobile-menu{position:fixed;top:0;right:0;width:min(320px,86vw);height:100vh;background:var(--bg2);border-left:1px solid var(--border);z-index:700;transform:translateX(calc(100% + 48px));transition:transform .22s ease,box-shadow .22s ease;box-shadow:none;display:flex;flex-direction:column}
.mobile-menu.open{transform:translateX(0);box-shadow:-18px 0 40px rgba(0,0,0,.32)}
.mobile-menu.open + *{}
.mobile-menu-open .mobile-menu-scrim{display:block}
.mobile-menu-open{overflow:hidden}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--border);font-family:'Playfair Display',serif;font-size:20px;color:var(--white)}
.mobile-menu-close{width:34px;height:34px;border:1px solid var(--border);background:none;color:var(--muted);border-radius:3px;font-size:20px;line-height:1;cursor:pointer}
.mobile-menu-close:hover{border-color:var(--muted);color:var(--text)}
.mobile-menu-list{display:flex;flex-direction:column;padding:10px 0}
.mobile-menu-link{display:block;width:100%;padding:14px 20px;background:none;border:0;border-bottom:1px solid var(--border);text-align:left;color:var(--text);text-decoration:none;font-family:'DM Sans',sans-serif;font-size:15px;cursor:pointer}
.mobile-menu-link:hover{background:var(--bg3);color:var(--white)}
.mobile-menu-section{padding:18px 20px 8px;font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:var(--dim)}
.mobile-menu-link.danger{color:#9a4b4b}
.mobile-menu-link.danger:hover{color:#c47a7a}

/* ── Mobile header: keep logo + actions usable on narrow screens ── */
@media (max-width: 980px) {
  nav {
    padding: 12px 16px !important;
    gap: 12px !important;
    min-height: 56px !important;
    overflow: visible !important;
  }

  nav .logo,
  nav > a:first-child {
    flex: 0 0 auto !important;
  }

  nav .logo img,
  nav > a:first-child img {
    height: 30px !important;
  }

  nav .nl,
  nav .nav-links {
    display: none !important;
  }

  nav .mobile-menu-btn {
    display: inline-flex !important;
    flex: 0 0 38px !important;
    order: 99 !important;
  }

  nav .nr {
    margin-left: auto !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }

  nav .nr > button,
  nav .nr > a,
  nav #theme-btn,
  nav .notif-btn {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
  }

  nav .nr .btn-solid,
  nav .nr .btn-ghost {
    width: auto !important;
    min-width: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
  }

  nav .nav-user {
    display: none !important;
  }

  nav .nav-dropdown {
    right: 0 !important;
    min-width: 210px !important;
    max-width: calc(100vw - 24px) !important;
  }

  .notif-panel {
    position: fixed !important;
    top: 60px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-height: calc(100vh - 84px) !important;
  }
}

@media (max-width: 420px) {
  nav {
    padding: 10px 12px !important;
  }

  nav .nr {
    gap: 6px !important;
  }

  nav .nr .btn-ghost:not(#theme-btn):not(.notif-btn) {
    display: none !important;
  }
}