/* 
Linky Blog — Dracula Edition v1.4
Compact, responsive, and unified version (cleaned of duplicates)
*/

@import url('https://static.omg.lol/type/font-honey.css');
@import url('https://static.omg.lol/type/font-lato-regular.css');

/* ===== Dracula Palette ===== */
:root {
  --dr-bg: #282A36;
  --dr-surface: #2B2C3B;
  --dr-header: #1E1F29;
  --dr-fg: #F8F8F2;
  --dr-muted: #6272A4;
  --dr-border: #44475A;
  --dr-accent: #BD93F9;
  --dr-accent2: #8BE9FD;
  --dr-green: #50FA7B;
  --dr-orange: #FFB86C;
  --dr-red: #FF5555;

  --glow-grad: linear-gradient(145deg, rgba(189,147,249,0.25), rgba(80,250,123,0.15));
  --accent-grad: linear-gradient(135deg, #BD93F9 0%, #8BE9FD 100%);
  --card-glow: 0 0 12px rgba(189,147,249,0.2);
}

/* ===== Base ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  min-height: 100%;
  width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;
  background: radial-gradient(circle at top left, #343746 0%, #282A36 80%);
  background-attachment: fixed;
  background-size: cover;
  color: var(--dr-fg);
  line-height: 1.5;
  font-size: 15px;
}

/* ===== Layout ===== */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 12px;
}

/* ===== Header ===== */
header {
  background: var(--dr-header);
  padding: 14px 0;
  margin-bottom: 25px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  border-bottom: 1px solid var(--dr-border);
}

header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  overflow: hidden;
}

h1 {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'Honey', sans-serif;
  font-size: 20px;
  color: var(--dr-accent);
  text-shadow: 0 0 6px rgba(189,147,249,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

h1 a {
  color: var(--dr-accent);
  text-decoration: none;
}

/* ===== Header Buttons ===== */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.header-actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dr-fg);
  text-decoration: none;
  background: rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 16px;
  transition: all 0.25s ease-in-out;
  box-shadow: 0 0 6px rgba(189,147,249,0.25);
}

.header-actions a i {
  font-size: 14px;
  margin-right: 4px;
}

.header-actions a:hover {
  background: rgba(255,255,255,0.15);
  color: var(--dr-accent);
  box-shadow: 0 0 10px rgba(189,147,249,0.5);
  transform: translateY(-1px);
}

/* Specific button color variants */
.header-actions .add-btn { background: var(--dr-green); color: #000; }
.header-actions .feed-btn { background: var(--dr-orange); color: #000; }
.header-actions .user-btn.logout { background: var(--dr-red); color: #000; }

.header-actions .add-btn:hover,
.header-actions .feed-btn:hover,
.header-actions .user-btn.logout:hover {
  filter: brightness(1.2);
  transform: translateY(-1px);
}

/* ===== Search ===== */
.search-box {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.search-box input {
  flex: 1;
  padding: 8px;
  border: 1px solid var(--dr-border);
  border-radius: 4px;
  background: var(--dr-surface);
  color: var(--dr-fg);
  font-size: 14px;
}

.search-box button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: var(--accent-grad);
  color: #000;
  font-weight: bold;
  cursor: pointer;
}

/* ===== Tags ===== */
.tags {
  background: rgba(43,44,59,0.9);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: var(--card-glow);
  border: 1px solid var(--dr-border);
  transition: 0.25s;
}

.tags:hover { box-shadow: 0 0 14px rgba(189,147,249,0.3); }

.tags h3 {
  margin-bottom: 8px;
  font-size: 13px;
  color: var(--dr-muted);
  text-transform: uppercase;
}

.tag {
  display: inline-block;
  background: var(--dr-border);
  padding: 5px 9px;
  margin: 3px;
  border-radius: 4px;
  color: var(--dr-fg);
  font-size: 12px;
  text-decoration: none;
  transition: 0.25s;
}

.tag:hover,
.tag.active {
  background: var(--accent-grad);
  color: #000;
  box-shadow: 0 0 8px rgba(189,147,249,0.4);
}

/* ===== Cards ===== */
.link, .link-form {
  background: rgba(43,44,59,0.85);
  padding: 16px;
  margin-bottom: 14px;
  border-radius: 10px;
  box-shadow: var(--card-glow);
  border: 1px solid var(--dr-border);
  backdrop-filter: blur(8px);
  transition: all 0.25s ease;
  width: 100%;
}

.link:hover, .link-form:hover {
  box-shadow: 0 0 16px rgba(189,147,249,0.35);
  transform: translateY(-1px);
}

.link h2 a {
  color: var(--dr-accent);
  font-size: 17px;
  text-decoration: none;
}

.link h2 a:hover { color: var(--dr-accent2); }

.link-url {
  color: var(--dr-muted);
  font-size: 12px;
  margin-bottom: 8px;
  word-break: break-all;
}

.link-author {
  color: var(--dr-green);
  font-size: 12px;
  font-style: italic;
  margin-bottom: 6px;
}

.link-description {
  color: var(--dr-fg);
  font-size: 14px;
  margin-bottom: 8px;
}

.link-description a {
  color: var(--dr-accent);
  text-decoration: underline;
}

.link-description code {
  background: var(--dr-border);
  color: var(--dr-orange);
  padding: 2px 5px;
  border-radius: 3px;
  font-size: 0.9em;
  font-family: 'Courier New', monospace;
  margin-bottom: 1em;
}

.link-actions a {
  color: var(--dr-accent2);
  text-decoration: none;
  margin-left: 10px;
  font-size: 15px;
}

/* ===== Forms ===== */
.link-form input,
.link-form textarea {
  width: 100%;
  padding: 8px;
  margin-bottom: 8px;
  border: 1px solid var(--dr-border);
  border-radius: 4px;
  background: var(--dr-header);
  color: var(--dr-fg);
  font-size: 14px;
}

.link-form button {
  background: var(--accent-grad);
  color: #000;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.link-form button.cancel {
  background: var(--dr-border);
  color: var(--dr-fg);
}

.link-form button:hover {
  box-shadow: 0 0 10px rgba(189,147,249,0.4);
}

/* ===== URL + Fetch Alignment ===== */
.url-input-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.url-input-group input[type="url"] {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 4px 8px;
  font-size: 13px;
  border-radius: 4px;
  border: 1px solid var(--dr-border);
  background: var(--dr-surface);
  color: var(--dr-fg);
}

.fetch-title-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 10px;
  font-size: 13px;
  border-radius: 4px;
  font-weight: bold;
  background: var(--dr-accent);
  color: #000;
  border: none;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(189,147,249,0.3);
  transition: all 0.25s ease;
}

.fetch-title-btn:hover {
  background: var(--dr-accent2);
  box-shadow: 0 0 12px rgba(139,233,253,0.5);
  transform: translateY(-1px);
}

/* ===== Link Meta ===== */
.link-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--dr-muted);
  margin-top: 6px;
}

