/* AfterTimeFault specific styles */
html { scrollbar-gutter: stable both-edges; }

/* Prevent container overflow */
.mod-description-container, .categories-layout, .tutorial-container, .features {
    max-width: 100%;
    overflow-x: hidden;
}

/* Ensure all images stay within their containers */
img {
    max-width: 100%;
    height: auto;
}

/* Neon purple-blue heading styles for theme-neon (replaces previous pinks) */
body.theme-neon h1 {
  color: #6C5CE7; /* primary neon purple */
  text-shadow: 0 0 10px rgba(108,92,231,0.6), 0 0 24px rgba(77,166,255,0.18);
}

body.theme-neon h2 {
  color: #7F93FF; /* lighter purple-blue */
  text-shadow: 0 0 8px rgba(127,147,255,0.5), 0 0 18px rgba(77,166,255,0.14);
}

body.theme-neon h3 {
  color: #9FB7FF; /* subtle neon blue for smaller headings */
  text-shadow: 0 0 6px rgba(159,183,255,0.45), 0 0 12px rgba(77,166,255,0.12);
}

/* Keep specific headings with proper contrast */
body.theme-neon.aftertimefault-page .hero-blur-overlay h2 {
  color: #fff; /* Keep this white for readability */
  text-shadow: 0 3px 10px rgba(0,0,0,0.55);
}

body.theme-neon.aftertimefault-page .content-inner h3 {
  color: #6c5ce7; /* Keep original purple color for content inner h3 */
}

.data-section {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.status-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.status-card {
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
    color: white;
}

.status-card.operational {
    background: linear-gradient(135deg, #4CAF50, #2E7D32);
}

.status-card.warning {
    background: linear-gradient(135deg, #FF9800, #F57C00);
}

.status-card.critical {
    background: linear-gradient(135deg, #F44336, #D32F2F);
}

.status-value {
    font-size: 2rem;
    font-weight: bold;
    margin: 0.5rem 0 0 0;
}

/* Animation for status cards */
.status-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.status-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.container {
    width: 100%;
    max-width: 800px;
}

.expandable-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.box-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s;
}

.box-header:hover {
    background-color: #f8f9fa;
}

.box-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #2d3436;
}

.arrow-button {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #6c5ce7;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    transform: rotate(0deg);
}

.arrow-button:hover {
    background: #5649c5;
}

.arrow-button svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.box-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease;
    background: #f8f9fa;
}

.content-inner {
    padding: 0 24px 24px 24px;
    color: #5e6668;
    line-height: 1.6;
}

.content-inner h3 {
    margin: 16px 0 8px 0;
    color: #6c5ce7;
}

.content-inner p {
    margin-bottom: 12px;
}

.content-inner ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.content-inner li {
    margin-bottom: 8px;
}

/* Expanded state */
.expandable-box.expanded .box-content {
    max-height: 500px;
}

.expandable-box.expanded .arrow-button {
    transform: rotate(180deg);
}

.instructions {
    text-align: center;
    color: white;
    margin-top: 30px;
    font-size: 1.1rem;
    opacity: 0.9;
}

/* Scrollable content for long text */
.scrollable-content {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

.scrollable-content::-webkit-scrollbar {
    width: 8px;
}

.scrollable-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
    background: #c5c5c5;
    border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
    background: #a5a5a5;
}

/* Image styles for category content */
.content-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  margin: 1rem 0;
}

.image-container {
  text-align: center;
  margin: 1.5rem 0;
}

.image-caption {
  font-style: italic;
  color: #6c757d;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

/* Responsive image grid for multiple images */
.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.image-grid img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* Layout for categories */
.categories-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  margin: 2rem 1rem;
}

.modules-column {
  width: 260px;
  min-width: 200px;
}

.details-column {
  flex: 1;
  min-width: 320px;
}

.modules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.module-button {
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e6e9ed;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s ease;
}

