/* =========================================================
   DazzleJunction.net
   Retro / Y2K / MySpace-inspired stylesheet
   Soft, playful, nostalgic, but still readable
   ========================================================= */

/* ------------------------------
   Root Variables
------------------------------ */

:root {
  --bg-main: #fff8ff;
  --bg-soft: #fdf2ff;
  --bg-panel: #ffffff;
  --bg-panel-alt: #f9ecff;

  --text-main: #4b3b52;
  --text-soft: #6c5b73;
  --text-light: #8e7b94;

  --accent-pink: #ff6fcf;
  --accent-purple: #b56bff;
  --accent-blue: #7fd6ff;
  --accent-aqua: #7ef2e7;
  --accent-gold: #ffd86b;

  --border-main: #efcfff;
  --border-strong: #dca8ff;
  --border-soft: #f7ddff;

  --shadow-soft: 0 4px 14px rgba(181, 107, 255, 0.10);
  --shadow-medium: 0 8px 24px rgba(181, 107, 255, 0.14);
  --shadow-glow: 0 0 12px rgba(255, 111, 207, 0.18);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 30px;

  --max-width: 1200px;
  --transition: 0.25s ease;

}



/* ------------------------------

   Reset / Base

------------------------------ */

*,

*::before,

*::after {

  box-sizing: border-box;

}



html {

  scroll-behavior: smooth;

}



