/*STYLE.CSS – 25 Apr 2025*/


.dark-theme {
  min-height: 100vh;
  margin: 0;
  overflow-y: hidden;/* default desktop */
  font-family: sans-serif;
  background-color: #0a0a0a;
  color: var(--text-color);
}

@media (max-width: 600px) {
  .dark-theme { overflow-y: auto; }
}


a { text-decoration: none; color: var(--light-purple); }
a:hover { color: var(--light-purple-hover); }


.user-card,
.download-section {
  background-color: var(--card-bg);
  padding: 1.5rem;
  margin: 1rem 0;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}


form      { display: flex; flex-direction: column; gap: 1rem; }
.form-row { display: flex; flex-direction: column; gap: .3rem; }

input[type="text"],
select {
  padding: .5rem;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-color);
}
input[type="text"]::placeholder{
  color: var(--placeholder-color);
}
input[type="password"]::placeholder {
   color: #e1e1e1;
}
input[type="password"],
select {
  padding: .5rem;
  border-radius: 4px;
  border: 1px solid #151515;
  background-color: transparent;
  color: #e1e1e1;
}
input[type="password"]:focus,
select:focus {
  outline: none;
  border: 1px solid #151515;
  box-shadow: none;
}

.radix-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .8rem 1.2rem;
  font: 500 1rem/1 Sans-Serif;
  background-color: var(--button-bg);
  border: 1px solid var(--button-border);
  border-radius: 5px;
  color: var(--text-color);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, opacity .2s;
}
.radix-button:hover      { background-color: var(--button-bg-hover); border-color: var(--button-border-hover); }
.radix-button:focus      { outline: none; box-shadow: 0 0 0 2px var(--button-focus); }
.radix-button:disabled   { opacity: .6; cursor: not-allowed; }
.radix-button.loading    { background-color: var(--button-loading-bg); border-color: var(--button-loading-border); color: var(--button-loading-text); cursor: progress; }

.centered-wrapper { width: 50%; max-width: 870px; margin: 0 auto; position: absolute; }
@media (max-width: 768px) { .centered-wrapper { width: 90%; } }

.login-card {
  margin-top: 5px;
  border: 1px solid var(--login-card-border);
  width: 300px;
  text-align: center;
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: transparent;
}


.main-container .bloom-logo {
  position: absolute; top: 6px; left: 50%; transform: translate(-50%, -50%);
}
.center-container { position: relative; display: flex; flex-direction: column; align-items: center; }
.center-container .bloom-logo { position: relative; margin-bottom: 1rem; }
.main-container { position: relative; padding-top: 2.5rem; }

@media (max-width: 600px) { .main-container .bloom-logo { transform: translate(-30%, -30%); } }

@keyframes floatPulse { 0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)} }
.bloom-logo {
  height: 40px; width: 40px; border-radius: 6px; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; z-index: 10;
  animation: floatPulse 2.4s ease-in-out infinite;
}

.checkbox-container { display: flex; align-items: center; gap: .5rem; background-color: var(--checkbox-bg); display:none;}
.remember-me       { background-color: var(--checkbox-bg); accent-color: var(--checkbox-accent); width:16px; height:16px; cursor:pointer; display:none;}

#downloadURL:focus { outline: none; }
@keyframes breathe { 0%{border-color:var(--fetching-glow)}50%{border-color:var(--fetching-mid)}100%{border-color:var(--fetching-glow)} }
.fetching { animation: breathe 2.5s ease-in-out infinite; }

.xp-level-info        { margin-top:5px; text-align:center; font-family:Arial,sans-serif; }
.radix-progress       { width:80%; margin:8px auto; }
.radix-progress-track { background-color:var(--progress-track-bg); border-radius:5px; height:20px; overflow:hidden; }
.radix-progress-indicator { height:100%; background-color:var(--progress-indicator-bg); transition:width .5s ease; }

.format-selection-container {
  display:none;
  margin-top:1rem;
  padding:1rem;
  border:1px solid var(--border-color);
  border-radius:8px;
  background:var(--format-bg);
  opacity:0;
  position:relative;
}
.format-options               { display:flex; flex-direction:column; gap:.3rem; margin:.8rem 0; }
.format-option input[type=radio]{ margin-right:8px; accent-color:#333; }

#closeFormatCard {
  position:absolute; top:8px; right:12px; z-index:2;
  font-size:20px; font-weight:bold; background:transparent; border:none;
  color:var(--close-btn-color); cursor:pointer; transition:color .2s ease;
}
#closeFormatCard:hover { color: var(--close-btn-hover); }