.link-meta a { color: var(--dr-accent2); text-decoration: none; }
.link-meta a.delete { color: var(--dr-red); }
.link-meta a:hover { text-decoration: underline; }

.link-meta .link-tags .tag {
  font-size: 11px;
  padding: 3px 7px;
  margin: 2px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--dr-border);
  color: var(--dr-fg);
  border-radius: 4px;
  transition: 0.25s;
  text-decoration: none !important;
}

/* ===== Login Form ===== */
.login-form {
  max-width: 400px;
  margin: 50px auto;
  background: rgba(43,44,59,0.9);
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(189,147,249,0.2);
  border: 1px solid var(--dr-border);
  backdrop-filter: blur(8px);
}

.login-form h2 {
  margin-bottom: 16px;
  color: var(--dr-accent);
  font-family: 'Honey', sans-serif;
  text-align: center;
  text-shadow: 0 0 6px rgba(189,147,249,0.4);
}

.login-form input {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  border: 1px solid var(--dr-border);
  border-radius: 6px;
  background: var(--dr-header);
  color: var(--dr-fg);
  font-size: 14px;
}

.login-form button {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: bold;
  color: #000;
  background: var(--accent-grad);
  box-shadow: 0 0 10px rgba(189,147,249,0.3);
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.login-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 18px rgba(189,147,249,0.5);
  background: linear-gradient(135deg, #C9A0FF 0%, #9BF7FF 100%);
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(189,147,249,0.3); }
  50% { box-shadow: 0 0 18px rgba(189,147,249,0.5); }
}

.login-form button:focus {
  outline: none;
  animation: glowPulse 2s infinite ease-in-out;
}

/* ===== Footer ===== */
footer {
  text-align: center;
  padding: 1em 0;
  font-size: 0.8rem;
  color: var(--dr-muted);
  border-top: 1px solid var(--dr-border);
  margin-top: 20px;
}

/* ===== Responsive ===== */
@media (max-width: 700px) {
  body { font-size: 14px; }
  h1 { font-size: 18px; }
  .container { padding: 10px; }
  .link, .link-form, .tags { padding: 12px; }
  .search-box input, .search-box button { font-size: 13px; }
  .link-description { font-size: 13px; }
  .header-actions a {
    padding: 8px 10px;
    font-size: 15px;
  }
}

/* ===== Keep header inline on all screen sizes ===== */
header .container {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 6px;
  overflow: hidden;
}

h1 {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}

.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: nowrap;
}

/* Smaller, tighter buttons for mobile view */
@media (max-width: 600px) {
  .header-actions a {
    padding: 6px 9px;
    font-size: 14px;
  }
  .header-actions a i {
    font-size: 13px;
  }
  .url-input-group input[type="url"],
  .fetch-title-btn {
    height: 28px;
    font-size: 12px;
  }
}
.logo-icon {
  height: 2em; /* makes it match the text height */
  vertical-align: middle; /* aligns it nicely with the text baseline */
  margin-right: -0.1em; /* space between icon and text */
}

blockquote {
  margin: 1em 1em;
  padding-left: 1em;
  border-left: 3px solid var(--dr-accent, #bd93f9);
  color: var(--dr-muted, #6272a4);
  font-style: italic;
}