@import url('https://fonts.googleapis.com/css2?family=Reddit+Mono:wght@200..900&display=swap');
#credential_picker_container { display: none; } 
.g_id_signin[aria-disabled='true'] { opacity: 0.5; pointer-events: none; } 

:root { font-size: 1.05rem; --text-001: clamp(0.709rem, 0.198vw + 0.671rem, 0.832rem); --text-005: clamp(0.75rem, 0.21vw + 0.71rem, 0.88rem); --text-015: clamp(0.78rem, 0.22vw + 0.74rem, 0.92rem); --text-07: clamp(1.96rem, 1.41vw + 1.68rem, 2.8rem); --space-005: clamp(0.375rem, 0.3542rem + 0.1042vw, 0.4375rem); } 

body { font-family: 'Reddit Mono', monospace; font-optical-sizing: auto; font-style: normal; background-color: var(--neutral-01); font-size: 0.8rem; } 

strong { font-weight: bold; } 
h1 { font-size: 1rem; } 
a { cursor: pointer; } 

.no-decoration { text-decoration: none; } 
.underline { text-decoration: underline; } 
.bold { font-weight: bold; } 
.italic { font-style: italic; } 
.no-border { border: none !important; } 
.right { margin-left: auto; } 
.center { text-align: center; } 

.note { white-space: initial; margin-top: -0.25rem; padding-bottom: 0.15rem; } 
.icon img { width: 2.3rem; height: 2.3rem; min-width: 2.3rem; min-height: 2.3rem; margin-right: 0.4rem; margin-left: -0.1rem; margin-top: 0.1rem;} 
.avatar { width: 2.75rem; height: 2.75rem; border-radius: 50%; } 

.flex-row { flex-flow: row nowrap; } 
.responsive-section { min-width: min(30rem, 100%); max-width: 100%; } 

@media (max-width: 30rem){
 .responsive-section { min-width: 100%; } 
 }

.small-caps { font-variant: small-caps; } 

.gap-005 { gap: var(--space-005); } 

.text-01 { font-size: var(--text-001); } 
.text-05 { font-size: var(--text-005); } 
.text-1 { font-size: var(--text-01); } 
.text-15 { font-size: var(--text-015); } 
.text-2 { font-size: var(--text-02); } 
.text-3 { font-size: var(--text-03); } 
.text-4 { font-size: var(--text-04); } 
.text-5 { font-size: var(--text-05); } 
.text-6 { font-size: var(--text-06); } 
.text-7 { font-size: var(--text-07); } 

/* Margins */
.ml-0125 { margin-left: 0.125rem; } 
.mt-0125 { margin-top: 0.125rem; } 
.mr-0125 { margin-right: 0.125rem; } 
.mb-0125 { margin-bottom: 0.125rem; } 

.ml-025 { margin-left: 0.25rem; } 
.mt-025 { margin-top: 0.25rem; } 
.mr-025 { margin-right: 0.25rem; } 
.mb-025 { margin-bottom: 0.25rem; } 

.ml-05 { margin-left: 0.5rem; } 
.mt-05 { margin-top: 0.5rem; } 
.mr-05 { margin-right: 0.5rem; } 
.mb-05 { margin-bottom: 0.5rem; } 

.ml-075 { margin-left: 0.75rem; } 
.mt-075 { margin-top: 0.75rem; } 
.mr-075 { margin-right: 0.75rem; } 
.mb-075 { margin-bottom: 0.75rem; } 

.ml-1 { margin-left: 1rem; } 
.mt-1 { margin-top: 1rem; } 
.mr-1 { margin-right: 1rem; } 
.mb-1 { margin-bottom: 1rem; } 

.ml-125 { margin-left: 1.25rem; } 
.mt-125 { margin-top: 1.25rem; } 
.mr-125 { margin-right: 1.25rem; } 
.mb-125 { margin-bottom: 1.25rem; } 

.none { display: none; } 

.w-100 { width: 100%; } 

input::placeholder,
textarea::placeholder { opacity: 0.4; } 
input { height: 1.6rem; } 

/* DURATION BUTTONS */
.duration-button { font-size: 0.8rem; padding: 0.5rem 0.4rem; font-weight: normal; border-radius: var(--rounded-sm); transition: background-color 0.3s, color 0.3s; } 

.duration-gap { gap: var(--space-01); } 

.duration-button:focus,
.duration-button.selected { color: var(--neutral-01); } 

.duration-button[data-group='smallest']:focus,
.duration-button[data-group='smallest'].selected { background-color: var(--orange); } 
.duration-button[data-group='small']:focus,
.duration-button[data-group='small'].selected { background-color: var(--teal); } 
.duration-button[data-group='medium']:focus,
.duration-button[data-group='medium'].selected { background-color: var(--green); } 
.duration-button[data-group='large']:focus,
.duration-button[data-group='large'].selected { background-color: var(--indigo); } 
.duration-button[data-group='largest']:focus,
.duration-button[data-group='largest'].selected { background-color: var(--pink); } 

