/* ACCID UI System (CSS/HTML only)
   Depends on color tokens in /static/css/accid-complete-palette.css
   Keep this lightweight and composable. */
 /* Fallbacks if palette not loaded (will be overridden by accid-complete-palette.css)*/
:root {


--card-hover: radial-gradient(circle at 50% 100%, rgba(0, 0, 0, 0.2) 0%, transparent 100%);

  /*
  --brand: var(--c2); --brand-75: rgba(255, 102, 0, 0.75); --on-brand: #fff; --brand-a20: rgba(255, 102, 0, 0.2);
  --accent: var(--c6); --on-accent: #fff; --accent-a20: rgba(102,255,,.2);
  --neutral-0: #fff; --neutral-50: #f7f7f8; --neutral-100: #eff1f3; --neutral-200: #e3e6ea;
  --neutral-300: #cfd5db; --neutral-600: #5a6470; --neutral-800: #2b323b; --neutral-900: #151a1f;
  --success: var(--c3); --warning: var(--c2); --danger: var(--c1); --info: var(--c5);
  --space-xs: .25rem; --space-sm: .5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem;
  --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 999px;
  */
}

/* ===== Oswald (Headings) ===== */

.accidlogo {
  width: 100%;
  height: 100%;
  position: relative;
  mask-image: url(/img/accid-ani16.svg);
  mask-repeat: no-repeat;
  mask-size: contain;
  filter: saturate(10);
  object-fit: cover;
  margin: 0px;
  padding: 0px;
  mask-position: center center;
}

