<!--
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@#%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@#.:@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@%. .%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@:   +@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@+    .@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@:     =@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@%@@@@@@@@@@@#      .%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@.#@@@@@@@@@@:      .+@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@* .@@@@@@@@@@        .#@@@@@@@@@@@@@@@%%%%%%%%%%%%%%%%%%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@=  -@@@@@@@@%         :@@@.                                          ..-=*#%@@@@@@@@@@@@@@@
@@@@@@@@@-   =@@@@@@@%          =@@*.                                                      ..=@@@@@@
@@@@@@@@@-    +@@@@@@%          .+@@*                                                        :@@@@@@
@@@@@@@@@-    .+@@@@@@.          .@@@+-=+*#%%%@@@@@@@@@@@@@@@@@@@@%%%#*+=-:...               :@@@@@@
@@@@@@@@@=      *@@@@@*           .%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%%#:     :@@@@@@
@@@@@@@@@+      .+@@@@@.           .@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:     :@@@@@@
@@@@@@@@@%       .=@@@@+            .@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:     :@@@@@@
@@@@@@@@@@=        -@@@@=            .%@@@@@@@@@@@@@@@@@#-.       .-#@@@@@@@@@@@@@@@@@@:     :@@@@@@
@@@@@@@@@@@:        .%@@@-            .%@@@@@@@@@@@@@@-..:.   .-==-. .%@@@@@@@@@@@@@@@@.     =@@@@@@
@@@@@@@@@@@#.        .#@@@=.            *@@@@@@@@@@@==+:.        ..     .#@@@@@@@@@@@@%.     *@@@@@@
@@@@@@@@@@@@*.         =@@@+.            -@@@@@@@@@@-                     *@@@@@@@@@@@*      %@@@@@@
@@@@@@@@@@@@@+.         .%@@%.            .%@@@@@@+.              .:=#%*-.-@@@@@@@@@@@-     .@@@@@@@
@@@@@@@@@@@@@@#.          -@@@+.           .+@@@@- ..            .#=@@@@@+@@@@@@@@@@@@.     =@@@@@@@
@@@@@@*@@@@@@@@@:           *@@@=.           .%@%.%:            -+ @@@@@@@@@@@@@@@@@@*     .*@@@@@@@
@@@@@@@.#@@@@@@@@*.          .%@@@*.           .@@@@*           +..@@@@@@@@@@@@@@@@@@=     .%@@@@@@@
@@@@@@@%.:@@@@@@@@@=.          .%@@@%:          .:@@@@+        .: .@@@@@@@@@@@@@@@@@@.     :@@@@@@@@
@@@@@@@@@:.:@@@@@@@@@=           .%@@@@#.         .:@@@@+.     ..  -@@@@@@@@@@@@@@@@=      %@@@@@@@@
@@@@@@@@@@: .:%@@@@@@@@+.          .=@@@@@#..        .#@@@#.       .-@@@@@@@@@@@@@@%.     -@@@@@@@@@
@@@@@@@@@@@+   .*@@@@@@@@%-.         .:%@@@@@%+.       .=@@@%-       -@@@@@@@@@@@@@+      *@@@@@@@@@
@@@@@@@@@@@@%.   .-%@@@@@@@@#:.         .=%@@@@@@#+.      .*@@@*..   :@@@@@@@@@@@@@.     .@@@@@@@@@@
@@@@@@@@@@@@@@+.    .=@@@@@@@@@%+.         .-#@@@@@@@@*=..  .:*@@@+. .%@@@@@@@@@@@-     .%@@@@@@@@@@
@@@@@=#@@@@@@@@@=      .-#@@@@@@@@@%=:         .+%@@@@@@@@@@*=-..+%@@+%@@@@@@@@@@#.     -@@@@@@@@@@@
@@@@@@=.*@@@@@@@@@+.       .+#@@@@@@@@@@%=-..      .=#@@@@@@@@@@@@@@#@@@@@@@@@@@%.     .@@@@@@@@@@@@
@@@@@@@#..=@@@@@@@@@#:         .-#@@@@@@@@@@@@@#=-:..  ..-#%@@@@@@@@@@@@@@@@@@@@:     .#@@@@@@@@@@@@
@@@@@@@@@=  .+@@@@@@@@@+..          .:#%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-      =@@@@@@@@@@@@@
@@@@@@@@@@@:    -%@@@@@@@@%:.             ..=%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=      =@@@@@@@@@@@@@@
@@@@@@@@@@@@@:     .-@@@@@@@@@@+.                 ..:=%@@@@@@@@@@@@@@@@@@@@@@=      .@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@+.      ..:#@@@@@@@@@@@%*-:....:=#%@@@@@@@@@@@@@@@@@@@@@@@@@@+.     :@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@=.        ...:-+@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-      .@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@%-.             .....::::-=@@@@@@@@@@@@@@@@@@@@@@@@@@:.     :@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@#+:.           .:+#@@@@@@@@@@@@@@@@@@@@@@@@@@@@.      -@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=       =@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%.       *@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@-...    -@@@@@@@@@@@@@@@@@@@@@@@@-       :@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@+.      .=@@@@@@@@@@@@@@@@@@@@=.      .*@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@:.       =@@@@@@@@@@@@@@@@=.       -@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%:       .:%@@@@@@@@@@#:.       :@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%.         -@@@@@@-         .%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%:.         ..         .:%@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@=.                .+@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@%-            =@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@*.    .*@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@*@@@@@@@@+%@@@*++++++*@@@@@@@@@*#@@@@@@@@%+++++++#@@@@@*#@@@@@@@@@@+++++++*@@@@@@@@@@@@@@
@@@@@@@@@@@:.+@@@@+.:%@@# -####*:.@@@@@@#...-@@@@@@= =#####*.-@@@@.:@@@@@@@@@* -####*:.@@@@@@@@@@@@@
@@@@@@@@@@@@*.:%%:.+@@@@# .....:@@@@@@@: :#*..*@@@@- @@@@@-...%@@@.:@@@@@@@@@* ......@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@:. :%@@@@@# :*****..@@@*..------.:@@@+ -******:.%@@@..-----=%@@* :*****..@@@@@@@@@@@@@
@@@@@@@@@@@@@@@%%@@@@@@@@#######%@@@@@%@@@@@@@@#@@@@@#######%@@@@@%#######@@@@#######%@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@

  Vagelis Ferelis · ferelis.gr · info@ferelis.gr
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Veagle Link Hub — personal dashboard of bookmarks, tools, and social links." />
  <title>Veagle Hub</title>
  <link rel="icon" type="image/png" sizes="32x32" href="./images/icon-32.png">