section { --gap: var(--space-01); position: relative; overflow: visible; } 
section .title { margin: 1rem 0 0; font-weight: bold; } 
.wallet { /* CHANGED CLASS */
 position: relative; align-items: center; justify-content: center; width: 100%; margin-bottom: 0.75rem; padding: 0.75rem 1rem 0.5rem 1rem; border: 0.0625rem solid var(--neutral-04); border-radius: var(--rounded-sm); transition: border-color 0.24s var(--fluid); min-height: 7.2rem; } 
.wallet span { padding-left: 0.375rem; font-size: 0.625rem; } 
.wallet code { width: fit-content; } 
.wallet:hover { border-color: var(--neutral-05); } 
.blockquote { position: relative; width: 100%; margin: var(--space-01) 0 0 0; padding: var(--space-01) var(--space-01); border: 0.0625rem solid var(--neutral-04); border-radius: var(--rounded-sm); } 
.blockquote,
.blockquote .icon { background-color: var(--neutral-01); /* CHANGED FROM --neutral-02 */
 transition: border-color 0.24s var(--fluid); } 
.blockquote .icon { display: flex; position: absolute; top: 0; left: 0; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; transform: translate(-50%, -50%); border: 0.0625rem solid var(--neutral-04); border-radius: 100%; font-size: 0.95rem; /* CHANGED FROM 1em */ } 
.blockquote blockquote { display: flex; flex-direction: column; width: 100%; margin: 0; gap: 0.5rem; } 
.blockquote:hover,
.blockquote:hover .icon { border-color: var(--neutral-05); } 

.sticky-container { position: sticky; top: 0; z-index: 1000; background: var(--neutral-01); padding-top: 0.5rem; padding-bottom: 0rem; } 

.wallet-item.disabled { opacity: 0.3; } 
.wallet.disabled [id^='editButton'] { opacity: 1; } 

.btn-disabled { pointer-events: none; opacity: 0.5; } 
.btn-disabled-override { pointer-events: none; opacity: 0.5; } 

/* Add to your existing CSS */
.box { position: relative; } 

.element1,
.element2 { transition: opacity 0.4s ease-in-out; position: absolute; width: 100%; top: 0; left: 0; } 

.element1 { opacity: 1; visibility: visible; position: relative; /* Initial state */ } 
.element2 { opacity: 0; visibility: hidden; z-index: 1; } 

.box.editing .element1 { opacity: 0; visibility: hidden; position: absolute; } 
.box.editing .element2 { opacity: 1; visibility: visible; position: relative; } 

.minimal { border: 0.025rem solid var(--neutral-07); padding: 0.25rem; line-height: 2.05rem; border-radius: 0.25rem; display: inline; margin-right: 0.75rem; } 

.action-mm { cursor: pointer; transition: background-color 0.24s var(--fluid); } 
.action-mm:hover { background-color: var(--neutral-03); text-decoration: underline; text-decoration-color: var(--neutral-08); } 

/* .progress-bar { background: var(--neutral-04); height: 0.25rem; border-radius: 0.25rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } 
.progress { height: 100%; border-radius: 0.25rem; } */


.hero { padding: 0 1rem; text-align: center; } 
.hero h2 { font-size: 1.25rem; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 
.hero p { font-size: 1.05rem; } 
.text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } 

.features { padding: 0 1rem; display: grid; gap: 1.5rem; } 
.feature-card { padding: 1rem; background: var(--neutral-02); border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; } 
.feature-card:hover { transform: translateY(-5px); } 
.feature-card h3 { color: var(--neutral-10); margin-bottom: 0.5rem; } 

@media (max-width: 768px){
 .hero h1 { font-size: 1.8rem; } 
 .hero p { font-size: 1rem; } 
 .features { grid-template-columns: 1fr; } 
 }

.milestones { margin: 0 auto; } 

.summary-card { background: var(--neutral-02); padding: 1rem; border-radius: var(--rounded-sm); margin: 1rem 0; text-align: center; } 
button { background: var(--purple); border: none; padding: 0.625rem 1.25rem; border-radius: var(--rounded-sm); cursor: pointer; font-size: 1rem; } 
button:hover { background: var(--purple); filter: brightness(1.2); } 
.categories { display: flex; gap: 0.75rem; margin: 0 auto; } 
.category-container { text-align: center; } 
.category-title { font-size: 0.85rem; margin-bottom: 0.5rem; } 
.category { padding: 0.125rem 0.3125rem; cursor: pointer; background: var(--neutral-01); border-radius: var(--rounded-sm); border: 0.0625rem solid var(--neutral-04); transition: background 0.3s; } 
.category:hover { background-color: var(--neutral-03); } 
.category.active { border: 0.075rem solid var(--neutral-06); background: var(--neutral-01); } 
.category img { width: 5rem; opacity: 1; transition: opacity 0.2s ease; } 
.category img.dim { filter: grayscale(75%) brightness(120%); opacity: 0.5; transition: opacity 0.2s ease; } 

