/* ...existing styles... */
:root{
  --bg: #fff;
  --text: #111;
  --muted: #666;
  --card: #f7f7f7;
  --accent: #0b84ff;
  font-family: "Noto Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0b0b0b;
    --text: #eee;
    --muted: #bbb;
    --card: #111;
    --accent: #48a1ff;
  }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000; /* ensure body is black as well */
  color:var(--text);
  display:flex;
  align-items:stretch;
  min-height:100vh;
  transition:background 400ms ease;
}

/* Centered, Google-like layout */
.container{
  width:100%;
  max-width:820px;
  margin:0 auto;
  padding:20px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative; /* Needed for child absolute positioning if any */
}

/* header centered */
.header.centered{ 
  display:flex;
  align-items:center;
  justify-content:center; /* Centers the content (h1, p) */
  gap:12px;
  text-align:center;
  margin-bottom:18px;
  width:100%; /* Ensure it spans full width to center effectively */
}

/* New positioning for the settings button */
#settings-corner-btn {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 100; /* Ensure it's above other elements */
}
@media (max-width: 520px) {
  #settings-corner-btn {
    top: 12px;
    right: 12px;
  }
}

/* New badge style for settings button */
.settings-badge{
  display:inline-block;
  padding:8px 12px;
  border-radius:999px;
  background:var(--card);
  color:var(--text);
  font-weight:600;
  font-size:0.95rem;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  text-decoration:none;
  line-height:1;
  min-width:48px;
  text-align:center;
}
/* Slightly more compact on small screens */
@media (max-width:520px){
  .settings-badge{ padding:6px 10px; font-size:0.9rem; }
}

/* search area centered and animated to move to top when compacted */
.search-area.centered{
  width:100%;
  max-width:640px;
  transition: transform 420ms cubic-bezier(.2,.9,.3,1), margin-top 420ms;
  transform-origin: center top;
  margin-top:0;
}

/* subtle backdrop image overlay */
.bg-overlay{
  position:fixed;
  inset:0;
  z-index:-1;
  background-size:cover;
  background-position:center center;
  filter:none; /* remove brightness/contrast filter since we'll use solid color */
  transition:opacity 0ms ease, filter 0ms ease;
  opacity:1; /* always visible */
  background-image: none !important; /* prevent JS-loaded images from showing */
  background-color: #000000; /* pure black background */
}

/* Header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
}
.header h1{
  margin:0;
  font-size:1.5rem;
  font-weight:600;
}
.sub{margin:4px 0 0;color:var(--muted);font-size:0.9rem}

/* Search area */
.search-area{margin-top:28px}
.search-form{
  display:block; /* changed to let .search-box control layout */
  gap:8px;
  align-items:center;
  width:100%;
}

/* new rounded container with icon button inside */
.search-box{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  background:var(--card);
  border-radius:999px;
  padding:8px;
  border:1px solid rgba(0,0,0,0.06);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.search-box input[type="search"]{
  flex:1;
  background:transparent;
  border:0;
  padding:10px 8px;
  font-size:1rem;
  color:var(--text);
  outline:none;
  min-width:0;
}
.search-submit{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  border:0;
  background:var(--accent);
  color:#fff;
  padding:0;
  cursor:pointer;
  box-shadow:0 4px 10px rgba(11,132,255,0.12);
}
.search-submit svg{display:block}
.search-box input::placeholder{color:var(--muted);opacity:0.9}

/* Adjust input to align visually with prefix */
.search-form input[type="search"]{
  flex:1;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  background:var(--card);
  color:var(--text);
  font-size:1rem;
  min-width:0; /* ensure proper shrink on mobile */
}
.search-form select{
  padding:10px;
  border-radius:10px;
  border:1px solid rgba(0,0,0,0.08);
  background:transparent;
  color:var(--text);
}
.primary{
  background:var(--accent);
  color:white;
  padding:10px 14px;
  border-radius:10px;
  border:0;
  font-weight:600;
}

/* Icon buttons */
.icon-btn{
  background:transparent;
  border:0;
  font-size:1.1rem;
  cursor:pointer;
  color:var(--muted);
}

/* Modal */
.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.32);
  padding:16px;
  z-index: 1000; /* Ensure modal is on top */
}
.modal[aria-hidden="true"]{display:none}
.modal-card{
  width:100%;
  max-width:520px;
  background:var(--bg);
  border-radius:12px;
  padding:18px;
  box-shadow:0 8px 30px rgba(0,0,0,0.12);
  color:var(--text);
  display:flex;
  flex-direction:column;
  max-height:85vh; /* keep modal within viewport */
  overflow:visible; /* allow inner panels to handle scrolling so top/bottom are reachable on mobile */
}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-card label{display:block;margin:10px 0;font-size:0.95rem}
.modal-card input[type="text"],
.modal-card input[type="url"],
.modal-card textarea{
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:var(--card);
  color:var(--text);
  resize: vertical; /* Allow vertical resizing for textareas */
  min-height: 80px; /* Minimum height for textarea */
}
.modal-card select{width:100%;padding:10px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:var(--card)}
.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;flex-shrink:0}
.ghost{background:transparent;border:1px solid rgba(0,0,0,0.08);padding:8px 12px;border-radius:8px}
@media (max-width:520px){
  .container{margin:20px auto;padding:16px}
  .modal-card{padding:14px}
}

