:root {
    /* светлая тема (твоя база) */
    --bg: #ffffff;
    --text: #000000;
    --header-border: #1e1e1e;
    --input-bg: #808080; /* твой gray */
    --input-text: #e0e0e0;
    --accent: #7289DA;
    --card-bg: #a7adba;
    --btn-bg: #111111;
    --btn-text: #e0e0e0;
    --meta: #333333;
    --stock-ok: #2e2e2e;
    --price-old: #3a3a3a;
}

/* темная тема — подхватит системные настройки или класс .dark-mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0a0a0a;
        --text: #f0f0f0;
        --header-border: #333333;
        --input-bg: #1a1a1a;
        --input-text: #ffffff;
        --accent: #5865F2;
        --card-bg: #161616;
        --btn-bg: #222222;
        --btn-text: #ffffff;
        --meta: #888888;
        --stock-ok: #aaaaaa;
        --price-old: #666666;
    }
}

body.dark-mode {
    --bg: #0a0a0a;
    --text: #f0f0f0;
    --header-border: #333333;
    --input-bg: #1a1a1a;
    --input-text: #ffffff;
    --accent: #5865F2;
    --card-bg: #161616;
    --btn-bg: #222222;
    --btn-text: #ffffff;
    --meta: #888888;
    --stock-ok: #aaaaaa;
    --price-old: #666666;
}

@keyframes rgb-shift {
    0%   { border-color: #ff0040; color: #ff0040; }
    25%  { border-color: #00ff99; color: #00ff99; }
    50%  { border-color: #00cfff; color: #00cfff; }
    75%  { border-color: #ff00cc; color: #ff00cc; }
    100% { border-color: #ff0040; color: #ff0040; }
}

@keyframes rgb-border {
    0%   { border-color: #ff0040; }
    25%  { border-color: #00ff99; }
    50%  { border-color: #00cfff; }
    75%  { border-color: #ff00cc; }
    100% { border-color: #ff0040; }
}

@keyframes rainbow-bg {
    0%   { background-color: #ff000022; }
    17%  { background-color: #ff7f0022; }
    33%  { background-color: #ffff0022; }
    50%  { background-color: #00ff0022; }
    67%  { background-color: #0000ff22; }
    83%  { background-color: #8b00ff22; }
    100% { background-color: #ff000022; }
}

@keyframes shake {
    0%   { transform: translate(0, 0) rotate(0deg); }
    20%  { transform: translate(-3px, 1px) rotate(-1deg); }
    40%  { transform: translate(3px, -1px) rotate(1deg); }
    60%  { transform: translate(-2px, 2px) rotate(-0.5deg); }
    80%  { transform: translate(2px, -2px) rotate(0.5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
}

* { box-sizing: border-box; border-radius: 0 !important; margin: 0; padding: 0; }

body {
    font-family: 'Geologica', monospace;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding: 20px;
    transition: background 0.3s, color 0.3s;
}

header {
    border-bottom: 1px solid var(--header-border);
    padding-bottom: 16px;
    margin-bottom: 24px;
}

header h1 {
    font-size: clamp(3.1rem, 4vw, 1.6rem);
    letter-spacing: 2px;
    text-transform: uppercase;
    animation: rgb-shift 4s infinite linear, shake 0.3s infinite;
    border: none;
    margin-bottom: 14px;
}

.search-box {
    display: flex;
    gap: 8px;
    max-width: 520px;
    animation: shake 0.3s infinite;
}

.search-box input {
    background: var(--input-bg);
    border: 1px solid var(--accent);
    color: var(--input-text);
    padding: 10px 14px;
    flex-grow: 1;
    font-family: inherit;
    font-size: 0.9rem;
    outline: none;
    transition: border-color .2s;
}

.search-box input:focus { border-color: var(--text); }
.search-box input::placeholder { color: var(--meta); }

.search-box button {
    background: var(--btn-bg);
    color: var(--btn-text);
    border: 1px solid var(--header-border);
    padding: 10px 20px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: bold;
    letter-spacing: 1px;
    transition: background .15s, border-color .15s;
}

.search-box button:hover { opacity: 0.8; }

.catalog-meta {
    font-size: 0.72rem;
    color: var(--meta);
    margin-bottom: 18px;
    letter-spacing: 1px;
}

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

.card {
    background: var(--card-bg);
    border: 1px solid var(--accent);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .15s, border-color .15s, background 0.3s;
}

.card:hover { transform: translateY(-3px); border-color: var(--text); }
.card.off { opacity: 0.4; pointer-events: none; }

.badge {
    padding: 3px 8px;
    font-size: 0.68rem;
    font-weight: bold;
    letter-spacing: 1px;
    background: #0a0a0a;
    color: #fff;
    border: 1px solid;
    animation: rgb-shift 3s infinite linear;
}

.card-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-bottom: 1px solid var(--header-border);
}

.card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.card-name {
    font-size: 0.85rem;
    line-height: 1.4;
    flex: 1;
}

.price-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.price-cur {
    font-size: 1.1rem;
    font-weight: bold;
    animation: rgb-shift 3s infinite linear, shake 0.3s infinite;
    border: none !important;
}

.price-old {
    text-decoration: line-through;
    color: var(--price-old);
    font-size: 0.78rem;
}

.stock {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
}

.stock.low { color: yellow; animation: shake 0.3s infinite; }
.stock.ok  { color: var(--stock-ok); }
.stock.inf { color: var(--meta); }

.btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 9px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid;
    background: transparent;
    color: var(--btn-text);
    transition: background .15s;
    animation: rgb-border 3s infinite linear, rainbow-bg 3s infinite linear, shake 0.3s infinite;
}

.btn:hover { filter: brightness(1.2); }

.btn.disabled {
    border-color: var(--header-border) !important;
    color: var(--meta);
    animation: none;
    pointer-events: none;
}

.empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--meta);
    font-size: 0.9rem;
    padding: 60px 0;
    letter-spacing: 2px;
}

.navbar {
  backdrop-filter: blur(0.8);
  background: #32393F;
  animation: shake 0.3s infinite;
  border-radius: 5px;
  overflow: hidden;
}



/* Style the links inside the navigation bar */
.navbar a {
  float: left;
  display: inline-block; 
  color: #f2f2f2;
  text-align: center;
  animation: shake 0.3s infinite;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  transition: all 0.3s ease 0s;
  cursor: pointer;
}

/* Change the color of links on hover */
.navbar a:hover {
  background-color: #ddd;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  animation: shake 0.3s infinite;
  outline: none;
  color: black;
}

/* Add an active class to highlight the current page */
.navbar a.active {
  background-color: #5865F2;
      animation: shake 0.3s infinite;
  color: white;
}

.navbar a.disabled {
  pointer-events: none;
  color: gray;
}

.navbar a.disabled:hover {
  background-color: #414582;
  cursor: not-allowed;
}

/* Hide the link that should open and close the topnav on small screens */
.navbar .hamb {
  display: none;
}




/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {display: none;}
  .navbar a.hamb {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.mobile {position: relative;}
  .navbar.mobile a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.mobile a {
    float: none;
    display: block;
    text-align: left;
  }
}


@media (max-width: 500px) { .catalog { grid-template-columns: 1fr 1fr; } }
@media (max-width: 320px) { .catalog { grid-template-columns: 1fr; } }