.category-content { display: none; width: 100%; } 
.category-content.active { display: block; } 

.milestone-card { padding: 0.75rem; margin: 1rem 0; border: 0.0625rem solid var(--neutral-04); border-radius: var(--rounded-sm); background: var(--neutral-02); display: flex; flex-direction: column; gap: 0.5rem; } 
.milestone-card-main { display: flex; gap: 0.75rem; align-items: flex-start; }
.milestone-card img { width: 4.5rem; height: 4.5rem; object-fit: contain; border-radius: var(--rounded-sm); flex-shrink: 0; } 
.milestone-card img.gray { filter: grayscale(75%); } 
.milestone-card .content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.milestone-card h3 { margin-top: 0; font-size: 0.85rem; margin-bottom: 0.25rem; } 
.milestone-card p { font-size: 0.75rem; margin: 0.1rem 0; word-wrap: break-word; overflow-wrap: break-word; } 

.tip { font-size: 0.7rem; color: var(--neutral-09); margin: 0; } 

.community,
.milestone-path { margin-top: 1rem; background: var(--neutral-02); padding: 0.625rem 1.25rem; border-radius: var(--rounded-md); border: 0.0625rem solid var(--neutral-06); } 
.recent-milestones p { margin: 0.3125rem 0; font-size: 0.9rem; } 
.timeline { display: flex; flex-direction: column; gap: 1.25rem; } 

.milestone { padding-left: 1rem; } 
.milestone-purple { border-left: 0.1875rem solid var(--purple); }
.milestone-green { border-left: 0.1875rem solid var(--green); }
.milestone-red { border-left: 0.1875rem solid var(--red); }
.milestone-orange { border-left: 0.1875rem solid var(--orange); } 

.milestone h3 { margin: 0; font-size: 0.9rem; } 
.milestone p { margin: 0.125rem 0; font-size: 0.8rem; } 

footer { text-align: center; margin-top: 2.5rem; padding: 1.25rem; background: var(--neutral-02); } 
footer a { color: var(--orange); margin: 0 0.625rem; text-decoration: none; } 
footer a:hover { text-decoration: underline; } 

.compact-switch { vertical-align: -0.175rem; } 

.action-nav { margin: 0; padding: 0.42rem 0.64rem; gap: 0.1rem; border: 1.2px solid var(--neutral-04); border-radius: var(--rounded-sm); background-color: var(--neutral-01); color: var(--neutral-09); line-height: 1; cursor: pointer; width: 3.75rem; box-sizing: border-box; text-align: center; } 
.action-nav:hover { background-color: var(--neutral-03); border-color: var(--neutral-06); } 
.action-nav img { width: 2.5rem; } 
.action-nav img.dim { filter: grayscale(80%) brightness(125%); } 
.border-action { border-color: var(--neutral-06); } 

.action-nav-wrapper { display: flex; flex-direction: column; align-items: center; width: 4rem; position: relative; } 
.action-nav-label { font-weight: 500; margin-bottom: -0.05rem; font-size: 0.75rem; color: var(--neutral-09); } 

/* .nav-extra-title { font-weight: 500; text-align: right; margin-bottom: 0; top: 1.3rem; font-size: 0.75rem; line-height: 0; }  */

/* Login button hover effect */
.action.bg-green:hover { background-color: var(--green);} 
.action.bg-cyan:hover { background-color: var(--cyan);}

/* Admin form inputs */
.admin-input { font-size: 0.85rem; border-radius: 2px; border: 1px solid var(--neutral-03); width: 140px; }
.admin-input-sm { font-size: 0.75rem; border-radius: 2px; border: 1px solid var(--neutral-03); width: 108px; }

/* Admin table */
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table-row { border-bottom: 1px solid var(--neutral-03); }
.admin-table-row-header { border-bottom: 1px solid var(--neutral-04); }

/* Chart containers */
.chart-container { width: 100%; height: 370px; }
.chart-container-wide { width: 145%; height: 370px; }

/* Form input sizes */
.form-input-xs { width: 3rem; }
.form-input-sm { width: 3.5rem; }
.form-input-md { width: 5.5rem; }
.form-input-lg { width: 5.75rem; }

/* Utility classes for inline styles */
.mr-4px { margin-right: 4px; }
.gap-075rem { gap: 0.75rem; }
.gap-085rem { gap: 0.85rem; }
.gap-025rem { gap: 0.25rem; }
.mt-025rem-negative { margin-top: -0.125rem; }
.mt-04rem { margin-top: 0.4rem; }
.mt-025rem-negative-2 { margin-top: -0.25rem; }

/* Form layout utility */
.form-flex { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.25rem; }

/* Accessibility: Focus styles */
input:focus,
select:focus,
button:focus,
a:focus {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}