.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; display: flex; align-items: center; justify-content: center; animation: fadeIn 0.2s ease-out; backdrop-filter: blur(2px); }
.modal { background: var(--surface); border: 1px solid var(--border); max-width: 440px; width: 90%; padding: 28px 28px 24px; position: relative; animation: fadeInUp 0.25s ease-out; }
.modal-close { position: absolute; top: 12px; right: 14px; font-size: 16px; color: var(--text-dim); cursor: pointer; line-height: 1; transition: color 0.15s ease; }
.modal-close:hover { color: var(--text-bright); }
.modal p { font-size: 11px; line-height: 1.7; color: var(--text); margin-bottom: 10px; }
.modal p:last-child { margin-bottom: 0; }
.modal strong { color: var(--text-bright); font-weight: 600; }
.modal .tagline { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-dim); margin-top: 14px; }

/* bookmarks */
.bm-btn { flex-shrink: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.25; transition: opacity 0.15s ease; }
.bm-btn:hover { opacity: 0.6; }
.bm-btn.saved { opacity: 1; }
.bm-btn svg { width: 12px; height: 12px; }
.saved-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); animation: chipIn 0.2s ease-out both; }
.saved-item:last-child { border-bottom: none; }
.saved-item .saved-info { flex: 1; min-width: 0; }
.saved-item .saved-name { font-size: 11px; color: var(--text-bright); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-item .saved-name a { color: inherit; text-decoration: none; }
.saved-item .saved-name a:hover { text-decoration: underline; }
.saved-item .saved-meta { font-size: 9px; color: var(--text-dim); margin-top: 1px; }
.saved-item .saved-remove { color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 0 4px; transition: color 0.15s ease; }
.saved-item .saved-remove:hover { color: var(--red); }
.saved-empty { font-size: 10px; color: var(--text-dim); text-align: center; padding: 20px 0; }
.modal-list { max-height: 50vh; overflow-y: auto; margin-top: 12px; }

/* LC auth modal — matches luxcache.com login */
.lc-auth-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 100; display: grid; place-items: center; overflow-y: auto; animation: fadeIn 0.15s ease-out; }
.lc-auth-modal { background: #fff; min-width: 300px; max-width: 384px; width: 90vw; border-radius: 4px; padding: 16px 16px 96px; position: relative; animation: fadeInUp 0.2s ease-out; }
.lc-auth-logo { position: absolute; top: 14px; right: 14px; height: 22px; width: auto; pointer-events: none; }
.lc-auth-close { position: absolute; top: 14px; left: 14px; font-size: 18px; color: #a1a1aa; cursor: pointer; line-height: 1; transition: color 0.15s; z-index: 1; }
.lc-auth-close:hover { color: #0a0a0a; }
.lc-auth-inner { max-width: 100%; padding: 12px; margin: 0 auto; display: flex; flex-direction: column; }
.lc-auth-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 16px; color: #0a0a0a; }

/* OAuth buttons */
.lc-auth-oauth { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.lc-auth-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 24px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background 0.15s, box-shadow 0.15s; white-space: nowrap; }
.lc-auth-icon { width: 20px; height: 20px; flex-shrink: 0; }
.lc-auth-discord { background: #5865F2; color: #fff; border: none; height: 40px; padding: 0 32px; }
.lc-auth-discord:hover { background: #4752C4; }
.lc-auth-google { background: #fff; color: #0a0a0a; border: 1px solid #e5e5e7; height: 40px; padding: 0 32px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.lc-auth-google:hover { background: #fafafa; }

/* Separator */
.lc-auth-sep { display: flex; align-items: center; padding: 4px 0; margin: 8px 0; }
.lc-auth-sep-line { flex: 1; border-top: 1px solid #d4d4d8; }
.lc-auth-sep-text { margin: 0 12px; font-size: 14px; line-height: 2; color: #71717a; flex-shrink: 0; }

/* Form */
.lc-auth-form { display: flex; flex-direction: column; gap: 16px; }
.lc-auth-field { display: flex; flex-direction: column; gap: 8px; }
.lc-auth-label { font-size: 14px; font-weight: 500; color: #0a0a0a; }
.lc-auth-input { height: 36px; width: 100%; border-radius: 6px; border: 1px solid #e5e5e7; background: transparent; padding: 16px 12px; font-size: 14px; font-family: inherit; color: #0a0a0a; box-shadow: 0 1px 2px rgba(0,0,0,0.05); outline: none; transition: box-shadow 0.15s; }
.lc-auth-input:focus { box-shadow: 0 0 0 1px #0a0a0a; }
.lc-auth-input::placeholder { color: #a1a1aa; }
.lc-auth-primary { background: #0a0a0a; color: #fafafa; border: none; height: 36px; padding: 0 16px; width: fit-content; }
.lc-auth-primary:hover { background: rgba(10,10,10,0.9); }
.lc-auth-primary:disabled { background: #b5b5b5; color: #4d4d4d; cursor: default; pointer-events: none; }
.lc-auth-error { font-size: 13px; font-weight: 500; color: #ef4444; min-height: 0; }

/* Links */
.lc-auth-links { margin-top: 32px; display: flex; flex-direction: column; gap: 4px; }
.lc-auth-links p { font-size: 14px; color: #0a0a0a; margin: 0; line-height: 1.7; }
.lc-auth-link { text-decoration: underline; cursor: pointer; }