body {

  margin: 0;

  padding: 0;

  background:

    radial-gradient(circle at top left, rgba(255, 111, 207, 0.10), transparent 24%),

    radial-gradient(circle at top right, rgba(127, 214, 255, 0.14), transparent 24%),

    linear-gradient(180deg, #fffaff 0%, #fff6fc 50%, #fdf6ff 100%);

  color: var(--text-main);

  font-family: Verdana, Arial, sans-serif;

  font-size: 16px;

  line-height: 1.6;

}



/* Optional sparkle texture feel without being too busy */

body::before {

  content: "";

  position: fixed;

  inset: 0;

  pointer-events: none;

  background-image:

    radial-gradient(circle, rgba(255,255,255,0.65) 0.8px, transparent 1px),

    radial-gradient(circle, rgba(255,111,207,0.12) 0.8px, transparent 1px);

  background-size: 24px 24px, 48px 48px;

  opacity: 0.22;

  z-index: -1;

}



img {

  max-width: 100%;

  height: auto;

  border: 0;

}



a {

  color: #9a34d6;

  text-decoration: none;

  transition: color var(--transition), opacity var(--transition);

}



a:hover,

a:focus {

  color: #ff4fbc;

  text-decoration: underline;

}



p {

  margin: 0 0 1rem;

}



ul,

ol {

  margin: 0 0 1rem 1.2rem;

}



hr {

  border: 0;

  height: 1px;

  background: linear-gradient(to right, transparent, var(--border-strong), transparent);

  margin: 2rem 0;

}



/* ------------------------------

   Layout

------------------------------ */

.site-wrap,

.container,

.page-wrap {

  width: min(100% - 24px, var(--max-width));

  margin-inline: auto;

}



.main-layout {

  display: grid;

  grid-template-columns: 280px minmax(0, 1fr);

  gap: 24px;

  align-items: start;

  margin-block: 24px;

}



.content-area,

main {

  min-width: 0;

}



.sidebar,

aside {

  min-width: 0;

}



/* ------------------------------

   Header

------------------------------ */

.site-header,

header {

  position: relative;

  background:

    linear-gradient(135deg, rgba(255,111,207,0.20), rgba(127,214,255,0.18)),

    linear-gradient(180deg, #fff5fd 0%, #fdf0ff 100%);

  border-bottom: 2px solid var(--border-main);

  box-shadow: var(--shadow-soft);

}



.header-inner {

  width: min(100% - 24px, var(--max-width));

  margin: 0 auto;

  padding: 22px 0 18px;

}



.site-title,

.logo-text {

  margin: 0;

  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

  font-size: clamp(2rem, 4vw, 3rem);

  line-height: 1.1;

  letter-spacing: 0.5px;

  font-weight: 800;

  color: #b030b0;

  text-shadow:

    1px 1px 0 #fff,

    0 0 12px rgba(255,111,207,0.20);

}



.site-title a,

.logo-text a {

  color: inherit;

  text-decoration: none;

}



.site-tagline,

.header-tagline {

  margin-top: 6px;

  color: var(--text-soft);

  font-size: 0.98rem;

}



/* ------------------------------

   Navigation

------------------------------ */

.top-nav,

.main-nav,

nav ul {

  list-style: none;

  margin: 16px 0 0;

  padding: 0;

}



.main-nav {

  margin-top: 14px;

}



.top-nav,

.main-nav {

  display: flex;

  flex-wrap: wrap;

  gap: 10px;

}



.top-nav a,

.main-nav a,

nav ul li a {

  display: inline-block;

  padding: 10px 16px;

  border-radius: 999px;

  background: linear-gradient(180deg, #ffffff 0%, #fff1fb 100%);

  border: 1px solid var(--border-main);

  color: var(--text-main);

  font-weight: 700;

  box-shadow: var(--shadow-soft);

  text-decoration: none;

}



.top-nav a:hover,

.main-nav a:hover,

nav ul li a:hover {

  color: #9a1ea8;

  border-color: var(--border-strong);

  background: linear-gradient(180deg, #fff9ff 0%, #ffe7f8 100%);

  text-decoration: none;

  transform: translateY(-1px);

}



/* ------------------------------

   Cards / Panels / Boxes

------------------------------ */

.card,

.panel,

.box,

.content-box,

.widget,

.section-box {

  background: linear-gradient(180deg, var(--bg-panel) 0%, #fff8fe 100%);

  border: 1px solid var(--border-main);

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-soft);

  padding: 18px;

  margin-bottom: 20px;

}



.card h2,

.panel h2,

.box h2,

.widget h2,

.section-box h2 {

  margin-top: 0;

}



.glow-box {

  background: linear-gradient(180deg, #fff8ff 0%, #fff2fb 100%);

  border: 1px solid #ffc5ef;

  box-shadow: var(--shadow-glow);

}



/* ------------------------------

   Headings

------------------------------ */

h1,

h2,

h3,

h4,

h5,

h6 {

  color: #9c36d6;

  line-height: 1.25;

  margin: 0 0 0.8rem;

  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;

}



h1 {

  font-size: clamp(1.9rem, 4vw, 2.6rem);

}



h2 {

  font-size: clamp(1.45rem, 3vw, 1.95rem);

}



h3 {

  font-size: 1.2rem;

}



.section-title {

  display: inline-block;

  padding: 8px 16px;

  background: linear-gradient(90deg, rgba(255,111,207,0.18), rgba(127,214,255,0.18));

  border: 1px solid var(--border-main);

  border-radius: 999px;

  box-shadow: var(--shadow-soft);

}

/* ------------------------------
   Sidebar
------------------------------ */

.sidebar,
aside {
  min-width: 0;
}

.sidebar .widget,
.sidebar .box,
aside .widget {
  padding: 14px 16px;
}

.sidebar h3,
aside h3 {
  font-size: 1rem;
  margin-bottom: 8px;
  color: #b13fc2;
}

.sidebar ul,
aside ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar li,
aside li {
  margin: 0;
}

.sidebar a,
aside a {
  display: block;
  padding: 4px 8px;
  margin-bottom: 2px;
  border-radius: 10px;
  border: 1px solid transparent;
  color: #7c3f92;
  background: rgba(255, 255, 255, 0.42);
  font-size: 0.94rem;
  line-height: 1.2;
  text-decoration: none;
}

.sidebar a:hover,
aside a:hover {
  background: #fff2fb;
  border-color: var(--border-main);
  color: #d12cae;
  text-decoration: none;
}

@media (max-width: 640px) {
  .sidebar a,
  aside a {
    min-height: 48px;
    padding: 10px 12px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
  }
}


/* ------------------------------

   Buttons

------------------------------ */

button,

.button,

.btn,

input[type="submit"],

input[type="button"],

input[type="reset"] {

  display: inline-block;

  padding: 11px 18px;

  border: 1px solid #f1b3e7;

  border-radius: 999px;

  background: linear-gradient(180deg, #fff7fd 0%, #ffdff4 100%);

  color: #8e247d;

  font-weight: 700;

  font-size: 0.98rem;

  cursor: pointer;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    background var(--transition);

}



button:hover,

.button:hover,

.btn:hover,

input[type="submit"]:hover,

input[type="button"]:hover,

input[type="reset"]:hover {

  transform: translateY(-1px);

  background: linear-gradient(180deg, #fffafc 0%, #ffccea 100%);

  box-shadow: var(--shadow-medium);

}



.button.secondary,

.btn.secondary {

  background: linear-gradient(180deg, #f7fbff 0%, #dff6ff 100%);

  color: #2f7690;

  border-color: #bce9ff;

}



/* ------------------------------

   Forms

------------------------------ */

form {

  margin: 0;

}



label {

  display: inline-block;

  margin-bottom: 6px;

  font-weight: 700;

  color: var(--text-main);

}



input[type="text"],

input[type="email"],

input[type="search"],

input[type="url"],

input[type="password"],

textarea,

select {

  width: 100%;

  max-width: 100%;

  padding: 12px 14px;

  border: 1px solid var(--border-main);

  border-radius: 14px;

  background: #fff;

  color: var(--text-main);

  font: inherit;

  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03);

  transition: border-color var(--transition), box-shadow var(--transition);

}



input[type="text"]:focus,

input[type="email"]:focus,

input[type="search"]:focus,

input[type="url"]:focus,

input[type="password"]:focus,

textarea:focus,

select:focus {

  outline: none;

  border-color: var(--accent-purple);

  box-shadow: 0 0 0 4px rgba(181, 107, 255, 0.12);

}



textarea {

  min-height: 120px;

  resize: vertical;

}



/* ------------------------------

   Hero / Intro Area

------------------------------ */

.hero,

.intro-box,

.welcome-box {

  position: relative;

  overflow: hidden;

  background:

    linear-gradient(135deg, rgba(255,111,207,0.15), rgba(127,242,231,0.18)),

    linear-gradient(180deg, #fff8fe 0%, #fff1fb 100%);

  border: 1px solid var(--border-main);

  border-radius: var(--radius-xl);

  padding: 28px 24px;

  box-shadow: var(--shadow-medium);

  margin-bottom: 24px;

}



.hero h1,

.intro-box h1,

.welcome-box h1 {

  margin-bottom: 10px;

}



.hero p,

.intro-box p,

.welcome-box p {

  color: var(--text-soft);

  font-size: 1.02rem;

}



/* ------------------------------

   Image / Gallery Styling

------------------------------ */

.gallery-grid,

.image-grid,

.thumb-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 18px;

}



.gallery-item,

.thumb-item,

.image-card {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 12px;

  box-shadow: var(--shadow-soft);

  text-align: center;

  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

}



.gallery-item:hover,

.thumb-item:hover,

.image-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.gallery-item img,

.thumb-item img,

.image-card img {

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background: #fff;

  margin-bottom: 10px;

}



.gallery-item .title,

.thumb-item .title,

.image-card .title {

  color: var(--text-main);

  font-weight: 700;

  font-size: 0.95rem;

  word-break: break-word;

}



/* ------------------------------

   Pretty image display pages

------------------------------ */

.feature-image,

.preview-image,

.main-image {

  display: block;

  margin: 0 auto 16px;

  border-radius: 20px;

  border: 1px solid var(--border-main);

  box-shadow: var(--shadow-medium);

  background: #fff;

  padding: 8px;

}



.caption,

.image-caption,

.description {

  color: var(--text-soft);

  text-align: center;

  max-width: 760px;

  margin: 0 auto 16px;

}



/* ------------------------------

   Tables

------------------------------ */

table {

  width: 100%;

  border-collapse: collapse;

  background: #fff;

  border-radius: 16px;

  overflow: hidden;

  box-shadow: var(--shadow-soft);

  border: 1px solid var(--border-main);

}



th,

td {

  padding: 12px 14px;

  text-align: left;

  border-bottom: 1px solid #f5ddff;

}



th {

  background: linear-gradient(180deg, #fff1fb 0%, #f7edff 100%);

  color: #8c2fb7;

  font-weight: 700;

}



tr:nth-child(even) td {

  background: #fffafe;

}



/* ------------------------------

   Pagination

------------------------------ */

.pagination {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  align-items: center;

  margin: 28px 0;

}



.pagination a,

.pagination span {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 42px;

  height: 42px;

  padding: 0 14px;

  border-radius: 999px;

  border: 1px solid var(--border-main);

  background: #fff;

  color: var(--text-main);

  font-weight: 700;

  box-shadow: var(--shadow-soft);

}



.pagination a:hover {

  background: #fff0fa;

  text-decoration: none;

}



.pagination .current,

.pagination span.current {

  background: linear-gradient(180deg, #ffebf8 0%, #ffd7f0 100%);

  color: #a12890;

  border-color: #f2a7dc;

}



/* ------------------------------

   Notice / Info Boxes

------------------------------ */

.notice,

.alert,

.info-box,

.tip-box {

  padding: 14px 16px;

  border-radius: 16px;

  margin-bottom: 18px;

  border: 1px solid;

}



.notice,

.info-box {

  background: #f7fcff;

  border-color: #cbeeff;

  color: #336479;

}



.tip-box {

  background: #fff9ee;

  border-color: #ffe3a0;

  color: #8a6631;

}



.alert {

  background: #fff0f6;

  border-color: #ffc2de;

  color: #9a3b68;

}



/* ------------------------------

   Footer

------------------------------ */

.site-footer,

footer {

  margin-top: 40px;

  border-top: 2px solid var(--border-main);

  background:

    linear-gradient(180deg, #fff5fc 0%, #fffafd 100%);

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);

}



.footer-inner {

  width: min(100% - 24px, var(--max-width));

  margin: 0 auto;

  padding: 22px 0 34px;

  color: var(--text-soft);

  font-size: 0.95rem;

}



.site-footer a,

footer a {

  color: #a033bf;

}



/* ------------------------------

   Utility

------------------------------ */

.text-center {

  text-align: center;

}



.text-right {

  text-align: right;

}



.muted {

  color: var(--text-light);

}



.rounded {

  border-radius: var(--radius-lg);

}



.shadow {

  box-shadow: var(--shadow-soft);

}



.hide {

  display: none !important;

}



/* ------------------------------

   Responsive

------------------------------ */

@media (max-width: 900px) {

  .main-layout {

    grid-template-columns: 1fr;

  }



  .sidebar,

  aside {

    order: 2;

  }



  .content-area,

  main {

    order: 1;

  }



  .header-inner {

    padding-top: 18px;

    padding-bottom: 16px;

  }



  .hero,

  .intro-box,

  .welcome-box,

  .card,

  .panel,

  .box,

  .widget {

    padding: 16px;

  }

}



@media (max-width: 640px) {

  body {

    font-size: 15px;

  }



  .site-title,

  .logo-text {

    font-size: clamp(1.8rem, 7vw, 2.4rem);

  }



  .top-nav,

  .main-nav {

    gap: 8px;

  }



  .top-nav a,

  .main-nav a,

  nav ul li a {

    width: 100%;

    text-align: center;

  }



  .gallery-grid,

  .image-grid,

  .thumb-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px;

  }




  .pagination a,

  .pagination span {

    min-width: 38px;

    height: 38px;

    padding: 0 10px;

  }

}



.branding {

  margin-bottom: 14px;

}







/* Layout Thumbnails Grid */

.layout-thumbnails {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

  gap: 18px;

  margin: 18px 0;

}



/* Individual Thumbnail Card */

#thumbcat {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 12px;

  text-align: center;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



/* Hover effect (makes it feel alive) */

#thumbcat:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



/* Title */

#thumbcattitle {

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--text-main);

  margin-bottom: 10px;

  word-break: break-word;

}



/* Image */

.thumbcatimg {

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



/* =========================================================

   Layout Thumbnails (Updated for .net retro-soft theme)

   ========================================================= */



/* You no longer need these old variables, but keeping structure clean */

:root {

  /* (optional placeholder if you still reference these elsewhere) */

}



/* Grid */

.layout-thumbnails {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 20px;

  margin: 24px 0;

  padding: 0;

  list-style: none;

}



/* Card */

.layout-thumb {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 14px;

  text-align: center;

  box-shadow: var(--shadow-soft);

  color: var(--text-main);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



/* Hover */

.layout-thumb:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



/* Image */

.layout-thumb img {

  display: block;

  width: 100%;

  aspect-ratio: 1 / 1;

  object-fit: cover;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background: #fff;

  margin-bottom: 10px;

}



/* Title */

.layout-thumb h3 {

  margin: 8px 0 4px;

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--text-main);

}



/* Links */

.layout-thumb a {

  color: inherit;

  text-decoration: none;

}



.layout-thumb a:hover {

  color: #ff4fbc;

  text-decoration: none;

}



/* =========================================================

   Pagination (match main stylesheet style)

   ========================================================= */



.pagination {

  display: flex;

  flex-wrap: wrap;

  gap: 8px;

  justify-content: center;

  align-items: center;

  margin: 28px 0;

}



.pagination a,

.pagination strong {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 42px;

  height: 42px;

  padding: 0 14px;

  border-radius: 999px;

  border: 1px solid var(--border-main);

  background: #fff;

  color: var(--text-main);

  font-weight: 700;

  box-shadow: var(--shadow-soft);

  text-decoration: none;

}



/* Hover */

.pagination a:hover {

  background: #fff0fa;

}



/* Current page */

.pagination strong {

  background: linear-gradient(180deg, #ffebf8 0%, #ffd7f0 100%);

  color: #a12890;

  border-color: #f2a7dc;

}



.layout-thumb:hover {

  transform: translateY(-3px) rotate(-0.3deg);

}



/* Background category grid */

.background-thumbnails {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

  gap: 22px;

}



.background-thumb {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 14px;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



.background-thumb:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.background-thumb a {

  display: block;

  color: inherit;

  text-decoration: none;

}



.background-thumb-title {

  margin: 0 0 12px;

  font-size: 0.98rem;

  font-weight: 700;

  color: #b13fc2;

  line-height: 1.3;

}



.background-preview {

  position: relative;

  overflow: hidden;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background-color: #fff;

  background-repeat: repeat;

  background-position: top left;

  min-height: 170px;

}



.background-preview img {

  display: block;

  width: 100%;

  height: 170px;

  object-fit: cover;

  opacity: 0;

}



.single-page {

  width: min(100% - 24px, 980px);

  margin: 24px auto;

}



.background-main-link {

  display: inline-block;

  text-decoration: none;

}



.background-main-preview {

  width: min(100%, 520px);

  height: 190px;

  margin: 0 auto;

  border-radius: 18px;

  border: 1px solid var(--border-main);

  background-color: #fff;

  background-repeat: repeat;

  background-position: top left;

  overflow: hidden;

  box-shadow: var(--shadow-medium);

}



.background-main-preview img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  display: block;

}



.preview-note {

  margin-top: 14px;

  color: var(--text-soft);

}



.share-card h2 {

  text-align: center;

  margin-bottom: 14px;

}



.share-buttons {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

}



.share-buttons a {

  display: inline-block;

  padding: 10px 16px;

  border-radius: 999px;

  background: linear-gradient(180deg, #fff7fd 0%, #ffdff4 100%);

  border: 1px solid #f1b3e7;

  color: #8e247d;

  font-weight: 700;

  text-decoration: none;

  box-shadow: var(--shadow-soft);

}



.share-buttons a:hover {

  background: linear-gradient(180deg, #fffafc 0%, #ffccea 100%);

  text-decoration: none;

}



.similar-thumbs {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 18px;

  margin-top: 18px;

}



.similar-thumb {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 18px;

  padding: 12px;

  box-shadow: var(--shadow-soft);

  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);

}



.similar-thumb:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.similar-thumb a {

  text-decoration: none;

  color: inherit;

  display: block;

}



.similar-thumb-preview {

  height: 120px;

  border-radius: 12px;

  border: 1px solid var(--border-soft);

  background-color: #fff;

  background-repeat: repeat;

  background-position: top left;

  overflow: hidden;

  margin-bottom: 10px;

}



.similar-thumb-preview img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  opacity: 0;

  display: block;

}



.similar-thumb .caption {

  font-size: 0.92rem;

  font-weight: 700;

  color: var(--text-main);

  text-align: center;

}



.contact-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 20px;

  justify-items: center;

}



.contact-card {

  width: 100%;

  max-width: 340px;

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 14px;

  text-align: center;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



.contact-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.contact-card img {

  display: block;

  width: 300px;

  max-width: 100%;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background: #fff;

  padding: 0;

}



.contact-title {

  margin: 0 0 12px;

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.3;

}



.not-found {

  text-align: center;

  color: var(--text-soft);

  padding: 12px 0;

}



/* =========================================================

   Contact Tables Top Menu

   ========================================================= */



.top-menu {

  margin: 18px auto 24px;

}



.top-menu ul {

  list-style: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 10px;

}



.top-menu li {

  margin: 0;

}



.top-menu a {

  display: inline-block;

  padding: 10px 16px;

  border-radius: 14px;

  background: linear-gradient(180deg, #ffffff 0%, #fff4fc 100%);

  border: 1px solid var(--border-main);

  color: var(--text-main);

  font-weight: 700;

  font-size: 0.98rem;

  line-height: 1.2;

  text-decoration: none;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition),

    background var(--transition),

    color var(--transition);

}



.top-menu a:hover,

.top-menu a:focus {

  background: linear-gradient(180deg, #fff9ff 0%, #ffe7f8 100%);

  border-color: var(--border-strong);

  color: #a12890;

  text-decoration: none;

  transform: translateY(-1px);

  box-shadow: var(--shadow-medium);

}



.top-menu a.is-active {

  background: linear-gradient(180deg, #ffebf8 0%, #ffd7f0 100%);

  border-color: #f2a7dc;

  color: #a12890;

  box-shadow: var(--shadow-soft);

}



@media (max-width: 640px) {

  .top-menu {

    margin: 14px auto 20px;

  }



  .top-menu ul {

    gap: 8px;

  }



  .top-menu a {

    padding: 9px 13px;

    font-size: 0.92rem;

  }

}



/* =========================================================

   Comment Boxes - Shared

   ========================================================= */



.comment-boxes-grid {

  display: grid;

  gap: 22px;

  justify-content: center;

}



.comment-box-card {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 14px;

  text-align: center;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



.comment-box-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.comment-box-card img {

  display: block;

  margin: 0 auto 12px;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.comment-box-title {

  margin: 0 0 12px;

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.3;

}



/* =========================================================

   Vertical Comment Boxes

   ========================================================= */



.vertical-comment-grid {

  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));

}



.vertical-comment-card {

  max-width: 220px;

  margin: 0 auto;

}



.vertical-comment-card img {

  width: auto;

  max-width: 100%;

  height: auto;

}



/* =========================================================

   Standard / wider comment boxes

   ========================================================= */



.standard-comment-grid {

  grid-template-columns: repeat(auto-fit, minmax(260px, 320px));

}



.standard-comment-card {

  max-width: 320px;

  margin: 0 auto;

}



.standard-comment-card img {

  width: 100%;

  height: auto;

}

/* =========================================================

   Slim Comment Boxes

   ========================================================= */



.slim-comment-grid {

  display: grid;

  grid-template-columns: 1fr;

  gap: 18px;

  justify-items: center;

}



.slim-comment-card {

  width: 100%;

  max-width: 360px;

  margin: 0 auto;

  padding: 14px;

}



.slim-comment-card img {

  display: block;

  width: 100%;

  max-width: 300px;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 10px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.slim-comment-card .comment-box-title {

  font-size: 0.9rem;

  margin-bottom: 12px;

}



@media (min-width: 700px) {

  .slim-comment-grid {

    grid-template-columns: repeat(2, minmax(260px, 360px));

  }

}

/* =========================================================

   Small Comment Boxes

   ========================================================= */



.small-comment-grid {

  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));

  justify-content: center;

}



.small-comment-card {

  max-width: 260px;

  margin: 0 auto;

}



.small-comment-card img {

  display: block;

  width: 100%;

  max-width: 190px;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 12px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.small-comment-card .comment-box-title {

  font-size: 0.9rem;

  margin-bottom: 12px;

}

/* =========================================================

   Wide Comment Boxes

   ========================================================= */



.wide-comment-grid {

  grid-template-columns: 1fr;

  gap: 20px;

  justify-items: center;

}



.wide-comment-card {

  width: 100%;

  max-width: 420px;

  margin: 0 auto;

}



.wide-comment-card img {

  display: block;

  width: 100%;

  max-width: 320px;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 12px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.wide-comment-card .comment-box-title {

  font-size: 0.9rem;

  margin-bottom: 12px;

}

/* =========================================================

   Comment Buttons Index

   ========================================================= */



.comment-button-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));

  gap: 20px;

  justify-content: center;

}



.comment-button-card {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 14px;

  text-align: center;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



.comment-button-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.comment-button-card img {

  display: block;

  width: auto;

  max-width: 100%;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 12px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.comment-button-title {

  margin: 0 0 8px;

  font-size: 0.92rem;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.3;

}



.download-link {

  display: inline-block;

  margin-top: 4px;

  padding: 8px 14px;

  border-radius: 999px;

  background: linear-gradient(180deg, #fff7fd 0%, #ffdff4 100%);

  border: 1px solid #f1b3e7;

  color: #8e247d;

  text-decoration: none;

  font-weight: 700;

  font-size: 0.85rem;

  box-shadow: var(--shadow-soft);

}



.download-link:hover,

.download-link:focus {

  background: linear-gradient(180deg, #fffafc 0%, #ffccea 100%);

  text-decoration: none;

}



/* =========================================================

   Comments

   ========================================================= */



.comments-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(180px, 220px));

  gap: 20px;

  justify-content: center;

}



.comments-card {

  background: linear-gradient(180deg, #ffffff 0%, #fff6fc 100%);

  border: 1px solid var(--border-main);

  border-radius: 20px;

  padding: 14px;

  text-align: center;

  box-shadow: var(--shadow-soft);

  transition:

    transform var(--transition),

    box-shadow var(--transition),

    border-color var(--transition);

}



.comments-card:hover {

  transform: translateY(-3px);

  box-shadow: var(--shadow-medium);

  border-color: var(--border-strong);

}



.comments-card img {

  display: block;

  width: auto;

  max-width: 100%;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 12px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.comments-title {

  margin: 0;

  font-size: 0.92rem;

  font-weight: 700;

  color: var(--text-main);

  line-height: 1.3;

}



.comment-full-image {

  display: block;

  max-width: 100%;

  height: auto;

  margin: 0 auto 14px;

  border-radius: 14px;

  border: 1px solid var(--border-soft);

  background: #fff;

}

/* =========================================================

   Comments Index / Category Cards

   ========================================================= */



.comments-category-grid {

  grid-template-columns: repeat(auto-fit, minmax(150px, 190px));

  justify-content: center;

  gap: 20px;

}



.comments-category-card {

  padding: 14px 12px;

}



.comments-category-card img {

  display: block;

  width: auto;

  max-width: 100%;

  height: auto;

  margin: 0 auto 12px;

  border-radius: 12px;

  border: 1px solid var(--border-soft);

  background: #fff;

}



.comments-category-card .comments-title {

  margin: 0;

  font-size: 0.92rem;

  line-height: 1.3;

}



.comments-category-card .comments-title a {

  color: var(--text-main);

  text-decoration: none;

}



.comments-category-card .comments-title a:hover,

.comments-category-card .comments-title a:focus {

  color: #ff4fbc;

  text-decoration: underline;

}

.category-bottom-links {
  margin-top: 1.5rem;
  text-align: center;
}

.category-nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
}

.category-nav-links a {
  display: inline-block;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  background: var(--color-dark, #3a3f5f);
  color: #fff;
}

.category-nav-links a:hover {
  background: var(--color-pink, #f2a6cf);
  color: var(--color-darkest, #2b3044);
}