@font-face {
  font-family: "Oswald";
  src: url("/static/fonts/Oswald/Oswald-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 200 900;   /* supported weight range */
  font-stretch: 75% 125%; /* supported width range */
  font-style: normal;
  font-display: swap;
}

/* ===== Cabin Variable (Body) ===== */
@font-face {
  font-family: "Cabin";
  src: url("/static/fonts/Cabin/Cabin-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 200 900;   /* supported weight range */
  font-stretch: 75% 125%; /* supported width range */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Cabin";
  src: url("/static/fonts/Cabin/Cabin-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}
/* ===== JetBrains Mono Nerd Font (Code) ===== */
@font-face {
  font-family: "JetBrainsMono NF";
  src: url("/static/fonts/JetBrainsMonoNerdFont/JetBrainsMonoNLNerdFontMono-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono NF";
  src: url("/static/fonts/JetBrainsMonoNerdFont/JetBrainsMonoNLNerdFontMono-MediumItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono NF";
  src: url("/static/fonts/JetBrainsMonoNerdFont/JetBrainsMonoNLNerdFontMono-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ===== Usage ===== "Comic Sans MS", "Comic Sans", */
:root {
  --font-heading: "Oswald", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-code: "JetBrainsMono NF", "JetBrains Mono", Menlo, Consolas, monospace;
}

html {
  font-family: var(--font-body);
  font-family:  "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body { margin: 0; padding: 0; }


.bg-primary { background: var(--primary-color); }
.bg-success { background: var(--success-color); }
.bg-warning { background: var(--warning-color); }
.bg-danger { background: var(--danger-color); }
.bg-info { background: var(--primary-color); }

.bg-black { background: #000 !important; }
.bg-white { background: #fff; }

.bg-accent { background: var(--accent); }

.bg-brand { background: var(--brand); }

.color-900 { color: var(--neutral-900); }
.color-800 { color: var(--neutral-800); }
.color-700 { color: var(--neutral-700); }
.color-600 { color: var(--neutral-600); }
.color-500 { color: var(--neutral-500); }
.color-400 { color: var(--neutral-400); }
.color-300 { color: var(--neutral-300); }
.color-200 { color: var(--neutral-200); }
.color-100 { color: var(--neutral-100); }
.color-50 { color: var(--neutral-50); }
.color-0 { color: var(--neutral-0); }

.blk-text-shadow { text-shadow: 1px 1px 2px rgba(0,0,0,0.3); color:#ffffff; }
.wht-text-shadow { text-shadow: 1px 1px 2px rgba(255,255,255,0.3); }


.action-btn,
action-btn:link,
action-btn:visited {
  font-weight: 600;
  backdrop-filter: blur(10px);
  color: rgb(255, 255, 255);
  background: var(--success);
  border-width: 2px;
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.65);
  border-image: initial;
  padding: 0.1rem;
  border-radius: 50px;
  transition: 0.3s;
  text-decoration: none;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 25px;
  color: var(--neutral-900);
  background: var(--warning);
  text-decoration: none;
}

.action-btn,
action-btn:link,
action-btn:visited {
  background: var(--success);
  border: 2px solid rgba(255, 255, 255, 0.65);
  color: white;
  padding: 0.1rem .1rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  text-decoration: none;
  color: #fff;
}


.action-btn:hover {
  background: var(--warning);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  color: var(--neutral-900);
  text-decoration: none;
}

.action-btn.bg-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
}


.action-sub-btn {
  font-size: 14px;
  border: 1px solid rgba(255, 255, 255, 0.65);
  padding: 0.1rem .1rem;
  border-radius: 15px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  margin: .25rem 0;
  display: inline-block;

}


.action-btn span,
.action-sub-btn span {
  background: linear-gradient(180deg, #fffeff95 0%, #ffffff5a 45%, #ffffff11 100%);
  padding: .25rem 1.5rem .25rem 1.5rem;
  border-radius: 15px;
  display: block;
}

.action-sub-btn span {
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}

.action-sub-btn:hover {
  background: var(--success);
  transform: translateY(-1px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.action-btn:hover span,
.action-sub-btn:hover span {
  background: linear-gradient(180deg, #ffffff1f 0%, #00000028 65%, #00000051 100%);
  color: var(--neutral-0);
}

.action-sub-btn:hover span {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.action-btn span {
  padding: 0.5rem 1.25rem;
  border-radius: 50px;
  display: block;
  font-size: 1.25rem;
}

.action-btn:hover span {
  padding: 0.5rem 1.25rem 0.75rem 1.25rem;
}

h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); max-width: 93vw;  margin: 20px auto !important;}
h2 { font-size: clamp(1.25rem, 3.5vw, 1.875rem); }
h3 { font-size: clamp(1.125rem, 3vw, 1.5rem); }
h4 { font-size: clamp(1rem, 2.5vw, 1.25rem); }
h5 { font-size: clamp(0.875rem, 2vw, 1rem); }
h6 { font-size: clamp(0.75rem, 1.5vw, 0.875rem); }

.subh1 { font-size: clamp(1.125rem, 3vw, 1.688rem); }
.subh2 { font-size: clamp(0.938rem, 2.625vw, 1.406rem); }
.subh3 { font-size: clamp(0.844rem, 2.25vw, 1.125rem); }
.subh4 { font-size: clamp(0.75rem, 1.875vw, 0.938rem); }
.subh5 { font-size: clamp(0.656rem, 1.5vw, 0.75rem); }
.subh6 { font-size: clamp(0.563rem, 1.125vw, 0.656rem); }


.subh1, .subh2, .subh3, .subh4, .subh5, .subh6 {
  font-family: var(--font-heading);
  font-family: "Oswald", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem 0;
  padding: 0 0 10px 0;  }

  .subhleft { text-align: left; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-family: "Oswald", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 200;
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin: 0 0 0.5rem 0rem;
  padding: 0 0 10px 10px;
    background:linear-gradient(90deg,
     var(--c3) 6%,
    var(--c2) 11%,
     transparent 16%,
      var(--c1) 24%,
    var(--c4) 27%,
    var(--c6) 30%,
    var(--c5) 49%,
  var(--c2) 75%) bottom repeat-x;
  background-color:transparent;
  background-position: bottom;
  background-size:205% 1px,
    800% 1px,
    10px 30%,
    4px 0%,
    1px 50%,
    50% 750%;
  transition:.25s linear; }
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover { background-position: bottom ;}
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {background-size: 25% 1px,
  20% 10px,
  5px 20%,
  20px 0%,
  0% 100%;
transition:1.5s ease-in-out; }

  h1, h2, h3, h4, h5, h6 { font-weight: 100;  }
h1 span {
  background-image: linear-gradient(to right, var(--c1) 15%, var(--c5) 24%, var(--c6) 60%);
      -webkit-background-clip: text;
      background-clip: text;
       background-size: 200%;
       background-position: left;
      -webkit-text-fill-color: transparent; /* For WebKit browsers */
      color: transparent;
      transition:1.0s ease-in-out;
}

h1:hover span, h2:hover span, h3:hover span, h4:hover span, h5:hover span, h6:hover span {
  background-image: linear-gradient(to left, var(--c2), var(--c6), var(--c1),  var(--c5), var(--c3), var(--c6));
  background-size: 85%;
  background-position: right;
  transition:1.5s ease-in-out;}

code, pre, kbd, samp {
  font-family: var(--font-code);
  font-weight: 400;
  font-size: 0.95em;
}

.project-meta { color: #333; }


/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-xl); }
.grid { display: grid; gap: var(--space-lg); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-md { gap: var(--space-md); }

/* Header */
.header { background: linear-gradient(135deg, var(--brand), var(--accent)); color: var(--on-brand); padding: var(--space-lg) var(--space-xl); box-shadow: 0 8px 25px rgba(0,0,0,.15); position: sticky; top: 0; z-index: 100; }
/*.header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }*/
.header-logo { font-size: 1.5rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,.15); }
.header-nav { display: flex; gap: var(--space-lg); align-items: center; }

/* Buttons */
button { outline: none; border: none; cursor: pointer;  padding: 4px 8px; border-radius: 8px; font-weight: 500; font-size: 1rem; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; color: inherit; background: var(--neutral-0); }

.btn { display: inline-flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm) var(--space-sm); border: .5px solid #efefef; border-radius: var(--radius-md); font-weight: 500; font-size: 1rem; cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;  }
.btn:hover {
    transform: translateY(1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    border: 1px solid rgba(255, 0, 102, .5);
}
.btn-primary { background: linear-gradient(135deg, var(--brand), var(--brand-75)); color: var(--on-brand); }
.btn-secondary { background: var(--neutral-0); color: var(--neutral-800); border: 0px solid var(--neutral-300); }
.btn-success { background: linear-gradient(135deg, var(--success), var(--c3)); color: #fff; }
.btn-danger { background: linear-gradient(135deg, var(--danger), var(--c1)); color: #fff; }
.btn-lg { padding: var(--space-md) var(--space-xl); font-size: 1rem; }
.btn-sm { padding: var(--space-xs) var(--space-md); font-size: .8rem; }


.trashDashboardBtn.btn:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0); border: 0; ;}

/* Outline button variant: solid background with border, reduced "skittles" */
.btn-outline { background: var(--neutral-0); color: var(--neutral-800); border: 1px solid var(--neutral-300); }
.btn-outline:hover { background: var(--neutral-100); }
.btn-outline.btn-primary { border-color: var(--brand); color: var(--brand); }
.btn-outline.btn-success { border-color: var(--success); color: var(--success); }
.btn-outline.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-outline.btn-secondary { border-color: var(--neutral-300); color: var(--neutral-800); }




/* ACCORDION */
        details {
  border: 0px solid #ccc;
  margin-bottom: 10px;
  border-radius: 4px;
}

summary {
  padding: 10px 15px;
  cursor: pointer;
  font-weight: 400;
  list-style: none; /* Removes default arrow/marker */
}

details.smlspace, .smlspace  { margin: 0; padding: 0;}
details.smlspace summary { padding: 5px 5px;}
details.smltext, .smltext { font-size: .8rem;}

summary .linklook { color: var(--c6); text-decoration: underline; }
summary:hover .linklook { color: var(--c2); text-decoration: none; }

summary.center { text-align: center; }


summary::marker {
  display: none; /* Hides default marker in some browsers */
}

summary::before {
  content: ''; /* Custom indicator for closed state */
  margin-right: 10px;
}

details[open] > summary::before {
  content: ''; /* Custom indicator for open state */
}

.details-content {
  padding: 5px 15px;
  background-color: #fff;
  border-top: 0px solid #eee;
  min-height: 600px;
}

/* Card */
.card { background: var(--neutral-0); border-radius: var(--radius-lg); padding: var(--space-xl); box-shadow: 0 1px 3px rgba(0,0,0,0); border: 0 solid var(--neutral-200); position: relative; overflow: hidden; }
.card.center { text-align: center; }
.card.smlspace { padding: 5px }
.card.smlspace summary { padding: 0; }
.card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.card.nosep::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 0px; background: linear-gradient(90deg, var(--brand), var(--accent)); }
.card-header { margin-bottom: var(--space-lg); }
.card-title { font-size: 1.25rem; font-weight: 700; color: var(--neutral-900); margin-bottom: var(--space-sm); }
.card-subtitle { color: var(--neutral-600); font-size: .9rem; }

/* Badges */
.badge { display: inline-flex; align-items: center; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; gap: var(--space-xs); }
.badge-success { background: rgba(24,169,87,.12); color: var(--success); }
.badge-warning { background: rgba(255,176,32,.12); color: var(--warning); }
.badge-danger { background: rgba(229,72,77,.12); color: var(--danger); }
.badge-info { background: rgba(47,126,234,.12); color: var(--info); }

/* Status messages */
.status-message { padding: var(--space-md); border-radius: var(--radius-md); margin: var(--space-md) 0; font-weight: 500; border-left: 4px solid; }
.status-success { background: rgba(24,169,87,.12); color: var(--success); border-color: var(--success); }
.status-warning { background: rgba(255,176,32,.12); color: var(--warning); border-color: var(--warning); }
.status-danger { background: rgba(229,72,77,.12); color: var(--danger); border-color: var(--danger); }
.status-info { background: rgba(47,126,234,.12); color: var(--info); border-color: var(--info); }

/* Stats */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0; }
.stat-card { background: linear-gradient(135deg, var(--neutral-0), var(--neutral-50)); padding: var(--space-xl); border-radius: var(--radius-lg); text-align: center; border: 1px solid var(--neutral-200); position: relative; overflow: hidden; }
.stat-card::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  /*background: linear-gradient(90deg, var(--c1), var(--c2), var(--c3), var(--c4), var(--c5), var(--c6)); */
  background: transparent;
  opacity: .6; }
.stat-number { font-size: 2rem; font-weight: 800; background: linear-gradient(180deg, var(--brand), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: var(--space-sm); }
.stat-label { color: var(--neutral-600); font-size: .9rem; font-weight: 500; }


/* Utilities */
.text-gradient { background: linear-gradient(135deg, var(--brand), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; }

/* Footer */
.footer { margin-top: var(--space-2xl); color: #333; background: var(--brand); border-top: 1px solid var(--neutral-200); position: relative;}
.footer-inner { max-width: 100%; margin: 0 auto; padding: var(--space-lg) var(--space-xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.footer .text-tagline { color: var(--neutral-800); font-size: .8rem; line-height: 1.5; }
.footer-nav { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.footer-nav a { color: var(--neutral-800); text-decoration: none; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); }
.footer-nav a:hover { background: var(--neutral-200); }

.learningCBlurb { display: block; height: 100px; width: 100%; position:relative; margin-top: 50px; padding: 10px;  }
.learningCBlurb::after {
  content: '';
  position: absolute;
  /* Change to position: absolute */
  /* Remove overflow:hidden; */
  display: block;
  height: 100px;
  width: 100%;
  background: url('/static/img/blooby_blue_10s_pingpong.webp');
  background-size: cover;
  padding: 20px 10px;
  text-align: center;
  margin-top: 0px;
 filter:invert(50) saturate(10);

  /* Add top/left/bottom/right for absolute positioning relative to parent */
  top: -50px;
  left: 0;
z-index: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .header-content { flex-direction: column; gap: var(--space-md); }
  .stats-grid { grid-template-columns: 1fr; }
  .grid-cols-2, .grid-cols-3 { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
    h1 {
      max-width: 94vw;
      margin: 15px auto !important;
    }
}



.btn.btn-secondary {
  padding: 4px 6px;
}

.btn.btn-secondary:hover {
  padding: 6px 8px;
}
/* NAV */
.nav-btn {
     font-size: 1rem;
    font-weight: 300;
    font-family: "Oswald", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /*background-color: #efefef !important;*/
    padding: 0;
    margin: 0;
    line-height: 1.15;
    transform: all 2s;
    transition: all .5s ease-in-out;
    padding: 2px 4px;
    letter-spacing: 1.15px;
    filter: drop-shadow(0px 1px 1px #333333e3)
}
.nav-btn:hover {
  font-size: 1.05rem;
  font-weight: 300;
  padding: 1px 3px;
  margin: 0 -1px 0 0;
  font-family: "Oswald", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 1.25px;
  filter: drop-shadow(-4px px 1px #333333e3)
}


/*
.nav-btn-dashboard {
    background-image: linear-gradient(to right, var(--c1) 0, var(--c2) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% !important;
    background-position: left !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}
.nav-btn-vision {
    background-image: linear-gradient(to right, var(--c2) 0, var(--c3) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% !important;
    background-position: left !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}
.nav-btn-theme {
    background-image: linear-gradient(to right, var(--c3) 0, var(--c5) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% !important;
    background-position: left !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}

.nav-btn-time-machine {
    background-image: linear-gradient(to right, var(--c5) 0, var(--c6) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% !important;
    background-position: left !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}

.nav-btn-validation {
    background-image: linear-gradient(to right, var(--c4) 0, var(--c1) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% !important;
    background-position: left !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}

.nav-btn-galleries {
    background-image: linear-gradient(to right, var(--c2) 0, var(--c6) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    background-size: 100% !important;
    background-position: left !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}

.nav-btn-create {
    background-image: linear-gradient(to right, var(--c6) 0, var(--c5) 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100%;
    background-position: left;
    -webkit-text-fill-color: transparent;
    color: transparent;
    display: inline-block;
}

#createPage .nav-btn-create, #dashboardPage .nav-btn-dashboard, #visionPage .nav-btn-vision, #themePage .nav-btn-theme, #timeMachinePage .nav-btn-time-machine, #validationPage .nav-btn-validation, #galleriesPage .nav-btn-galleries, #systemTimeMachinePage .nav-btn-time-machine, #performancePage .nav-btn-performance { color: #333;
 background-image: linear-gradient(to right, #efefef 0, #fff 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100%;
    background-position: left;
   }
   #createPage .btn.btn-secondary.create-nav, #dashboardPage .btn.btn-secondary.dashboard-nav, #visionPage .btn.btn-secondary.vision-nav, #themePage .btn.btn-secondary.theme-nav, #timeMachinePage .btn.btn-secondary.time-machine-nav, #validationPage .btn.btn-secondary.validation-nav,  #performancePage .btn.btn-secondary.performance-nav, #imgbbPage .btn.btn-secondary.imgbb-nav, #systemTimeMachinePage .btn.btn-secondary.time-machine-nav, #galleriesPage .btn.btn-secondary.galleries-nav { background: linear-gradient(180deg, var(--c2) 0%, var(--c1) 100%) !important; }


   #createPage  .footer .nav-btn-create, #dashboardPage  .footer .nav-btn-dashboard, #visionPage  .footer .nav-btn-vision, #themePage  .footer .nav-btn-theme, #timeMachinePage  .footer .nav-btn-time-machine, #validationPage  .footer .nav-btn-validation, #galleriesPage .nav-btn-galleries { color: #333;
 background-image: linear-gradient(to right, #efefef 0, #fff 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 100%;
    background-position: left;
   }

.footer .nav-btn {
    font-size: 1rem;
    font-weight: 300;
    font-family: "Oswald", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #efefef !important;
    color: #333 !important;
    padding: 0;
    margin: 0;
    line-height: 1.15;
    transition: .25s
ease-in-out;
    padding: 2px 4px;
    letter-spacing: .5px;
    filter: drop-shadow(0px 0px 0px #333333d0);
}
      #createPage .footer .btn.btn-secondary.create-nav, #dashboardPage .footer .btn.btn-secondary.dashboard-nav, #visionPage .footer  .btn.btn-secondary.vision-nav, #themePage .footer .btn.btn-secondary.theme-nav, #timeMachinePage .footer  .btn.btn-secondary.time-machine-nav, #imgBB .footer .btn.btn-secondary.imgbb-nav, #validationPage .footer .btn.btn-secondary.validation-nav, #performancePage .footer .btn.btn-secondary.performance-nav, #galleriesPage .footer .btn.btn-secondary.galleries-nav { color: #efefef; border: .5px solid #efefef; background: linear-gradient(180deg, var(--accent) 0%, var(--c4) 100%) !important; }
*/
/*
time-machine
validation
galleries
*/
     #createPage .create-nav,
     #dashboardPage .dashboard-nav,
     #visionPage .vision-nav,
     #themePage .theme-nav,
     #systemTimeMachinePage .time-machine-nav
    {
       background: radial-gradient(ellipse at bottom, #ffffff87 45%, var(--c2) 135%),
       radial-gradient(ellipse at top, #fff 65%, #FFF 35%, var(--c5) 95%) !important;
       border: .5px solid #ffffff75;
     }
/*
.galleries-nav, .validation-nav, .imgbb-nav, .theme-nav, .performance-nav {
    transform-origin: top left;
      margin: 0;
      background: rgba(255, 255, 255, .25) !important;
      padding: 3px 4px !important;
      font-size: 12px !important;
      border-top-left-radius: 0px !important;
      border-top-right-radius: 0px !important;
      border-bottom-style: solid 1px var(--brand) !important;
      border-bottom-left-radius: 5px !important;
      border-bottom-right-radius: 5px !important;
      transition: all 0.3s ease-in-out;
}*/


    .header-sub-nav .btn.btn-secondary {
      background: linear-gradient(135deg, #ff6600ca 0%, #ffffff69 100%);
          border-top-right-radius: 0;
            border-top-left-radius: 0;
    }
.nav-btn-theme, .nav-btn-galleries, .nav-btn-validation, .nav-btn-imgbb, .nav-btn-performance { font-size: 12px; color: #fff !important; -webkit-text-fill-color: #fff !important;}

.header-sub-nav {
  position: absolute;
  top: 0px;
  right: 30px;
  z-index:200;
}


.footer-sub-nav {
  position: absolute;
  bottom: -2px;
  right: 30px;
}

footer .galleries-nav,
footer .validation-nav,
footer .imgbb-nav,
footer .theme-nav,
footer .performance-nav {
          border-top-left-radius: 0px;
            border-top-right-radius: 0px;
            border-bottom-left-radius: 2px;
            border-bottom-right-radius: 2px;
            margin: 0  0 0 2px;
            padding: 5px 2px;
            font-size: .85em;
          }

.btn:hover .nav-btn {
  text-align: center;
  /*background-color: #ffffff !important;*/
  padding: 0;
  margin: 0;
  line-height: 1;
  letter-spacing: 0;
  padding: 1px 2px;
  transition:all 0.3s ease-in-out;
}



        .galleries-nav.btn:hover, .galleries-nav .nav-btn:hover,
        .validation-nav.btn:hover, .validation-nav .nav-btn:hover,
        .imgbb-nav.btn:hover,  .imgbb-nav .nav-btn:hover,
        .performance-nav.btn:hover,  .performance-nav .nav-btn:hover,
        .theme-nav.btn:hover, .theme-nav .nav-btn:hover {
          font-size: inherit;
        transform: translateY(0px) !important;
          box-shadow: 0 4px 8px #ff66007d;
          border: 0px solid rgba(255, 0, 102, .5);
          transform-origin: top left;
          font-size: 12px !important;
          padding: 5px 6px;
          margin: -2px -1px 0 0;
          letter-spacing: 1.65px;
          transition: all 0.3s ease-in-out;
    }


.quitACCIDbtn {
        color: #ffffff;
        background: linear-gradient(135deg, #e74c3c 0%, #a01101 100%);
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        font-size: 12px;
        font-weight: 300;
        font-family: 'Oswald',
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Arial,
        sans-serif;
        margin: 0 20px 0 0;
        line-height: 1.15;
        transform: all 2s;
        transition: all .5s ease-in-out;
        padding: 6px 4px;
        letter-spacing: 1.15px;
        filter: drop-shadow(0px 1px 1px #333333e3);}