<link rel="apple-touch-icon" href="./images/icon-180.png">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Orbitron:wght@600;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
  :root {
    --bg: #000000;
    --panel: #0b0b0b;
    --panel-2: #111111;
    --card: #141414;
    --border: rgba(255,255,255,0.08);
    --text: #f5f5f5;
    --muted: #b3b3b3;
    --accent: #ff2b2b;
    --accent-2: #ff5d5d;
    --shadow: 0 14px 40px rgba(0,0,0,0.45);
    --radius: 18px;
  }

  * { box-sizing: border-box; }

  html { scroll-behavior: smooth; }

  body {
    margin: 0;
    font-family: Inter, system-ui, sans-serif;
    background:
      radial-gradient(circle at top, rgba(255,43,43,0.10), transparent 34%),
      linear-gradient(180deg, #000000 0%, #050505 100%);
    color: var(--text);
    min-height: 100vh;
    overflow-x: hidden;
  }

  a { color: inherit; text-decoration: none; }

  img { max-width: 100%; }

  .layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "topbar topbar"
      "sidebar main"
      "footer footer";
    min-height: 100vh;
  }

  .topbar {
    grid-area: topbar;
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.88);
    border-bottom: 1px solid rgba(255,43,43,0.25);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 22px;
  }

  .brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 220px;
  }

  .brand-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text);
  }

  .brand-title span { color: var(--accent); }

  .brand-subtitle {
    font-size: 0.78rem;
    color: var(--muted);
    letter-spacing: 0.4px;
  }

  .topbar-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
    font-size: 0.8rem;
    color: var(--muted);
  }

  .meta-pill {
    padding: 7px 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    border-radius: 999px;
  }

  .search-wrap {
    position: relative;
    min-width: 280px;
    max-width: 360px;
    width: 100%;
  }

  .search-wrap i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--accent);
    font-size: 0.9rem;
  }

  #bookmark-search {
    width: 100%;
    padding: 12px 14px 12px 38px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    outline: none;
    font: inherit;
  }

  #bookmark-search::placeholder { color: #6f6f6f; }

  .sidebar {
    grid-area: sidebar;
    position: sticky;
    top: 73px;
    height: calc(100vh - 73px);
    overflow-y: auto;
    padding: 18px 0;
    background: rgba(8,8,8,0.86);
    border-right: 1px solid rgba(255,43,43,0.15);
  }

  .sidebar-section-label {
    display: block;
    padding: 14px 18px 8px;
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
  }

  .sidebar a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    color: #d8d8d8;
    border-left: 3px solid transparent;
    transition: 0.18s ease;
    font-size: 0.92rem;
    font-weight: 500;
  }

  .sidebar a i {
    width: 16px;
    color: var(--accent);
    text-align: center;
  }

  .sidebar a:hover,
  .sidebar a.active {
    background: rgba(255,43,43,0.08);
    border-left-color: var(--accent);
    color: white;
  }

  .sidebar-countdown {
    margin: 18px 14px 0;
    padding: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
    border: 1px solid var(--border);
  }

  .cd-label {
    display: block;
    font-size: 0.67rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }

  #countdown {
    font-family: monospace;
    color: var(--text);
    line-height: 1.8;
    font-size: 0.95rem;
  }

  main {
    grid-area: main;
    padding: 26px 26px 42px;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
  }

  .cyber-banner {
    position: relative;
    overflow: hidden;
    padding: 18px 20px 16px;
    margin-bottom: 18px;
    border: 1px solid rgba(255,43,43,0.22);
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(10,10,10,0.98), rgba(0,0,0,0.98));
    min-height: 170px;
  }

  .cyber-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(255,43,43,0.08) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,43,43,0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.28;
    animation: gridMove 10s linear infinite;
  }

  .cyber-scan {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ff2b2b, transparent);
    box-shadow: 0 0 18px #ff2b2b;
    animation: scanMove 4.5s linear infinite;
    top: 0;
  }

  .cyber-glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(30px);
    opacity: 0.35;
  }

  .cyber-glow-1 {
    width: 180px;
    height: 180px;
    background: rgba(255,43,43,0.22);
    top: -40px;
    right: -40px;
  }

  .cyber-glow-2 {
    width: 160px;
    height: 160px;
    background: rgba(255,93,93,0.16);
    bottom: -50px;
    left: -40px;
  }

  .cyber-top,
  .cyber-meter,
  .cyber-pulse {
    position: relative;
    z-index: 2;
  }

  .cyber-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
  }

  .cyber-title-wrap {
    max-width: 760px;
  }

  .cyber-kicker {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #ff2b2b;
    margin-bottom: 8px;
  }

  .cyber-top h1 {
    margin: 0;
    font-size: clamp(1.65rem, 3vw, 2.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .cyber-subtitle {
    margin: 10px 0 0;
    max-width: 680px;
    color: #b3b3b3;
    line-height: 1.55;
    font-size: 0.95rem;
  }

  .cyber-status {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding-top: 2px;
  }

  .cyber-status span {
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,43,43,0.10);
    border: 1px solid rgba(255,43,43,0.18);
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ffffff;
  }

  .cyber-meter {
    margin-top: 14px;
  }

  .meter-label {
    font-size: 0.68rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #b3b3b3;
    margin-bottom: 8px;
  }

  .meter-bar {
    height: 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
  }

  .meter-bar span {
    display: block;
    width: 72%;
    height: 100%;
    background: linear-gradient(90deg, #ff2b2b, #ff5d5d, #ff2b2b);
    background-size: 200% 100%;
    animation: pulseFill 2.2s linear infinite;
  }

  .cyber-pulse {
    margin-top: 14px;
    display: flex;
    gap: 6px;
    align-items: flex-end;
    height: 18px;
  }

  .cyber-pulse span {
    width: 6px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ff2b2b, #ff5d5d);
    animation: pulseBars 1s infinite ease-in-out;
  }

  .cyber-pulse span:nth-child(1) { height: 6px; animation-delay: 0s; }
  .cyber-pulse span:nth-child(2) { height: 12px; animation-delay: 0.12s; }
  .cyber-pulse span:nth-child(3) { height: 18px; animation-delay: 0.24s; }
  .cyber-pulse span:nth-child(4) { height: 10px; animation-delay: 0.36s; }
  .cyber-pulse span:nth-child(5) { height: 15px; animation-delay: 0.48s; }

  .section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0 16px;
  }

  .section-head::before {
    content: "";
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(255,43,43,0.5);
    flex-shrink: 0;
  }

  .section-head h2 {
    margin: 0;
    font-size: 0.85rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #f3f3f3;
  }

  .section-head::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(90deg, rgba(255,43,43,0.35), transparent);
  }

  .content-section,
  .cyber-banner {
    scroll-margin-top: 90px;
  }

  .content-section.hidden { display: none; }

  .social-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
  }

  .social-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    color: var(--text);
    font-weight: 600;
    transition: 0.18s ease;
  }

  .social-btn i { color: var(--accent); }

  .social-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(255,43,43,0.35);
    background: rgba(255,43,43,0.08);
  }

  .bookmark-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
  }

  .tile {
    background: rgba(20,20,20,0.92);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
  }

  .tile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), transparent);
    opacity: 0.8;
  }

  .tile h3 {
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    color: #f3f3f3;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .tile a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    color: #e6e6e6;
    font-size: 0.95rem;
    word-break: break-word;
    transition: 0.15s ease;
  }

  .tile a .fav {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 4px;
    background: rgba(255,255,255,0.08);
  }

  .tile a::after {
    content: "↗";
    color: var(--accent);
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 8px;
    transition: transform 0.15s ease;
  }

  .tile a:hover {
    color: white;
    padding-left: 4px;
    text-decoration: underline;
    text-decoration-color: rgba(255,43,43,0.5);
    text-underline-offset: 3px;
  }

  .tile a:hover::after {
    transform: translate(2px, -2px);
  }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
  }

  .filter-chip {
    font: inherit;
    padding: 7px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.03);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
  }

  .filter-chip:hover {
    color: var(--text);
    border-color: rgba(255,43,43,0.3);
  }

  .filter-chip.active {
    color: white;
    background: rgba(255,43,43,0.16);
    border-color: rgba(255,43,43,0.45);
  }

  .no-results {
    display: none;
    padding: 18px 0 8px;
    color: var(--accent);
    font-family: monospace;
    text-align: center;
  }

  .iframe-wrap {
    background: rgba(17,29,49,0.9);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: var(--shadow);
  }

  .iframe-label {
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border-bottom: 1px solid var(--border);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muted);
  }

  .iframe-wrap iframe {
    width: 100%;
    height: 420px;
    border: 0;
    display: block;
  }

  .footer {
    grid-area: footer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-top: 1px solid var(--border);
    background: rgba(6,12,22,0.88);
    color: var(--muted);
    font-size: 0.82rem;
  }

  .f-status { color: var(--accent-2); }

  .f-right { display: flex; align-items: center; gap: 12px; }

  .f-build { font-size: 0.72rem; opacity: 0.6; }

  #back-top {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: rgba(17,29,49,0.95);
    color: var(--text);
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow);
    z-index: 999;
  }

  @keyframes scanMove {
    0% { top: 0; opacity: 0; }
    10% { opacity: 1; }
    50% { opacity: 1; }
    100% { top: 100%; opacity: 0; }
  }

  @keyframes gridMove {
    from { transform: translateY(0); }
    to { transform: translateY(28px); }
  }

  @keyframes pulseFill {
    0% { background-position: 0 0; }
    100% { background-position: 200% 0; }
  }

  @keyframes pulseBars {
    0%, 100% { transform: scaleY(0.7); opacity: 0.6; }
    50% { transform: scaleY(1.25); opacity: 1; }
  }

  .menu-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text);
    cursor: pointer;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 250;
  }

  .sidebar-backdrop.show { display: block; }

  @media (max-width: 980px) {
    .layout {
      grid-template-columns: 1fr;
      grid-template-areas:
        "topbar"
        "main"
        "footer";
    }

    .menu-toggle { display: flex; }

    .sidebar {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      height: 100vh;
      width: 270px;
      max-width: 82vw;
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      z-index: 300;
      box-shadow: 0 0 40px rgba(0,0,0,0.6);
    }

    .sidebar.open { transform: translateX(0); }

    .topbar { flex-wrap: wrap; }

    .search-wrap { min-width: 100%; order: 3; }
  }

  @media (max-width: 700px) {
    .cyber-top {
      flex-direction: column;
    }

    .cyber-status {
      justify-content: flex-start;
    }

    .cyber-banner {
      min-height: 0;
    }
  }

  @media (max-width: 560px) {
    main { padding: 16px; }

    .cyber-banner { padding: 16px; }

    .topbar-meta { display: none; }

    .brand { min-width: unset; }
  }


  /* ================= NEW ERA ADDITIONS ================= */
  #netbg{ position:fixed; inset:0; width:100%; height:100%; z-index:0; opacity:0.55; pointer-events:none; }
  .layout{ position:relative; z-index:1; }

  /* --- boot --- */
  #hub-boot{
    position:fixed; inset:0; z-index:1000; background:#000;
    display:flex; align-items:center; justify-content:center;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:15px; color:#d9d9d9;
    transition:opacity .25s ease;
  }
  #hub-boot pre{ margin:0; white-space:pre-wrap; min-width:min(520px, 86vw); line-height:1.7; }
  #hub-boot .ok{ color:#3ddc84; }
  #hub-boot .hot{ color:var(--accent); }
  #hub-boot.out{ opacity:0; pointer-events:none; }

  /* --- command palette --- */
  .palette-btn{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    border:1px solid var(--border); background:rgba(255,255,255,0.04); color:var(--muted);
    border-radius:8px; padding:3px 8px; font:600 0.72rem ui-monospace, Menlo, monospace; cursor:pointer;
  }
  .palette-btn:hover{ color:var(--text); border-color:var(--accent); }
  #palette{
    position:fixed; inset:0; z-index:900; display:none;
    background:rgba(0,0,0,0.62); backdrop-filter:blur(6px);
    align-items:flex-start; justify-content:center; padding:12vh 16px 16px;
  }
  #palette.show{ display:flex; }
  .pal-box{
    width:min(640px, 100%); background:#070707; border:1px solid rgba(255,43,43,0.45);
    border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,0.7), 0 0 40px rgba(255,43,43,0.15); overflow:hidden;
    font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  }
  .pal-in{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
  .pal-in span{ color:var(--accent); font-weight:700; }
  .pal-in input{ flex:1; min-width:0; background:none; border:none; outline:none; color:var(--text); font:inherit; font-size:1rem; caret-color:var(--accent); }
  .pal-list{ max-height:min(52vh, 460px); overflow-y:auto; padding:6px; margin:0; list-style:none; }
  .pal-list li{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; color:#dcdcdc; font-size:0.9rem; }
  .pal-list li .fav{ width:16px; height:16px; border-radius:4px; flex-shrink:0; background:rgba(255,255,255,0.08); }
  .pal-list li .ico{ width:16px; text-align:center; color:var(--accent); flex-shrink:0; }
  .pal-list li .grp{ margin-left:auto; color:var(--muted); font-size:0.72rem; letter-spacing:1px; text-transform:uppercase; white-space:nowrap; }
  .pal-list li mark{ background:none; color:var(--accent-2); }
  .pal-list li.on{ background:rgba(255,43,43,0.14); color:#fff; }
  .pal-empty{ padding:18px; color:var(--muted); font-size:0.85rem; }
  .pal-foot{ display:flex; gap:16px; padding:9px 16px; border-top:1px solid var(--border); color:var(--muted); font-size:0.72rem; flex-wrap:wrap; }
  .pal-foot b{ color:var(--text); font-weight:600; }

  /* --- list / map view toggle --- */
  .view-toggle{ display:flex; gap:6px; margin:-4px 0 14px; }
  .view-toggle button{
    border:1px solid var(--border); background:rgba(255,255,255,0.03); color:var(--muted);
    border-radius:999px; padding:6px 14px; font:600 0.78rem Inter, sans-serif; cursor:pointer;
  }
  .view-toggle button.active{ color:#fff; border-color:rgba(255,43,43,0.6); background:rgba(255,43,43,0.12); }
  .map-view{ display:none; grid-template-columns:1.4fr 0.6fr; gap:14px; }
  .map-view.show{ display:grid; }
  .map-stage{ position:relative; height:520px; border:1px solid var(--border); border-radius:18px; background:rgba(10,10,10,0.75); overflow:hidden; }
  .map-stage canvas{ position:absolute; inset:0; width:100%; height:100%; cursor:grab; touch-action:pan-y; }
  .map-stage canvas:active{ cursor:grabbing; }
  .map-hint{ position:absolute; left:14px; bottom:10px; font-size:0.72rem; color:var(--muted); pointer-events:none; }
  .map-panel{ border:1px solid var(--border); border-radius:18px; background:rgba(20,20,20,0.92); padding:16px; overflow-y:auto; max-height:520px; }
  .map-panel h3{ margin:0 0 4px; font-size:0.78rem; letter-spacing:2px; text-transform:uppercase; color:#f3f3f3; }
  .map-panel .sub{ font-size:0.75rem; color:var(--muted); margin-bottom:12px; padding-bottom:10px; border-bottom:1px solid var(--border); }
  .map-panel a{ display:flex; align-items:center; gap:8px; padding:5px 0; color:#e6e6e6; font-size:0.92rem; }
  .map-panel a .fav{ width:16px; height:16px; border-radius:4px; flex-shrink:0; background:rgba(255,255,255,0.08); }
  .map-panel a:hover{ color:#fff; }
  .map-panel .tiles-of{ display:flex; flex-wrap:wrap; gap:6px; }
  .map-panel .tiles-of button{ border:1px solid var(--border); background:none; color:var(--text); border-radius:999px; padding:5px 10px; font:500 0.8rem Inter, sans-serif; cursor:pointer; }
  .map-panel .tiles-of button:hover{ border-color:var(--accent); }
  @media (max-width: 980px){
    .map-view{ grid-template-columns:1fr; }
    .map-stage{ height:400px; }
    .map-panel{ max-height:none; }
  }
  @media (prefers-reduced-motion: reduce){ #hub-boot{ display:none; } }

  /* ================= VICE CITY COUNTDOWN ================= */
  :root{ --vc-pink:#ff2fa0; --vc-cyan:#29e3ff; --vc-sun1:#ffd36b; --vc-sun2:#ff3d8b; --vc-night:#12051f; }
  .vc-clock{ display:flex; gap:6px; font-family:Orbitron, ui-monospace, monospace; font-weight:800; }
  .vc-unit{ display:flex; flex-direction:column; align-items:center; gap:3px; }
  .vc-digits{ display:flex; gap:2px; }
  .vc-d{
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:1.05em; height:1.45em; border-radius:4px;
    background:linear-gradient(180deg, #2a0b3d 0 49%, #1d0730 51% 100%);
    color:#fff; text-shadow:0 0 6px var(--vc-pink), 0 0 14px rgba(255,47,160,0.6);
    box-shadow:inset 0 0 0 1px rgba(255,47,160,0.35);
    transform-origin:50% 50%; perspective:200px;
  }
  .vc-d::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1px; background:rgba(0,0,0,0.55); }
  .vc-d.flip{ animation:vcFlip .42s cubic-bezier(.3,.7,.3,1); }
  @keyframes vcFlip{ 0%{ transform:rotateX(-90deg); filter:brightness(1.8); } 100%{ transform:rotateX(0); filter:none; } }
  .vc-u{ font:600 0.5rem Inter, sans-serif; letter-spacing:1.5px; color:var(--vc-cyan); text-transform:uppercase; }
  .vc-sep{ align-self:flex-start; padding-top:.25em; color:var(--vc-pink); opacity:.7; }
  .vc-bar{ display:block; height:5px; border-radius:999px; background:rgba(255,255,255,0.08); overflow:hidden; }
  .vc-bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg, var(--vc-cyan), var(--vc-pink)); box-shadow:0 0 10px var(--vc-pink); transition:width .8s ease; }

  /* A: sidebar widget */
  .vc-mini{
    display:block; position:relative; margin:18px 14px 0; padding:12px 12px 12px; border-radius:16px; overflow:hidden;
    border:1px solid rgba(255,47,160,0.35); color:var(--text);
    background:linear-gradient(180deg, #1a0630 0%, #3b0a4a 55%, #12051f 100%);
    box-shadow:0 0 24px rgba(255,47,160,0.12);
  }
  .vc-mini:hover{ border-color:var(--vc-pink); box-shadow:0 0 30px rgba(255,47,160,0.3); }
  /* undo the generic sidebar link styling for the widget */
  .sidebar a.vc-mini, .sidebar a.vc-mini:hover, .sidebar a.vc-mini.active{
    display:block; padding:12px; border-left:1px solid rgba(255,47,160,0.35);
    background:linear-gradient(180deg, #1a0630 0%, #3b0a4a 55%, #12051f 100%); color:var(--text);
  }
  .sidebar a.vc-mini:hover{ border-color:var(--vc-pink); }
  .vc-mini-sky{ position:absolute; left:0; right:0; top:0; height:64px; pointer-events:none; overflow:hidden; }
  .vc-mini-sky::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--vc-pink); box-shadow:0 0 10px var(--vc-pink); opacity:.7; }
  .vc-sun{
    position:absolute; left:50%; bottom:-22px; width:76px; height:76px; margin-left:-38px; border-radius:50%;
    background:linear-gradient(180deg, var(--vc-sun1), var(--vc-sun2) 70%);
    -webkit-mask:linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
            mask:linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82%);
    opacity:.9;
  }
  .vc-palms{ position:absolute; inset:0; width:100%; height:100%; color:var(--vc-night); }
  .vc-mini-label{ position:relative; display:block; margin:62px 0 8px; font:700 0.62rem Inter, sans-serif; letter-spacing:2px; text-transform:uppercase; color:var(--vc-cyan); text-shadow:0 0 8px rgba(41,227,255,0.6); }
  .vc-mini .vc-clock{ position:relative; font-size:0.95rem; justify-content:space-between; margin-bottom:10px; }
  .vc-mini .vc-sep{ display:none; }
  .vc-mini-foot{ position:relative; display:flex; justify-content:space-between; margin-top:6px; font:600 0.6rem Inter, sans-serif; letter-spacing:1.2px; color:#d9b8ff; text-transform:uppercase; }

  /* B: dashboard card */
  .vc-card{
    position:relative; overflow:hidden; margin-bottom:18px; min-height:300px; border-radius:18px;
    border:1px solid rgba(255,47,160,0.4); background:var(--vc-night);
    box-shadow:0 0 40px rgba(255,47,160,0.12);
    scroll-margin-top:90px;
  }
  .vc-card canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
  .vc-overlay{ position:relative; z-index:1; padding:22px 24px; display:flex; flex-direction:column; gap:10px; max-width:560px; }
  .vc-kicker{ font:700 0.72rem Inter, sans-serif; letter-spacing:3px; text-transform:uppercase; color:var(--vc-cyan); text-shadow:0 0 10px rgba(41,227,255,0.7); }
  .vc-title{
    font:800 clamp(2.4rem, 6vw, 4.2rem)/1 Orbitron, sans-serif; letter-spacing:4px;
    background:linear-gradient(180deg, #fff 0%, #ffd2f0 45%, var(--vc-pink) 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
    filter:drop-shadow(0 0 14px rgba(255,47,160,0.65));
  }
  .vc-clock-big{ font-size:clamp(1.3rem, 3.4vw, 2.2rem); gap:8px; }
  .vc-clock-big .vc-u{ font-size:0.62rem; }
  .vc-meta{ display:flex; flex-direction:column; gap:8px; max-width:420px; font-size:0.78rem; color:#e3c9ff; }
  .vc-meta b{ color:#fff; }
  .vc-card.final .vc-title{ animation:vcPulse 1.2s ease-in-out infinite; }
  .vc-card.live .vc-kicker{ color:#fff; }
  @keyframes vcPulse{ 50%{ filter:drop-shadow(0 0 26px rgba(255,47,160,1)); } }
  @media (max-width:700px){ .vc-card{ min-height:280px; } .vc-overlay{ padding:18px; } }

  /* C: HESOYAM */
  body.vice{ --accent:#ff2fa0; --accent-2:#29e3ff; }
  body.vice #netbg{ filter:hue-rotate(-50deg) saturate(1.6); }
  body.vice .topbar{ border-bottom-color:rgba(41,227,255,0.5); }
  #vc-passed{
    position:fixed; inset:0; z-index:950; display:none; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    pointer-events:none; background:radial-gradient(ellipse at center, rgba(18,5,31,0.55), transparent 70%);
  }
  #vc-passed.show{ display:flex; animation:vcPassed 3.2s ease forwards; }
  .vc-passed-t{
    font:800 clamp(2rem, 7vw, 4.6rem)/1 Orbitron, sans-serif; text-transform:uppercase; letter-spacing:3px;
    color:#ffd36b; -webkit-text-stroke:2px #000; text-shadow:0 4px 0 #000, 0 0 30px rgba(255,211,107,0.6);
  }
  .vc-passed-s{ font:700 clamp(1rem, 3vw, 1.6rem) Orbitron, sans-serif; color:#fff; -webkit-text-stroke:1px #000; text-shadow:0 3px 0 #000; letter-spacing:2px; text-transform:uppercase; }
  @keyframes vcPassed{ 0%{ opacity:0; transform:scale(1.25); } 12%{ opacity:1; transform:scale(1); } 80%{ opacity:1; } 100%{ opacity:0; } }
  @media (prefers-reduced-motion: reduce){ .vc-d.flip, .vc-card.final .vc-title{ animation:none; } }
</style>
</head>
<body>
  <canvas id="netbg" aria-hidden="true"></canvas>
  <svg width="0" height="0" style="position:absolute" aria-hidden="true">
    <symbol id="vc-palm" viewBox="0 0 44 54"><path fill="currentColor" d="M21 54c1-12 0-24-3-34l2-1c3 10 4 22 3 35zM19 19C14 12 6 11 0 14c6-5 15-5 20 3zm1 0c-2-8-9-13-16-13 8-3 15 2 17 12zm1 0c1-8 7-14 15-15-6 3-11 9-13 16zm1 1c6-6 15-6 21-1-7-2-14-1-20 3zm-1 0c4 4 6 10 5 16-2-6-5-10-7-14zm-2 0c-5 3-8 8-8 14-1-6 2-12 7-16z"/></symbol>
  </svg>
  <div id="vc-passed" aria-hidden="true"><div class="vc-passed-t">mission passed!</div><div class="vc-passed-s">respect +</div></div>
  <div id="hub-boot" aria-hidden="true"><pre id="hub-boot-log"></pre></div>
  <div id="palette" role="dialog" aria-modal="true" aria-label="Command line">
    <div class="pal-box">
      <div class="pal-in"><span>&gt;</span><input id="pal-input" type="text" autocomplete="off" spellcheck="false" placeholder="type to search every link, section or category" aria-label="Search"></div>
      <ul class="pal-list" id="pal-list" role="listbox"></ul>
      <div class="pal-foot"><span><b>↑↓</b> move</span><span><b>Enter</b> open</span><span><b>Esc</b> close</span><span><b>/</b> or <b>Ctrl+K</b> anywhere</span></div>
    </div>
  </div>
  <div class="layout">
    <header class="topbar">
      <button id="menu-toggle" class="menu-toggle" aria-label="Toggle navigation" aria-expanded="false"><i class="fas fa-bars"></i></button>

      <div class="brand">
        <div class="brand-title">Veagle <span>LINK HUB</span></div>
        <div class="brand-subtitle">I don’t need your approval; I need your credentials.</div>
      </div>

      <div class="topbar-meta">
        <span class="meta-pill"><strong>CLK</strong> <span id="current-datetime">--</span></span>
        <span class="meta-pill"><strong>NET</strong> <span id="net-status">--</span></span>
        <span class="meta-pill" title="Round trip to google.com"><strong>PING</strong> <span id="ping-ms">--</span></span>
        <span class="meta-pill" id="bat-pill" hidden><strong>BAT</strong> <span id="bat-level">--</span></span>
      </div>

      <div class="search-wrap">
        <i class="fas fa-search"></i>
        <input type="text" id="bookmark-search" placeholder="Search bookmarks">
        <button type="button" class="palette-btn" id="palette-open" title="Command line (/ or Ctrl+K)">⌘K</button>
      </div>
    </header>

    <nav class="sidebar">
      <span class="sidebar-section-label">Navigate</span>
      <a href="#dashboard"><i class="fas fa-th-large"></i> Dashboard</a>
      <a href="#social"><i class="fas fa-satellite-dish"></i> Social</a>
      <a href="#bookmarks"><i class="fas fa-bookmark"></i> Bookmarks</a>
      <a href="#vice"><i class="fas fa-umbrella-beach"></i> Vice City</a>
      <a href="#moto-trip"><i class="fas fa-motorcycle"></i> Moto Trip</a>

      <span class="sidebar-section-label">Bookmark Cats</span>
      <a href="#bookmarks" data-filter="daily"><i class="fas fa-magnifying-glass"></i> Daily Links</a>
      <a href="#bookmarks" data-filter="security"><i class="fas fa-shield-halved"></i> Security</a>
      <a href="#bookmarks" data-filter="tools"><i class="fas fa-screwdriver-wrench"></i> Tools</a>
      <a href="#bookmarks" data-filter="ai"><i class="fas fa-laptop-code"></i> AI Tools</a>
      <a href="#bookmarks" data-filter="tech-news"><i class="fas fa-newspaper"></i> Tech News</a>
      <a href="#bookmarks" data-filter="utilities"><i class="fas fa-circle-info"></i> Utilities</a>

      <a class="vc-mini" href="#vice" data-target="2026-11-19T00:00:00" title="GTA VI · 19 Nov 2026">
        <span class="vc-mini-sky" aria-hidden="true">
          <span class="vc-sun"></span>
          <svg class="vc-palms" viewBox="0 0 220 60" preserveAspectRatio="none"><use href="#vc-palm" x="6" y="6" width="44" height="54"/><use href="#vc-palm" x="178" y="14" width="36" height="46" transform="matrix(-1 0 0 1 392 0)"/></svg>
        </span>
        <span class="vc-mini-label">Mission · Vice City</span>
        <span class="vc-clock" data-vc-clock aria-live="off"></span>
        <span class="vc-bar"><i data-vc-bar></i></span>
        <span class="vc-mini-foot"><span data-vc-status>LOADING VICE CITY</span><span data-vc-pct>--%</span></span>
      </a>
    </nav>

    <div id="sidebar-backdrop" class="sidebar-backdrop"></div>

    <main>
      <section class="cyber-banner" id="dashboard">
        <div class="cyber-grid"></div>
        <div class="cyber-scan"></div>
        <div class="cyber-glow cyber-glow-1"></div>
        <div class="cyber-glow cyber-glow-2"></div>

        <div class="cyber-top">
          <div class="cyber-title-wrap">
            <div class="cyber-kicker">Veagle LINK HUB</div>
            <h1>Have you tried turning it off and on again?</h1>
            <p class="cyber-subtitle">
              I don’t argue with users. I document their mistakes.
            </p>
          </div>

          <div class="cyber-status">
            <span>ONLINE</span>
            <span>loaded</span>
            <span>No apologies</span>
          </div>
        </div>
        <div class="cyber-meter">
          <div class="meter-label">SYSTEM SIGNAL</div>
          <div class="meter-bar">
            <span></span>
          </div>
        </div>

        <div class="cyber-pulse">
          <span></span>
          <span></span>
          <span></span>
          <span></span>
          <span></span>
        </div>
      </section>

      <section id="vice" class="vc-card" data-target="2026-11-19T00:00:00" aria-label="GTA VI countdown">
        <canvas id="vc-scene" aria-hidden="true"></canvas>
        <div class="vc-overlay">
          <div class="vc-kicker">Mission · <span data-vc-status>Loading Vice City</span></div>
          <div class="vc-title">GTA VI</div>
          <div class="vc-clock vc-clock-big" data-vc-clock aria-live="off"></div>
          <div class="vc-meta">
            <span class="vc-bar"><i data-vc-bar></i></span>
            <span><b data-vc-pct>--%</b> of the wait since trailer 1 · release 19 Nov 2026</span>
          </div>
        </div>
      </section>

      <section id="social" class="content-section">
        <div class="section-head"><h2>Social Channels</h2></div>
        <div class="social-grid">
          <a href="https://www.youtube.com/veagleontheroad" target="_blank" class="social-btn"><i class="fab fa-youtube"></i> YouTube</a>
          <a href="https://www.facebook.com/veagle" target="_blank" class="social-btn"><i class="fab fa-facebook-f"></i> Facebook</a>
          <a href="https://www.instagram.com/veagleontheroad/" target="_blank" class="social-btn"><i class="fab fa-instagram"></i> Instagram</a>
          <a href="https://x.com/veaglegr" target="_blank" class="social-btn"><i class="fab fa-x-twitter"></i> X</a>
          <a href="https://www.linkedin.com/in/vagelis-ferelis-8b160b59/" target="_blank" class="social-btn"><i class="fab fa-linkedin-in"></i> LinkedIn</a>
        </div>
      </section>

      <section id="bookmarks" class="content-section">
        <div class="section-head"><h2>Bookmarks</h2></div>

        <div class="filter-bar" id="filter-bar">
          <button type="button" class="filter-chip active" data-filter="all">All</button>
          <button type="button" class="filter-chip" data-filter="daily">Daily Links</button>
          <button type="button" class="filter-chip" data-filter="security">Security</button>
          <button type="button" class="filter-chip" data-filter="tools">Tools</button>
          <button type="button" class="filter-chip" data-filter="ai">AI Tools</button>
          <button type="button" class="filter-chip" data-filter="tech-news">Tech News</button>
          <button type="button" class="filter-chip" data-filter="utilities">Utilities</button>
        </div>

        <div class="view-toggle" role="group" aria-label="View">
          <button type="button" class="active" data-view="list"><i class="fas fa-table-cells-large"></i> List</button>
          <button type="button" data-view="map"><i class="fas fa-circle-nodes"></i> Map</button>
        </div>

        <div class="map-view" id="map-view">
          <div class="map-stage"><canvas id="link-map" aria-hidden="true"></canvas><div class="map-hint">drag to rotate · tap a node</div></div>
          <div class="map-panel" id="map-panel" aria-live="polite"></div>
        </div>

        <div id="no-results" class="no-results">NO MATCHING LINKS FOUND</div>

        <div class="bookmark-grid" id="bookmark-grid">
          <div class="tile" data-category="daily">
                    <h3>News</h3>
                    <a href="https://www.kavalapost.gr" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.kavalapost.gr" alt="" loading="lazy">Kavalapost</a>
                </div>

                <div class="tile" data-category="daily">
                    <h3>Weather</h3>
                    <a href="https://www.meteoacharnes.gr/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.meteoacharnes.gr" alt="" loading="lazy">MeteoAcharnes Webcam</a>
                    <a href="https://www.aodos.gr/live-streaming/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.aodos.gr" alt="" loading="lazy">Attiki Odos Webcams</a>
                    <a href="https://www.forecastweather.gr/kameres/attikis.html" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.forecastweather.gr" alt="" loading="lazy">Κάμερες Αττικής</a>
                    <a href="https://www.meteo.gr/cf.cfm?city_id=89" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.meteo.gr" alt="" loading="lazy">Meteo Δυτικά Προάστια</a>
                    <a href="https://www.meteokav.gr" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.meteokav.gr" alt="" loading="lazy">MeteoKav</a>
                    <a href="https://www.meteo.gr" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.meteo.gr" alt="" loading="lazy">Meteo.gr</a>
                    <a href="https://zoom.earth/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=zoom.earth" alt="" loading="lazy">Zoom Earth</a>
                    <a href="https://www.windy.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.windy.com" alt="" loading="lazy">Windy</a>
                    <a href="https://map.blitzortung.org/#5.56/38.702/23.242" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=map.blitzortung.org" alt="" loading="lazy">Blitzortung — Thunders</a>
                </div>

                <div class="tile" data-category="daily">
                    <h3>Google Services</h3>
                    <a href="https://www.google.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.google.com" alt="" loading="lazy">Google Search</a>
                    <a href="https://mail.google.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=mail.google.com" alt="" loading="lazy">Gmail</a>
                    <a href="https://www.youtube.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.youtube.com" alt="" loading="lazy">YouTube</a>
                    <a href="https://drive.google.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=drive.google.com" alt="" loading="lazy">Google Drive</a>
                </div>

                <div class="tile" data-category="tools">
                    <h3>Tech Support</h3>
                    <a href="https://www.nvidia.com/en-us/geforce/products/g-sync-monitors/specs/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.nvidia.com" alt="" loading="lazy">G-Sync Monitors</a>
                    <a href="https://www.willitbottleneck.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.willitbottleneck.com" alt="" loading="lazy">Bottleneck Calculator</a>
                    <a href="https://www.cybenetics.com/index.php?option=psu-performance-database" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.cybenetics.com" alt="" loading="lazy">PSU Efficiency DB</a>
                    <a href="https://support.microsoft.com/en-us/topic/use-the-system-file-checker-tool-to-repair-missing-or-corrupted-system-files-79aa86cb-ca52-166a-92a3-966e85d4094e" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=support.microsoft.com" alt="" loading="lazy">System File Checker (SFC)</a>
                    <a href="https://learn.microsoft.com/en-us/windows-server/administration/windows-commands/chkdsk" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=learn.microsoft.com" alt="" loading="lazy">Disk Error Check (CHKDSK)</a>
					<a href="https://allcolorscreen.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=allcolorscreen.com" alt="" loading="lazy">Screen Color Test & Display Tools</a>
                </div>

                <div class="tile">
                    <h3>Education ++</h3>
                    <a href="https://www.coursera.org/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.coursera.org" alt="" loading="lazy">Coursera</a>
                    <a href="https://www.udemy.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.udemy.com" alt="" loading="lazy">Udemy</a>
                    <a href="https://www.classcentral.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.classcentral.com" alt="" loading="lazy">Class Central</a>
                    <a href="https://www.w3schools.com/sql/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.w3schools.com" alt="" loading="lazy">SQL Tutorial — W3Schools</a>
                    <a href="https://www.utest.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.utest.com" alt="" loading="lazy">UTest</a>
                    <a href="https://coddy.tech/?ref=uvykvn" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=coddy.tech" alt="" loading="lazy">Coddy Tech</a>
					<a href="https://learn-anything.xyz/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=learn-anything.xyz" alt="" loading="lazy">Learn Anything</a>
                </div>

                <div class="tile" data-category="tech-news">
                    <h3>Tech News</h3>
                    <a href="https://www.theverge.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.theverge.com" alt="" loading="lazy">The Verge</a>
                    <a href="https://www.cnet.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.cnet.com" alt="" loading="lazy">CNET</a>
                    <a href="https://unboxholics.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=unboxholics.com" alt="" loading="lazy">Unboxholics</a>
                    <a href="https://techblog.gr/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=techblog.gr" alt="" loading="lazy">Techblog.gr</a>
                    <a href="https://techmaniacs.gr/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=techmaniacs.gr" alt="" loading="lazy">Techmaniacs</a>
                </div>

                <div class="tile">
                    <h3>Health</h3>
                    <a href="https://exrx.net/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=exrx.net" alt="" loading="lazy">Exercise Prescription (ExRx)</a>
                    <a href="https://musclewiki.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=musclewiki.com" alt="" loading="lazy">Muscle Wiki</a>
                    <a href="https://darebee.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=darebee.com" alt="" loading="lazy">Darebee Workouts</a>
                    <a href="https://www.workout.cool/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.workout.cool" alt="" loading="lazy">Workout.cool</a>
                    <a href="https://www.calculator.net/calorie-calculator.html" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.calculator.net" alt="" loading="lazy">Calorie Calculator</a>
                </div>

                <div class="tile">
                    <h3>Design / Media</h3>
                    <a href="https://www.fontspace.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.fontspace.com" alt="" loading="lazy">Fontspace</a>
                    <a href="https://www.dafont.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.dafont.com" alt="" loading="lazy">DaFont</a>
                    <a href="https://filmora.wondershare.com/fission/invite?share_code=26edT5s8GKA&referral_id=435&lang=en-us" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=filmora.wondershare.com" alt="" loading="lazy">Filmora</a>
                    <a href="https://www.capcut.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.capcut.com" alt="" loading="lazy">CapCut</a>
                    <a href="https://www.blackmagicdesign.com/products/davinciresolve/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.blackmagicdesign.com" alt="" loading="lazy">DaVinci Resolve</a>
					<a href="https://www.acdsee.com/en/products/acdsee-free/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.acdsee.com" alt="" loading="lazy">Acdsee Free</a>
                </div>

                <div class="tile" data-category="security">
                    <h3>Security Online</h3>
                    <a href="http://ifconfig.co/ip" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=ifconfig.co" alt="" loading="lazy">IP Check Simple</a>
                    <a href="https://ipleak.net/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=ipleak.net" alt="" loading="lazy">IP Check Advanced</a>
                    <a href="http://ifconfig.me/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=ifconfig.me" alt="" loading="lazy">ifconfig.me</a>
                    <a href="https://www.ipinfodb.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.ipinfodb.com" alt="" loading="lazy">IP Info DB</a>
                    <a href="http://webkay.robinlinus.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=webkay.robinlinus.com" alt="" loading="lazy">Webkay — Browser Fingerprint</a>
                    <a href="https://browserleaks.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=browserleaks.com" alt="" loading="lazy">BrowserLeaks</a>
                    <a href="https://www.virustotal.com/gui/home/upload" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.virustotal.com" alt="" loading="lazy">VirusTotal</a>
                    <a href="https://opentip.kaspersky.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=opentip.kaspersky.com" alt="" loading="lazy">Kaspersky OpenTip</a>
                    <a href="https://www.bitdefender.com/en-us/consumer/link-checker" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.bitdefender.com" alt="" loading="lazy">BitDefender Link Checker</a>
                </div>

                <div class="tile" data-category="security">
                    <h3>Security Apps</h3>
                    <a href="http://malwarebytes.com/adwcleaner" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=malwarebytes.com" alt="" loading="lazy">AdwCleaner</a>
                    <a href="https://www.malwarebytes.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.malwarebytes.com" alt="" loading="lazy">Malwarebytes</a>
                    <a href="https://www.eset.com/gr-en/home/online-scanner/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.eset.com" alt="" loading="lazy">ESET Online Scanner</a>
                    <a href="https://keepass.info/index.html" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=keepass.info" alt="" loading="lazy">KeePass</a>
                </div>

                <div class="tile" data-category="tools">
                    <h3>Tricks &amp; Tools</h3>
                    <a href="https://temp-mail.org/en/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=temp-mail.org" alt="" loading="lazy">TempMail</a>
                    <a href="https://alternativeto.net/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=alternativeto.net" alt="" loading="lazy">AlternativeTo</a>
                    <a href="https://www.ilovepdf.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.ilovepdf.com" alt="" loading="lazy">I Love PDF</a>
                    <a href="https://www.dwrean.net/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.dwrean.net" alt="" loading="lazy">Dwrean.net</a>
                    <a href="https://www.majorgeeks.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.majorgeeks.com" alt="" loading="lazy">Major Geeks</a>
                    <a href="https://buildcores.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=buildcores.com" alt="" loading="lazy">Interactive PC Building 3D</a>
                </div>

                <div class="tile" data-category="tools,utilities">
                    <h3>Apps &amp; Utilities</h3>
                    <a href="https://www.ninite.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.ninite.com" alt="" loading="lazy">Ninite — Bulk Install</a>
                    <a href="https://www.nirsoft.net" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.nirsoft.net" alt="" loading="lazy">NirSoft — System Tools</a>
                    <a href="https://www.naps2.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.naps2.com" alt="" loading="lazy">NAPS2 — PDF Scanner</a>
                    <a href="https://pdfsam.org/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=pdfsam.org" alt="" loading="lazy">PDFsam — Split/Merge</a>
                    <a href="https://filezilla-project.org/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=filezilla-project.org" alt="" loading="lazy">FileZilla FTP</a>
                    <a href="https://www.solarwinds.com/free-tools/solar-putty" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.solarwinds.com" alt="" loading="lazy">Solar-PuTTY</a>
                    <a href="https://portableapps.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=portableapps.com" alt="" loading="lazy">PortableApps</a>
                    <a href="https://windirstat.net/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=windirstat.net" alt="" loading="lazy">WinDirStat</a>
                    <a href="https://diskanalyzer.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=diskanalyzer.com" alt="" loading="lazy">WizTree — Disk Usage</a>
                    <a href="https://dbeaver.io/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=dbeaver.io" alt="" loading="lazy">DBeaver — DB Tool</a>
					<a href="https://www.hwinfo.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.hwinfo.com" alt="" loading="lazy">HWinfo</a>
					<a href="https://www.revouninstaller.com/start-freeware-download-portable/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.revouninstaller.com" alt="" loading="lazy">Revo Uninstaller</a>
					
                </div>

                <div class="tile" data-category="tools">
                    <h3>Remote Access</h3>
                    <a href="https://anydesk.com" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=anydesk.com" alt="" loading="lazy">AnyDesk</a>
                    <a href="https://rustdesk.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=rustdesk.com" alt="" loading="lazy">RustDesk (Free)</a>
                    <a href="https://www.teamviewer.com/en/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.teamviewer.com" alt="" loading="lazy">TeamViewer</a>
                </div>

                <div class="tile">
                    <h3>Crypto</h3>
                    <a href="https://coinmarketcap.com/watchlist/63cf09035299e091295c5823/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=coinmarketcap.com" alt="" loading="lazy">CoinMarketCap Watchlist</a>
                    <a href="https://revolut.com/referral/?referral-code=evange2bc1!JAN1-25-AR-L1" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=revolut.com" alt="" loading="lazy">Revolut</a>
                    <a href="https://www.binance.com/activity/referral-entry/CPA?ref=CPA_00MYVRHNF0" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.binance.com" alt="" loading="lazy">Binance</a>
                    <a href="https://www.kucoin.com/r/rf/QBSKXAVL" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.kucoin.com" alt="" loading="lazy">KuCoin</a>
                    <a href="https://support.metamask.io/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=support.metamask.io" alt="" loading="lazy">MetaMask</a>
                    <a href="https://help.phantom.com/hc/en-us" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=help.phantom.com" alt="" loading="lazy">Phantom</a>
                    <a href="https://docs.suiwallet.com/faq" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=docs.suiwallet.com" alt="" loading="lazy">Sui Wallet</a>
                    <a href="https://promote.mexc.com/r/lSag7Akv" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=promote.mexc.com" alt="" loading="lazy">MEXC</a>
                    <a href="https://www.bybit.com/invite?ref=JWVDXJ" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.bybit.com" alt="" loading="lazy">Bybit</a>
                </div>

                <div class="tile">
                    <h3>Finance</h3>
                    <a href="https://freedom24.com/invite_from/2118335" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=freedom24.com" alt="" loading="lazy">Freedom24</a>
                    <a href="https://www.calculator.net/investment-calculator.html" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.calculator.net" alt="" loading="lazy">Investment Calculator</a>
                    <a href="https://invest.revolut.com/discover" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=invest.revolut.com" alt="" loading="lazy">Revolut Investment</a>
                    <a href="https://cashewapp.web.app/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=cashewapp.web.app" alt="" loading="lazy">Cashew — Budget</a>
                </div>

                <div class="tile">
                    <h3>Shopping</h3>
                    <a href="https://unboxingspecialist.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=unboxingspecialist.com" alt="" loading="lazy">Unboxing Specialist</a>
                    <a href="https://solo.to/unboxingspecialist" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=solo.to" alt="" loading="lazy">Unboxing Specialist Special</a>
                    <a href="https://linktr.ee/unboxingspecialist" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=linktr.ee" alt="" loading="lazy">Unboxing Specialist All</a>
                    <a href="https://www.lagonika.gr/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.lagonika.gr" alt="" loading="lazy">Lagonika</a>
					<a href="https://unpackman.gr/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=unpackman.gr" alt="" loading="lazy">unpackman.gr</a>
                </div>

                <div class="tile" data-category="ai">
                    <h3>AI Tools</h3>
                    <a href="https://claude.ai/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=claude.ai" alt="" loading="lazy">Claude (Anthropic)</a>
                    <a href="https://chatgpt.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=chatgpt.com" alt="" loading="lazy">ChatGPT</a>
                    <a href="https://copilot.microsoft.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=copilot.microsoft.com" alt="" loading="lazy">Copilot</a>
                    <a href="https://gemini.google.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=gemini.google.com" alt="" loading="lazy">Gemini</a>
                    <a href="https://www.perplexity.ai/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.perplexity.ai" alt="" loading="lazy">Perplexity</a>
                    <a href="https://turboscribe.ai/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=turboscribe.ai" alt="" loading="lazy">Turboscribe — Transcription</a>
                    <a href="https://www.toolfk.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.toolfk.com" alt="" loading="lazy">ToolFK</a>
                    <a href="https://huggingface.co/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=huggingface.co" alt="" loading="lazy">Hugging Face</a>
                </div>

                <div class="tile">
                    <h3>Just Browsing</h3>
                    <a href="https://satellitetracker3d.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=satellitetracker3d.com" alt="" loading="lazy">Satellite Tracker 3D</a>
                    <a href="https://www.startmycar.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.startmycar.com" alt="" loading="lazy">Start My Car</a>
                    <a href="https://www.boredbutton.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.boredbutton.com" alt="" loading="lazy">Are You Bored?</a>
                    <a href="https://www.homestyler.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.homestyler.com" alt="" loading="lazy">HomeStyler</a>
                    <a href="https://theuselessweb.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=theuselessweb.com" alt="" loading="lazy">Useless Web</a>
                    <a href="https://www.geoguessr.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.geoguessr.com" alt="" loading="lazy">GeoGuessr</a>
                    <a href="https://shitday.de/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=shitday.de" alt="" loading="lazy">Shitday 🔊</a>
                    <a href="https://boredalot.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=boredalot.com" alt="" loading="lazy">BoredALot</a>
                    <a href="https://www.playphrase.me/#/search?language=en" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.playphrase.me" alt="" loading="lazy">PlayPhrase</a>
                    <a href="https://www.dimensions.com/browse" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.dimensions.com" alt="" loading="lazy">Dimensions</a>
                </div>

                <div class="tile">
                    <h3>Music</h3>
                    <a href="https://you.dj/free-dj-software" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=you.dj" alt="" loading="lazy">Online DJ</a>
                    <a href="https://winamp.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=winamp.com" alt="" loading="lazy">Winamp</a>
                </div>

                <div class="tile">
                    <h3>Just Food</h3>
                    <a href="https://www.myfridgefood.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=www.myfridgefood.com" alt="" loading="lazy">My Fridge Food</a>
                </div>

                <div class="tile">
                    <h3>Mobile</h3>
                    <a href="https://saily.com/" target="_blank"><img class="fav" src="https://www.google.com/s2/favicons?sz=32&domain=saily.com" alt="" loading="lazy">E-SIM — Saily</a>
                </div>
        </div>
      </section>

      <section id="moto-trip" class="content-section">
        <div class="section-head"><h2>Moto Trip Planner</h2></div>

        <div class="iframe-wrap">
          <div class="iframe-label">Google Calendar — Trip Schedule</div>
          <iframe src="https://calendar.google.com/calendar/embed?height=400&amp;wkst=2&amp;ctz=Europe%2FAthens&amp;showPrint=0&amp;mode=AGENDA&amp;title=Moto%20Trip%20Planner&amp;src=Y2QwZjUzMDlhOWE1N2QyMTVkZTQyMjk2MGNjNjg4OTE4ZDJmNWU2YmIwMjRlZmIwY2ViMzI4MTUwN2VjNUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&amp;src=ZWwuZ3JlZWsjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&amp;color=%23795548&amp;color=%23009688" title="Moto Trip Calendar"></iframe>
        </div>

        <div class="iframe-wrap">
          <div class="iframe-label">Featured Ride — YouTube</div>
          <iframe src="https://www.youtube.com/embed/4HFPpA7E5lQ?si=6tiCUoFDFzGHD0R5" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
        </div>
      </section>
    </main>

    <footer class="footer">
      <span class="f-status">STATUS OPTIMAL — MODULES ALL ACTIVE</span>
      <div class="f-right">
        <span class="f-copy">© 2026 IT LINK HUB</span>
        <span class="f-build" id="build-tag"></span>
        <button type="button" class="pi-door" id="pi-door" aria-label="π">π</button>
      </div>
    </footer>
  </div>

  <button id="back-top" title="Back to top"><i class="fas fa-chevron-up"></i></button>

  <script>
    function updateDateTime() {
      const now = new Date();
      const pad = n => String(n).padStart(2, '0');
      document.getElementById("current-datetime").textContent =
        `${pad(now.getDate())}/${pad(now.getMonth()+1)}/${now.getFullYear()} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`;
    }

    (function(){
      var d = new Date(document.lastModified);
      var datePart = d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
      var timePart = String(d.getHours()).padStart(2,"0") + String(d.getMinutes()).padStart(2,"0");
      document.getElementById("build-tag").textContent = "updated " + datePart + " build " + timePart;
    })();


    function updateNet() {
      const el = document.getElementById("net-status");
      if (navigator.onLine) {
        const c = navigator.connection;
        let label = "ONLINE";
        if (c && c.effectiveType) label += " · " + c.effectiveType.toUpperCase();
        if (c && c.downlink) label += " · " + c.downlink + " Mb/s";
        el.textContent = label;
        el.style.color = "var(--accent-2)";
      } else {
        el.textContent = "OFFLINE";
        el.style.color = "#ff7b7b";
      }
    }

    function filterBookmarks() {
      const q = document.getElementById("bookmark-search").value.toLowerCase().trim();
      const tiles = document.querySelectorAll("#bookmark-grid .tile");
      let visible = 0;
      tiles.forEach(tile => {
        const match = !q || tile.innerText.toLowerCase().includes(q);
        tile.style.display = match ? "" : "none";
        if (match) visible++;
      });
      document.getElementById("no-results").style.display = q && visible === 0 ? "block" : "none";
      if (q) {
        document.querySelectorAll(".sidebar a[data-filter]").forEach(a => a.classList.remove("active"));
        document.querySelectorAll(".filter-chip").forEach(c => c.classList.remove("active"));
      }
    }

    function applyCategoryFilter(category) {
      const tiles = document.querySelectorAll("#bookmark-grid .tile");
      let visible = 0;
      tiles.forEach(tile => {
        const cats = (tile.dataset.category || "").split(",").map(s => s.trim()).filter(Boolean);
        const match = category === "all" || cats.includes(category);
        tile.style.display = match ? "" : "none";
        if (match) visible++;
      });
      document.getElementById("no-results").style.display = category !== "all" && visible === 0 ? "block" : "none";
    }

    function setActiveFilterUI(category) {
      document.querySelectorAll(".sidebar a[data-filter]").forEach(a => {
        a.classList.toggle("active", a.dataset.filter === category);
      });
      document.querySelectorAll(".filter-chip").forEach(c => {
        c.classList.toggle("active", c.dataset.filter === category);
      });
    }

    function selectFilter(category) {
      document.getElementById("bookmark-search").value = "";
      applyCategoryFilter(category);
      setActiveFilterUI(category);
    }

    document.querySelectorAll('.sidebar a[href="#bookmarks"]').forEach(link => {
      link.addEventListener("click", () => {
        selectFilter(link.dataset.filter || "all");
        if (window.innerWidth <= 980) closeSidebar();
      });
    });

    document.querySelectorAll(".filter-chip").forEach(chip => {
      chip.addEventListener("click", () => selectFilter(chip.dataset.filter));
    });

    const sidebarEl = document.querySelector(".sidebar");
    const sidebarBackdrop = document.getElementById("sidebar-backdrop");
    const menuToggle = document.getElementById("menu-toggle");

    function openSidebar() {
      sidebarEl.classList.add("open");
      sidebarBackdrop.classList.add("show");
      menuToggle.setAttribute("aria-expanded", "true");
    }

    function closeSidebar() {
      sidebarEl.classList.remove("open");
      sidebarBackdrop.classList.remove("show");
      menuToggle.setAttribute("aria-expanded", "false");
    }

    menuToggle.addEventListener("click", () => {
      sidebarEl.classList.contains("open") ? closeSidebar() : openSidebar();
    });

    sidebarBackdrop.addEventListener("click", closeSidebar);

    document.querySelectorAll(".sidebar a:not([data-filter])").forEach(a => {
      a.addEventListener("click", () => {
        if (window.innerWidth <= 980) closeSidebar();
      });
    });

    const backTop = document.getElementById("back-top");
    window.addEventListener("scroll", () => {
      backTop.style.display = window.scrollY > 300 ? "flex" : "none";
    });
    backTop.addEventListener("click", () => window.scrollTo({ top: 0, behavior: "smooth" }));

    document.addEventListener("keydown", e => {
      if (e.key === "Escape") {
        const s = document.getElementById("bookmark-search");
        s.blur();
        s.value = "";
        filterBookmarks();
      }
    });

    document.getElementById("bookmark-search").addEventListener("input", filterBookmarks);
    window.addEventListener("online", updateNet);
    window.addEventListener("offline", updateNet);

    const sections = document.querySelectorAll("main section[id]");
    const sideLinks = document.querySelectorAll(".sidebar a:not([data-filter])");
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          sideLinks.forEach(a => a.classList.toggle("active", a.getAttribute("href") === "#" + entry.target.id));
        }
      });
    }, { threshold: 0.3 });
    sections.forEach(sec => observer.observe(sec));

    updateDateTime();
    updateNet();
    setInterval(updateDateTime, 1000);
    setInterval(updateNet, 5000);
    if (navigator.connection && navigator.connection.addEventListener) navigator.connection.addEventListener("change", updateNet);
  </script>
  <script src="js/netbg.js"></script>
  <script src="js/hub.js"></script>
  <script src="js/vice.js"></script>
  <script src="js/eggs.js"></script>
  <script src="js/hello.js" data-hint="psst… there is a π on this page."></script>
</body>
</html>