.module-button:hover {
  transform: translateX(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

.module-button.active {
  background: #6c5ce7;
  color: #fff;
  border-color: rgba(108,92,231,0.9);
}

.module-detail {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  padding: 18px;
}

.module-detail #module-content {
  margin-top: 12px;
}


/* Mod description card */
.mod-description-container {
  max-width: 960px;
  margin: 1rem auto 2rem auto;
  padding: 0 1rem;
}

.mod-card {
  background: #ffffff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  overflow: hidden;
}

.mod-card-header {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.mod-name {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
}

.mod-version {
  font-size: 0.9rem;
  font-weight: 600;
  margin-left: 0.6rem;
  color: #6c5ce7;
}

.mod-meta {
  margin-top: 6px;
  display: flex;
  gap: 12px;
  font-size: 0.9rem;
  color: #6b6f76;
}

.mod-card-body {
  padding: 16px 20px 20px 20px;
}

.mod-summary {
  margin: 0 0 12px 0;
  color: #3b3f44;
  line-height: 1.5;
}

.mod-features {
  margin: 8px 0 0 20px;
  color: #3b3f44;
}

.mod-features li {
  margin-bottom: 6px;
}

/* make sure the card looks good in dark/neon theme too */
body.theme-neon .mod-card {
  /* use neon panel background and readable text */
  background: var(--panel-bg);
  color: var(--text-primary);
  position: relative;
  border-radius: 12px;
  box-shadow: 0 8px 34px rgba(98,82,196,0.12), inset 0 0 30px rgba(167,119,227,0.06);
  border: 1px solid rgba(255,255,255,0.04);
  z-index: 1;
}

body.theme-neon .mod-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  pointer-events: none;
  z-index: 0;
  box-shadow: 0 0 28px rgba(110,142,251,0.14), 0 0 60px rgba(167,119,227,0.06);
}

body.theme-neon .mod-card > * { position: relative; z-index: 2; }

body.theme-neon .mod-card_header {
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 18px 20px;
}

body.theme-neon .mod-name { color: #ffffff; }
body.theme-neon .mod-version { color: var(--neon-accent-2); }
body.theme-neon .mod-meta { color: var(--text-dim); }
body.theme-neon .mod-summary,
body.theme-neon .mod-features { color: var(--text-primary); }

@media (max-width: 720px) {
  .mod-name { font-size: 1.25rem; }
  .mod-card-header, .mod-card_body { padding-left: 14px; padding-right: 14px; }
}

/* Responsive: stack columns on small screens */
@media (max-width: 800px) {
  .categories-layout {
    flex-direction: column;
  }

  .modules-column {
    width: 100%;
  }

  .details-column {
    width: 100%;
  }
}

/* Responsive video wrapper for YouTube embeds (fixed size requested) */
.video-wrapper {
  position: relative;
  width: 420px; /* requested fixed width */
  height: 315px; /* requested fixed height */
  max-width: 100%; /* allow shrink on very small screens */
  overflow: hidden;
  border-radius: 8px;
  margin: 0.5rem auto; /* center horizontally */
}
.video-wrapper iframe {
  width: 420px;
  height: 315px;
  max-width: 100%;
  max-height: 100%;
  display: block;
  border: 0;
}

/* Ensure thumbnail image matches the fixed size */
.video-thumb img {
  width: 420px;
  height: 315px;
  max-width: 100%;
  object-fit: cover;
  display: block;
  border-radius: 6px;
}
/* Base category tabs (restored) */
.category-tabs { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 14px 0; padding:0; }
.category-tabs--mobile { display:none; }
.category-tabs--desktop { display:flex; }
.category-tab { padding:10px 12px; background:#1f2130 ; border:1px solid #e6e9ed; border-radius:8px; cursor:pointer; text-align:left; transition:all .15s ease; font-size:.85rem; color: #fff;}
.category-tab:hover { transform:translateX(6px); box-shadow:0 6px 18px rgba(0,0,0,.06); }
.category-tab.active { background:#6c5ce7; color:#fff; border-color:rgba(108,92,231,.9); box-shadow:0 4px 14px -2px rgba(108,92,231,.55); }

/* Ensure header height consistent */
.main-header { box-sizing:border-box; }


.video-thumb {
  display: block;
  margin: 0 auto;
  cursor: pointer;
}

.video-caption {
  text-align: center;
  color: #444;
  font-size: 0.95rem;
  margin-top: 8px;
}

.video-thumb:hover img {
  transform: scale(1.02);
  transition: transform 120ms ease;
}

.notice-label {
    color: red;
}

.notice-label li {
    margin-left: 30px;
    color: green;
}

li {
    margin-left: 40px;
}

/* Compact hero-blur (final authoritative block) */
body.theme-neon.aftertimefault-page .hero-blur {
  --hero-width: 960px; /* adjust width for sidebar */
  width: 100%;
  max-width: var(--hero-width);
  aspect-ratio: 16 / 9;
  min-height: 260px; /* fallback */
  margin: 28px auto 36px auto;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000; /* letterbox fill */
  box-shadow: 0 6px 28px -6px rgba(0,0,0,0.55);
}
body.theme-neon.aftertimefault-page .hero-blur-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain; /* show full image */
  object-position: center center;
  filter: blur(6px) brightness(1.08);
  pointer-events: none;
}
body.theme-neon.aftertimefault-page .hero-blur::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.18);
  z-index: 1;
}
body.theme-neon.aftertimefault-page .hero-blur-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 1rem; text-align: center;
}
body.theme-neon.aftertimefault-page .hero-blur-overlay h2 {
  margin: 0 0 .55rem; font-size: 2rem; line-height: 1.18; text-shadow: 0 3px 10px rgba(0,0,0,0.55);
}
body.theme-neon.aftertimefault-page .hero-blur-overlay h1 {  /* new hero title styling */
  margin: 0 0 .55rem; font-size: 2.3rem; line-height: 1.15; font-color:#e2e6f0; text-shadow:0 3px 14px rgba(0,0,0,.6); font-size: 50px;
}
body.theme-neon.aftertimefault-page .hero-blur-overlay .hero-tagline { max-width:860px; font-size:1.02rem; line-height:1.4; margin:0 auto .9rem; }
.hero-actions { margin-top:.6rem; display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; }
.download-btn { background:#6c5ce7; color: #fff !important; padding:.7rem 1.35rem; border-radius:40px; font-weight:600; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; box-shadow:0 6px 22px -6px rgba(108,92,231,.55); transition:background .18s, transform .18s; }
.download-btn:hover { background:#5a4bcc; transform:translateY(-2px); }

/* Primary tabs */
.atf-tabs { margin: 0 auto 1.2rem; max-width:1100px; display:flex; gap:.6rem; flex-wrap:wrap; padding:0 1rem; }
.atf-tab { background:rgba(255,255,255,0.07); border:1px solid rgba(255,255,255,0.08); color:#cfd6ff; padding:.65rem 1.05rem; border-radius:10px; cursor:pointer; font-size:1.2rem; letter-spacing:.3px; backdrop-filter:blur(6px); transition:background .18s, color .18s, box-shadow .18s; width: 300px; }
.atf-tab:hover { background:rgba(255,255,255,0.12); color:#fff; }
.atf-tab.active { background:#6c5ce7; color:#fff; box-shadow:0 4px 16px -2px rgba(108,92,231,.6); border-color:rgba(255,255,255,0.12); }

.tab-panels { max-width:1100px; margin:0 auto 3rem; padding:0 1rem; }
.tab-panel { display:none; animation:fadeUp .4s ease; }
.tab-panel.active { display:block; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:translateY(0);} }

.panel-inner { background:var(--panel-bg,#1f2130); border:1px solid rgba(255,255,255,0.05); border-radius:14px; padding:1.4rem 1.6rem 1.7rem; box-shadow:0 8px 32px -10px rgba(0,0,0,.5), inset 0 0 24px -8px rgba(108,92,231,.26); }
.panel-inner h2 { margin-top:0; }
.overview-feature-list { margin:.9rem 0 0 1.1rem; padding:0; }
.overview-feature-list li { margin:.35rem 0; }

/* Modules layout */
.modules-layout { display:flex; gap:1.4rem; align-items:flex-start; }
.filters-panel { flex:0 0 240px; background:var(--panel-bg,#23263a); border:1px solid rgba(255,255,255,0.05); border-radius:14px; padding:1rem 1rem 1.25rem; top:90px; max-height:calc(100vh - 120px); overflow:auto; }
.filters-title { margin:.2rem 0 1rem; font-size:1rem; letter-spacing:.5px; }
.filter-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.95rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.8px; color:#9aa4c3; }
.filter-group select, .filter-group input { background:#151724; border:1px solid #2f3247; color:#e6e9f8; padding:.55rem .65rem; border-radius:8px; font-size:.85rem; }
.filter-group input:focus, .filter-group select:focus { outline:2px solid #6c5ce7; outline-offset:1px; }
.filter-actions { display:flex; justify-content:flex-end; margin-bottom:1rem; }
.reset-btn { background:#39405e; color:#fff; border:0; padding:.45rem .85rem; font-size:.75rem; border-radius:6px; cursor:pointer; letter-spacing:.6px; text-transform:uppercase; font-weight:600; }
.reset-btn:hover { background:#4d567b; }
.legend { font-size:.7rem; letter-spacing:.6px; }
.legend-title { font-size:.65rem; text-transform:uppercase; margin:.4rem 0 .4rem; color:#8e96b8; }

.modules-results { flex:1 1 auto; min-width:320px; }
.module-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(360px,1fr)); gap:1rem; }
.module-card { background:var(--panel-bg,#1f2130); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:.95rem .95rem 1.05rem; display:flex; flex-direction:column; position:relative; box-shadow:0 4px 24px -12px rgba(0,0,0,.7), inset 0 0 24px -10px rgba(108,92,231,.28); overflow:hidden; height: 250px; }
.module-card::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(108,92,231,.22),transparent 70%); opacity:.6; pointer-events:none; }
.module-card-head { display:flex; align-items:flex-start; gap:.4rem; }
.module-card-title { margin:0 0 .4rem; font-size:1.6rem; line-height:1.2; flex:1; }
.module-card-desc { margin:0 0 .7rem; font-size:.94rem; line-height:1.35; color:#c6cee6; }
.module-card-actions { margin-top:auto; display:flex; justify-content:flex-end; }
.details-btn { background:#6c5ce7; color:#fff; border:0; padding:.45rem .85rem; font-size:.7rem; text-transform:uppercase; font-weight:600; letter-spacing:.7px; border-radius:6px; cursor:pointer; box-shadow:0 4px 18px -4px rgba(108,92,231,.6); }
.details-btn:hover { background:#5a4bcc; }

.no-modules { margin:1rem 0; padding:1.1rem 1.2rem; background:#201f2d; border:1px dashed #464e6d; border-radius:12px; font-size:.85rem; }
.hidden { display:none !important; }

/* Tags */
.tag { display:inline-block; background:#2c3147; color:#d5def7; font-size:.55rem; padding:.25rem .5rem .28rem; border-radius:30px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; line-height:1; }
.tag-risk { background:#b83434; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,0.1),0 4px 18px -4px rgba(255,0,0,.5); }
.module-tag-media { background:#1f6f8f; color:#e8f9ff; box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 4px 14px -4px rgba(31,111,143,.55); }

/* Developer cards */
.dev-cards { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.dev-card { background:var(--panel-bg,#1f2130); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:1rem 1rem 1.2rem; box-shadow:0 6px 28px -12px rgba(0,0,0,.6); position:relative; }
.dev-link { color:#9fb7ff; text-decoration:none; font-weight:600; }
.dev-link:hover { color:#fff; text-decoration:underline; }

/* Modal */
.module-modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:1000; }
.module-modal.open { display:flex; }
.module-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); backdrop-filter:blur(3px); }
.module-modal-dialog { position:relative; background:#1d1f2c; width:min(920px,92%); max-height:86vh; overflow:auto; border-radius:18px; padding:1.4rem 1.5rem 2rem; border:1px solid rgba(255,255,255,.08); box-shadow:0 10px 48px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(108,92,231,.3); animation:modalIn .32s ease; }
@keyframes modalIn { from { opacity:0; transform:translateY(18px) scale(.96);} to { opacity:1; transform:translateY(0) scale(1);} }
.modal-close { position:absolute; top:8px; right:10px; background:#2c2f45; color:#fff; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; font-size:1.1rem; font-weight:600; display:flex; align-items:center; justify-content:center; }
.modal-close:hover { background:#424864; }
.modal-body { margin-top:.8rem; font-size:.85rem; line-height:1.45; }
.modal-body img { max-width:100%; height:auto; border-radius:8px; margin:.4rem 0; }

/* Scrollbars inside modal/dialog & filters panel */
.filters-panel::-webkit-scrollbar, .module-modal-dialog::-webkit-scrollbar { width:10px; }
.filters-panel::-webkit-scrollbar-track, .module-modal-dialog::-webkit-scrollbar-track { background:#171a26; }
.filters-panel::-webkit-scrollbar-thumb, .module-modal-dialog::-webkit-scrollbar-thumb { background:#30364b; border-radius:14px; }
.filters-panel::-webkit-scrollbar-thumb:hover, .module-modal-dialog::-webkit-scrollbar-thumb:hover { background:#424a66; }

/* Responsive adjustments */
@media (max-width: 980px) { .modules-layout { flex-direction:column; } .filters-panel { position:relative; top:0; max-height:none; width:100%; display:flex; flex-wrap:wrap; gap:1rem; }
  .filter-group { flex:1 1 160px; }
  .filter-actions { width:100%; order:10; }
}
@media (max-width: 560px) { .module-grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); } .atf-tabs { gap:.4rem; }
  .atf-tab { flex:1 1 auto; text-align:center; }
  body.theme-neon.aftertimefault-page .hero-blur-overlay h1 { font-size:1.9rem; }
  .hero-blur { aspect-ratio:16/10; }
}

/* === Refined layout: reintroduce modest gutters & fixed hero size === */
.aftertimefault-page .hero-blur.atf-hero-fixed { max-width:1100px !important; width:100% !important; margin:0 auto 34px auto !important; border-radius:18px !important; aspect-ratio:16/9 !important; }
.aftertimefault-page .hero-blur.atf-hero-fixed .hero-blur-bg { object-fit:cover !important; }
.aftertimefault-page .hero-blur.atf-hero-fixed .hero-blur-overlay { padding:0 clamp(18px,2.4vw,46px) !important; }
/* Gutters for tabs + panels */
.aftertimefault-page .atf-tabs { max-width:1500px !important; margin:0 auto 18px !important; padding-left:clamp(18px,3vw,54px) !important; padding-right:clamp(18px,3vw,54px) !important; }
.aftertimefault-page .tab-panels { max-width:1500px !important; margin:0 auto 48px !important; padding-left:clamp(18px,3vw,54px) !important; padding-right:clamp(18px,3vw,54px) !important; }
/* Restore panel look */
.aftertimefault-page .panel-inner { background:var(--panel-bg,#1f2130) !important; border:1px solid rgba(255,255,255,0.05) !important; border-radius:18px !important; box-shadow:0 6px 26px -8px rgba(0,0,0,0.55),0 0 0 1px rgba(255,255,255,0.03) !important; padding:clamp(22px,2.3vw,40px) clamp(22px,2.3vw,44px) !important; }
/* Slightly larger grid spacing again inside gutter */
.aftertimefault-page .modules-layout { padding-left:0 !important; padding-right:0 !important; }
.aftertimefault-page .module-grid { gap:1.15rem !important; }
/* Prevent unintended full-bleed overrides for dev cards */
.aftertimefault-page .dev-cards { padding:0 !important; }
/* Medium screens tweak */
@media (max-width:1100px){
  .aftertimefault-page .hero-blur.atf-hero-fixed { max-width:95% !important; }
}
@media (max-width:640px){
  .aftertimefault-page .panel-inner { padding:20px 18px !important; }
  .aftertimefault-page .atf-tabs { padding-left:14px !important; padding-right:14px !important; }
  .aftertimefault-page .tab-panels { padding-left:14px !important; padding-right:14px !important; }
}

/* Module card grid layout with tag row */
.aftertimefault-page .module-card { display:grid; grid-template-areas: 'head' 'desc' 'tags' 'actions'; grid-auto-rows:auto; row-gap:.55rem; }
.aftertimefault-page .module-card-head { grid-area:head; }
.aftertimefault-page .module-card-desc { grid-area:desc; margin:0; }
.aftertimefault-page .module-card-tags { grid-area:tags; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; min-height:1.4rem; }
.aftertimefault-page .module-card-actions { grid-area:actions; margin-top:0; }
.aftertimefault-page .module-tag { background:#2c3147; color:#d5def7; font-size:.55rem; padding:.25rem .5rem .28rem; border-radius:30px; font-weight:600; letter-spacing:.6px; text-transform:uppercase; line-height:1; }
.aftertimefault-page .module-tag-media { background:#1f6f8f; color:#e8f9ff; box-shadow:0 0 0 1px rgba(255,255,255,0.08),0 4px 14px -4px rgba(31,111,143,.55); }

.step-box {width: 50px; height: 50px; background:#2c3147; font-color:#fff; text-align: center; justify-content: center; align-items: center; display: flex; border-radius: 12px; font-size; 2px;}
.install-step-container {background:var(--panel-bg,#1f2130); border:1px solid rgba(255,255,255,0.06); border-radius:14px; padding:1rem 1rem 1.2rem; box-shadow:0 6px 28px -12px rgba(0,0,0,.6); position: relative;}
.install-step-container a {color:#9fb7ff; text-decoration:none; font-weight:600;}
.install-step-container a:hover { color:#fff; text-decoration:underline; }