.loading { opacity:.7; cursor:wait; }

@keyframes breathingPulse{
  0%  { transform:scale(1);   opacity:.7; }
  50% { transform:scale(1.02);opacity:1; }
  100%{ transform:scale(1);   opacity:.7; }
}
.breathing { animation: breathingPulse 1.4s ease-in-out infinite; display:flex; align-items:center; gap:.5rem; }


.radix-spinner {
  width:20px; height:20px;
  border:2px solid var(--spinner-border);
  border-top:2px solid var(--spinner-top);
  border-radius:50%;
  animation:spin 1s linear infinite; margin-right:8px;
}
@keyframes spin { to{transform:rotate(360deg);} }

.radix-button.danger {
  background-color: var(--error-bg);
  border-color: var(--error-bg);
}
.radix-button.danger:hover { filter: brightness(0.9); }
.radix-button.hidden { display: none; }

.radix-button.small { padding: .4rem .6rem; font-size: .875rem; }


@keyframes breathe-green{0%{border-color:var(--fetching-glow)}50%{border-color:var(--fetching-mid)}100%{border-color:var(--fetching-glow)}}
@keyframes breathe-red{0%{border-color:var(--error-glow)}50%{border-color:var(--error-mid)}100%{border-color:var(--error-glow)}}
.fetching{animation:breathe-green 2.5s ease-in-out infinite;}
.erroring{animation:breathe-red 1.5s ease-in-out 1;}

:root[data-radix-theme="dark"]{
  --error-glow:#ff5c5c;
  --error-mid:#b83e3e;
}


@keyframes breathe-green{0%{border-color:var(--green-9)}50%{border-color:var(--green-7)}100%{border-color:var(--green-9)}}
@keyframes breathe-red  {0%{border-color:var(--red-9)}50%{border-color:var(--red-7)}100%{border-color:var(--red-9)}}

.fetching{animation:breathe-green 2.5s ease-in-out infinite;}
.erroring{animation:breathe-red 1.6s ease-in-out 1;}


.radix-button.primary{background-color:var(--gray-10);border-color:var(--gray-10);color:var(--gray-1);}
.radix-button.primary:hover{filter:brightness(1.05);}
.radix-button.danger{background-color:var(--red-11);border-color:var(--red-10);color:var(--gray-1);}
.radix-button.danger:hover{filter:brightness(.95);}

@keyframes breatheText{0%{opacity:.8}50%{opacity:1}100%{opacity:.8}}
.breathing-btn{animation:breatheText 1.6s ease-in-out infinite;}


@keyframes breathe-green{0%{border-color:var(--green-9)}50%{border-color:var(--green-7)}100%{border-color:var(--green-9)}}
@keyframes breathe-red  {0%{border-color:var(--red-9)}50%{border-color:var(--red-7)}100%{border-color:var(--red-9)}}
.fetching{animation:breathe-green 2.5s ease-in-out infinite;}
.erroring{animation:breathe-red 1.6s ease-in-out 1;}

#downloadURL:not(.fetching):not(.erroring):hover{
  border-color:var(--gray-7);transition:border-color .15s ease;
}


.radix-badge.size-badge{
  background-color:var(--gray-8);
  border:1px solid var(--gray-7);
  color:var(--gray-1);
  padding:.15rem .45rem;
  font-size:.75rem;
  border-radius:4px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  gap:.2rem;
}

.radix-badge.size-badge{
  padding:.15rem .45rem;font-size:.75rem;border-radius:4px;
  display:inline-flex;align-items:center;gap:.15rem;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease;
}

.size-small {background-color:var(--green-9);border:1px solid var(--green-7);color:var(--gray-1);}
.size-medium{background-color:var(--amber-9);border:1px solid var(--amber-7);color:var(--gray-1);}
.size-large {background-color:var(--red-10);border:1px solid var(--red-8); color:var(--gray-1);}


.skeleton {
  background:transparent;border:1px dashed var(--gray-7);color:transparent;
  animation:skeletonPulse 1s ease-in-out infinite;
}
@keyframes skeletonPulse {0%,100%{opacity:.4}50%{opacity:1}}