:root {
  /* Colors */
  --color-link: #0066cc;
  --color-link-hover-shadow: rgba(0,102,204,0.1);
  --color-link-hover-bg: #f0f6ff;
  --color-text: #333;
  --color-text-muted: #666;
  --color-text-light: #888;
  --color-text-faint: #999;
  --color-border: #ddd;
  --color-border-light: #eee;
  --color-border-input: #ccc;
  --color-bg: #fff;
  --color-bg-btn: #f5f5f5;
  --color-bg-btn-hover: #e5e5e5;
  --color-success: #2a2;
  --color-error: #c22;
  --color-shadow: rgba(0,0,0,0.1);

  /* Font sizes */
  --text-xs: 0.75em;
  --text-sm: 0.8em;
  --text-base: 0.85em;
  --text-md: 0.9em;
  --text-lg: 1.1em;
}

body { font-family: system-ui, sans-serif; max-width: 1100px; margin: 2rem auto; padding: 0 1rem; }
header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
header h1 { margin: 0; }
header h1 a { color: inherit; text-decoration: none; }
header h1 a:hover { text-decoration: underline; }
header nav { flex: 1; margin-left: 1.5rem; }
header nav a { color: var(--color-link); text-decoration: none; font-size: var(--text-md); }
header nav a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--color-text-light); font-weight: normal; margin: 0 0.1em; }
#auth-container { font-size: var(--text-md); display: flex; align-items: center; gap: 0.5rem; margin-right: max(0px, calc(100% - 200px - 2rem - 800px)); }
#auth-container a { color: var(--color-link); text-decoration: none; cursor: pointer; }
#auth-container a:hover { text-decoration: underline; }
#signin-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.15); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 80px;
}
#signin-panel {
  width: 340px; background: var(--color-bg); border: 1px solid var(--color-border-input);
  border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  font-family: system-ui, sans-serif; font-size: 14px; color: var(--color-text);
}
.signin-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: 1px solid var(--color-border-light);
}
.signin-header strong { font-size: 15px; }
.signin-close { cursor: pointer; font-size: 20px; color: var(--color-text-light); line-height: 1; background: none; border: none; }
.signin-close:hover { color: var(--color-text); }
.signin-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.signin-body label { font-size: 12px; color: var(--color-text-muted); }
.signin-body input { width: 100%; padding: 6px 8px; font-size: 14px; border: 1px solid var(--color-border-input); border-radius: 4px; box-sizing: border-box; }
.signin-body .password-wrap { position: relative; }
.signin-body .password-wrap input { padding-right: 2rem; }
.password-toggle { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--color-text-light); line-height: 0; }
.password-toggle:hover { color: var(--color-text); }
.signin-body button { padding: 8px; font-size: 14px; cursor: pointer; border: 1px solid var(--color-border-input); border-radius: 4px; background: var(--color-bg-btn); width: 100%; }
.signin-body button:hover { background: var(--color-bg-btn-hover); }
#auth-status { font-size: 13px; text-align: center; min-height: 1.2em; }
#auth-status.status-error { color: var(--color-error); }
#links { list-style: none; padding: 0; }
#link-count { color: var(--color-text-muted); font-size: var(--text-md); margin-right: auto; }
.link-anchor { text-decoration: none; color: inherit; }
.link {
  margin: 0.75rem 0;
  padding: 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.link:hover { border-color: var(--color-link); box-shadow: 0 2px 8px var(--color-link-hover-shadow); }
.card-body { display: flex; align-items: stretch; gap: 0.5rem; }
.card-rating { display: flex; flex-direction: column; align-items: center; justify-content: space-between; flex-shrink: 0; width: 1.5rem; padding: 0.1rem 0; }
.card-rating .rate-up, .card-rating .rate-down { cursor: pointer; font-size: 0.9em; opacity: 0.6; transition: opacity 0.15s; }
.card-rating .rate-up:hover, .card-rating .rate-down:hover { opacity: 1; }
.card-rating .rating-value { font-size: var(--text-sm); text-align: center; }
.card-rating .rating-value.positive { color: #e22; }
.card-rating .rating-value.negative { color: var(--color-text-light); }
.card-rating .rating-value.zero { color: var(--color-text-faint); }
.card-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.card-thumb { flex-shrink: 0; width: 120px; margin: -0.75rem -0.75rem -0.75rem 0; overflow: hidden; border-radius: 0 6px 6px 0; }
.card-thumb:has(+ .card-actions) { margin-right: 0; border-radius: 0; }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.link .title-row { position: relative; }
.link .title { color: var(--color-link); font-size: var(--text-lg); font-weight: 500; }
.meta-line { color: var(--color-text-light); font-size: var(--text-sm); margin: 0.15rem 0; }
.card-actions { display: flex; flex-direction: column; justify-content: space-between; align-items: center; flex-shrink: 0; padding: 0.1rem 0; opacity: 0; transition: opacity 0.15s; }
.link:hover .card-actions { opacity: 0.5; }
.card-actions:hover { opacity: 1 !important; }
.card-edit-btn, .card-delete-btn { cursor: pointer; font-size: var(--text-sm); }
.card-edit-btn:hover, .card-delete-btn:hover { opacity: 1; }
.link.editing .card-actions { display: none; }
.edit-title-input, .edit-tags-input {
  font-size: var(--text-md); padding: 0.2rem 0.5rem;
  border: 1px solid var(--color-link); border-radius: 4px;
  width: 80%; max-width: 500px; box-sizing: border-box;
}
.edit-card-actions {
  display: flex; flex-direction: column; gap: 0.3rem; flex-shrink: 0;
  align-items: stretch; justify-content: center;
}
.edit-card-actions button {
  font-size: var(--text-sm); padding: 0.25rem 0.6rem; cursor: pointer;
  border: 1px solid var(--color-border-input); border-radius: 4px; background: var(--color-bg-btn);
  white-space: nowrap;
}
.edit-card-actions button:hover { background: var(--color-bg-btn-hover); }
.edit-card-actions .vote-delete-btn { color: var(--color-error); border-color: var(--color-error); }
.edit-card-actions .vote-delete-btn:hover { background: #fee; }
.link .notes { color: #555; font-size: var(--text-md); margin: 0.15rem 0; font-style: italic; }
.link .card-bottom { display: flex; justify-content: flex-start; margin-top: auto; }
.link .tag { color: var(--color-text-muted); font-size: var(--text-base); cursor: pointer; }
.link .tag:hover { text-decoration: underline; color: var(--color-link); }
.empty { color: var(--color-text-faint); font-style: italic; }
footer { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--color-border-light); font-size: var(--text-base); color: var(--color-text-muted); display: flex; justify-content: space-between; }
footer a { color: var(--color-text-muted); }
#version { font-size: var(--text-xs); color: var(--color-text-faint); }
#filter-bar { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
#search-input { padding: 0.35rem 0.5rem; font-size: var(--text-md); border: 1px solid var(--color-border-input); border-radius: 4px; width: 14rem; }
#sort-controls { font-size: var(--text-md); }
#sort-controls select { padding: 0.25rem; font-size: var(--text-md); }
#time-filter-controls { font-size: var(--text-md); }
#time-filter-controls select { padding: 0.25rem; font-size: var(--text-md); }

/* Tag hover menu */
.tag-wrap { position: relative; display: inline-block; }
.tag-menu {
  display: none; position: absolute; left: 0; top: 100%;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px;
  box-shadow: 0 2px 8px var(--color-shadow); z-index: 100; white-space: nowrap;
}
.tag-wrap:hover .tag-menu { display: block; }
.tag-menu span { display: block; padding: 0.4rem 0.6rem; color: var(--color-text); cursor: pointer; }
.tag-menu span:hover { background: var(--color-link-hover-bg); }

/* Add tag button and input */
.add-tag-btn {
  color: var(--color-text-faint); font-size: var(--text-base); cursor: pointer;
  background: none; border: 1px solid var(--color-border); border-radius: 4px;
  padding: 0 0.4rem; margin-left: 0.5rem; line-height: 1.4;
}
.add-tag-btn:hover { color: var(--color-link); border-color: var(--color-link); }

.add-tag-input, .rename-tag-input {
  font-size: var(--text-base); padding: 0.1rem 0.4rem;
  border: 1px solid var(--color-link); border-radius: 4px;
  width: 8rem;
}
.add-tag-input { margin-left: 0.5rem; }

/* Content wrapper and tag sidebar */
#content-wrapper { display: flex; gap: 2rem; }
#main-content { flex: 1; min-width: 0; max-width: 800px; }
#links { }
#tag-sidebar {
  width: 200px; flex-shrink: 0; font-size: var(--text-sm);
  padding-top: 0.75rem; position: relative;
}
#tag-sidebar .sidebar-tag { display: block; margin-bottom: 0.3rem; cursor: pointer; }
#tag-sidebar .sidebar-tag:hover .tag { text-decoration: underline; color: var(--color-link); }
#tag-sidebar .sidebar-count { color: var(--color-text-light); margin-left: 0.3rem; }
#tag-sidebar .sidebar-menu {
  display: none; position: absolute; left: 0;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px;
  box-shadow: 0 2px 8px var(--color-shadow); z-index: 100; white-space: nowrap;
}
#tag-sidebar .sidebar-pseudo { margin-bottom: 0.5rem; }
#tag-sidebar .sidebar-menu.open { display: block; }
#tag-sidebar .sidebar-menu span { display: block; padding: 0.4rem 0.6rem; color: var(--color-text); cursor: pointer; }
#tag-sidebar .sidebar-menu span:hover { background: var(--color-link-hover-bg); }
@media (max-width: 900px) {
  #tag-sidebar { display: none; }
  #main-content { max-width: none; }
  #auth-container { margin-right: 0; }
}

/* Help page */
.help-page { display: flex; gap: 2rem; line-height: 1.6; color: var(--color-text); }
.help-content { flex: 1; min-width: 0; }
.help-content h2 { margin-top: 0; }
.help-toc { flex-shrink: 0; position: sticky; top: 1rem; align-self: flex-start; }
.help-toc ul { margin: 0; padding-left: 0; list-style: none; }
.help-toc li { margin: 0.4rem 0; }
.help-toc a { color: var(--color-text-muted); text-decoration: none; font-size: 1rem; }
.help-toc a:hover { color: var(--color-link); text-decoration: underline; }
@media (max-width: 700px) {
  .help-page { flex-direction: column; gap: 1rem; }
  .help-toc { position: static; }
}
.help-page h3 { margin-top: 1.5rem; margin-bottom: 0.5rem; }
.help-page p { margin: 0.5rem 0; }
.help-page ul { margin: 0.5rem 0; padding-left: 1.5rem; }
.help-page li { margin: 0.3rem 0; }
.help-page code { background: var(--color-border-light); padding: 0.15rem 0.4rem; border-radius: 3px; font-size: var(--text-md); }
.tag-example { color: var(--color-text-muted); }
header nav a + a { margin-left: 1rem; }

/* Edit tag dialog */
#edit-tag-overlay {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.15); z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center; padding-top: 80px;
}
#edit-tag-panel {
  width: 340px; background: var(--color-bg); border: 1px solid var(--color-border-input);
  border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.2);
  font-family: system-ui, sans-serif; font-size: 14px; color: var(--color-text);
}
#edit-tag-panel textarea {
  width: 100%; padding: 6px 8px; font-size: 14px; border: 1px solid var(--color-border-input);
  border-radius: 4px; font-family: inherit; resize: vertical; min-height: 48px; box-sizing: border-box;
}
.edit-tag-buttons { display: flex; gap: 8px; }
.edit-tag-buttons button {
  flex: 1; padding: 8px; font-size: 14px; cursor: pointer;
  border: 1px solid var(--color-border-input); border-radius: 4px; background: var(--color-bg-btn);
}
.edit-tag-buttons button:hover { background: var(--color-bg-btn-hover); }

/* Tag autocomplete dropdown */
.tag-autocomplete-dropdown {
  display: none; position: absolute; left: 0; top: 100%;
  background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 4px;
  box-shadow: 0 2px 8px var(--color-shadow); z-index: 200; white-space: nowrap;
  max-height: 200px; overflow-y: auto; min-width: 8rem;
}
.tag-autocomplete-dropdown.open { display: block; }
.tag-autocomplete-dropdown .tag-option {
  padding: 0.35rem 0.6rem; cursor: pointer; font-size: var(--text-base); color: var(--color-text);
}
.tag-autocomplete-dropdown .tag-option:hover, .tag-autocomplete-dropdown .tag-option.active {
  background: var(--color-link-hover-bg);
}