@media (max-width:720px){
  .modal-card{
    max-width: calc(100% - 32px);
    margin: 16px;
    padding: 14px;
  }
  .modal-card label {display:block;font-size:0.95rem;}
  .modal-card input[type="text"],
  .modal-card select,
  .modal-card textarea {width:100%;}
  .actions{flex-direction:row;flex-wrap:wrap;gap:8px;}
  .actions button {flex:1 1 auto;min-width:120px;}
}

.settings-cats{
  display:flex;
  gap:8px;
  margin:8px 0 12px;
}
.cat-btn{
  flex:1;
  padding:8px 10px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.06);
  background:var(--card);
  cursor:pointer;
  color:var(--muted);
}
.cat-btn.active{
  background:var(--bg);
  border-color:rgba(0,0,0,0.08);
  color:var(--text);
  font-weight:600;
}

.settings-panels {
  max-height: calc(85vh - 88px); /* leave room for modal header and actions */
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  flex:1;
  display:flex;
  flex-direction:column;
}
.settings-panel{
  flex:1;
  padding-right:6px; /* small gutter for scrollbar */
  padding-top:8px; /* ensure content isn't hidden under header */
  padding-bottom:20px; /* allow reaching the bottom when content is long */
}

/* Favorites section */
.favorites-wrap{width:100%;max-width:640px;margin:18px auto 0}
.favorites-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.favorites-header h3{margin:0;font-size:1rem;color:var(--muted)}
.favorites-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.fave-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
  background:var(--card);
  border:1px solid rgba(0,0,0,0.04);
  min-width:120px;
  max-width:100%;
  /* subtle shadow for readability over wallpapers */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
}

.fave-link {
  display: flex;
  align-items: center;
  gap: 10px; /* Gap between icon and title inside the link */
  flex: 1; /* Allows the link to take up available space */
  text-decoration: none;
  color: inherit; /* Inherit text color from parent */
  min-width: 0; /* Essential for text-overflow to work in flex containers */
  cursor: pointer;
}

.fave-icon{width:36px;height:36px;border-radius:8px;flex:0 0 36px;background:#fff;display:inline-grid;place-items:center;overflow:hidden}
.fave-title-wrapper{ /* New class for the title wrapper inside the link */
  font-size:0.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  flex: 1; /* Allow the title to take remaining space */
  min-width: 0; /* Essential for text-overflow to work in flex containers */
}

.fave-remove{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;flex-shrink: 0;}
@media (max-width:520px){
  .fave-item{min-width:48%;padding:8px}
  .fave-title-wrapper{font-size:0.9rem}
}

/* Tabs styles */
.tabs-nav {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 640px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.tab-button {
  background: transparent;
  border: none;
  padding: 10px 15px;
  font-size: 1rem;
  cursor: pointer;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-bottom-color 0.2s;
  flex: 1; /* Distribute space evenly */
  max-width: 50%; /* Max width for two tabs */
}

.tab-button:hover:not(.active) {
  color: var(--text);
}

.tab-button.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}

.tab-content {
  width: 100%;
  max-width: 640px;
}

/* Notes section - similar structure to favorites for consistency */
.notes-wrap {
  width: 100%;
  max-width: 640px;
  margin: 18px auto 0;
}
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.notes-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--muted);
}
.notes-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.note-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.04);
  min-width: 120px;
  max-width: 100%;
  flex-grow: 1; /* Allow items to grow */
  cursor: pointer;
  /* subtle shadow for readability over wallpapers */
  box-shadow: 0 6px 18px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.06);
}
.note-item a {
  display: block;
  flex: 1;
  text-decoration: none;
  color: inherit;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 0; /* Add a little padding to the clickable area */
  outline-offset: 2px;
}
.note-remove {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
  padding: 4px;
}
@media (max-width: 520px) {
  .note-item {
    min-width: 48%;
    padding: 8px;
  }
  .note-item a {
    font-size: 0.9rem;
  }
}

/* Homepage-only: force content to contrast with whatever background is visible.
   Use mix-blend-mode: difference with white text so content appears as the "opposite"
   of the background image/color. Also invert bitmap images so favicons follow contrast. */
.homepage .container,
.homepage .header,
.homepage .search-area,
.homepage .favorites-wrap,
.homepage .notes-wrap,
.homepage .modal-card {
  color: #fff; /* baseline color used with difference to invert against background */
  mix-blend-mode: difference;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure interactive controls remain readable and preserve accessible hit styles */
.homepage .settings-badge,
.homepage .search-box,
.homepage .fave-item,
.homepage .note-item,
.homepage .modal-card {
  mix-blend-mode: difference;
}

/* Icons and SVG using currentColor will invert via mix-blend-mode; bitmap favicons/images need a filter */
.homepage img,
.homepage .fave-icon img {
  filter: invert(1) hue-rotate(180deg) contrast(1.05);
}

/* Buttons/text that should not become visually confusing get a subtle text-shadow to improve legibility */
.homepage .settings-badge,
.homepage .tab-button.active,
.homepage .search-submit {
  text-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

/* Avoid inverting modal overlays background (keep overlay dark/light as intended) */
.homepage .modal {
  mix-blend-mode: normal;
}