@property --main-color {
    syntax: "<color>";
    inherits: true;
    initial-value: #e94fd1;
}

:root {
    --default-borderradius: 0px;
    --default-borderradius-double: calc(var(--default-borderradius) * 2);
    --roundness: 0;

    --content-max-width: 1536px;

    /* Width of the input column on quicksim / statweights / top gear. Shared so
       the paste field keeps its size when you switch between the three. */
    --input-max-width: 1100px;

    /* Minimum breathing room between the content and the window edge. The
       stepped --content-max-width above only caps how wide the content may
       get; whenever the window is too narrow for the current step the wrapper
       falls back to the available width, and without this gutter it would run
       edge to edge. Measured in real screen pixels, so it is subtracted before
       the zoom division in .wrapper. */
    --content-gutter: 24px;

    /* Global UI scale — the whole app is drawn at this factor, like browser
       zoom. The layout roots (.wrapper, .dlg-container, .snackbar-root) carry
       the `zoom`, everything inside them scales along.
       NOTE: viewport units (vh/vw/dvh/dvw) are NOT rescaled by zoom, so any
       viewport-unit size inside a zoomed subtree must be divided by this
       variable to keep its intended share of the screen. */
    --dm-zoom: 1.1;
}

/*DARKMOON BLUEPRINT THEME*/
:root {
    color-scheme: dark;
    --bg-color: #18171c;
    --bg-deep: #141317;
    --main-color: #e94fd1;
    --caret-color: #ffffff;
    --sub-color: #8b8894;
    --sub-alt-color: #1c1b20;
    /* 4.55:1 on --sub-alt-color, 4.74:1 on --bg-color (WCAG AA) */
    --label-color: #85828e;
    --faint-color: #45434d;
    --panel-border: #2c2a32;
    --panel-border-inner: #232228;
    --text-color: #e8e6ea;
    --text-color-disabled: #4d4a55;
    --error-color: #e05a5a;
    --warning-color: #e0b052;
    --ok-color: #52e07c;
    --accent-statweights: #8788ee;
    --error-extra-color: #d32738;
    --colorful-error-color: #ec182d;
    --colorful-error-extra-color: #6e0c16;
    --bg-tooltip-color: #121212;
    /* smooth accent fade when the detected class color changes */
    transition: --main-color 0.5s ease;
}


/* -webkit-text-fill-color is necessary for all those occasions where I am using a gradient for the textcolor */
::selection {
    background-color: var(--main-color);
    color: var(--bg-deep);
    -webkit-text-fill-color: var(--bg-deep)
}

/*GLOBAL PRESETS*/
body, html {
    margin: 0;
    padding: 0;
    background-color: var(--bg-color);
    font-family: Roboto Mono, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

button,
input,
select,
textarea {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
    padding: 0;
    margin: 0;
    border-radius: 0;
}

a { text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 1px solid var(--main-color);
    outline-offset: 2px;
}

button, a, input {
    -webkit-app-region: no-drag;
}

p {
    margin: 0;
    line-height: 1;
}


/*=====================================================================
  BLUEPRINT PRIMITIVES (shared across components — keep global)
=====================================================================*/

/* Cell: bordered blueprint panel */
.dm-cell {
    position: relative;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
}

/* Icons and renders served through the proxy: while the bytes are on their
   way (or an icon fails outright) the box stays a quiet breathing skeleton —
   never the browser's alt text spelling "Gr" into a 28px tile. The pulse is
   painted behind the image, so it vanishes the moment the pixels land. */
img[src^="/proxy/icon/"],
img[src^="/render/"] {
    color: transparent;
    animation: dm-icon-breathe 1.6s ease-in-out infinite;
}

@keyframes dm-icon-breathe {
    0%, 100% {
        background-color: var(--sub-alt-color);
    }
    50% {
        background-color: color-mix(in srgb, var(--panel-border) 55%, var(--sub-alt-color));
    }
}

/* Corner ticks — parent needs .dm-ticks (position: relative) and
   renders <DMTicks/>. Color via --tick-color. */
.dm-ticks {
    position: relative;
    --tick-color: var(--main-color);
}

.dm-ticks > .dm-tick {
    position: absolute;
    width: 8px;
    height: 8px;
    pointer-events: none;
}

.dm-ticks > .dm-tick.tl { top: -4px;    left: -4px;  border-top: 1px solid var(--tick-color);    border-left: 1px solid var(--tick-color); }
.dm-ticks > .dm-tick.tr { top: -4px;    right: -4px; border-top: 1px solid var(--tick-color);    border-right: 1px solid var(--tick-color); }
.dm-ticks > .dm-tick.bl { bottom: -4px; left: -4px;  border-bottom: 1px solid var(--tick-color); border-left: 1px solid var(--tick-color); }
.dm-ticks > .dm-tick.br { bottom: -4px; right: -4px; border-bottom: 1px solid var(--tick-color); border-right: 1px solid var(--tick-color); }

/* Small uppercase blueprint label */
.dm-label {
    font-size: 11.5px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--label-color);
}

.dm-label.accent {
    color: var(--main-color);
}

/* Divider: line — LABEL — line */
.dm-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.dm-divider .dm-divider-line {
    flex: 1;
    height: 1px;
    background-color: var(--panel-border);
}

.dm-divider .dm-divider-label {
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--label-color);
    flex: none;
}

.dm-divider.accent .dm-divider-label {
    color: var(--main-color);
}

.dm-divider .dm-divider-right {
    font-size: 11.5px;
    color: var(--faint-color);
    flex: none;
}

/* Segmented bar (mode switcher, sim options, tabs) */
.dm-segbar {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-color);
    font-size: 13px;
    width: fit-content;
}

.dm-segbar > * {
    display: flex;
    align-items: center;
    padding: 10px 18px;
    color: var(--label-color);
    border-right: 1px solid var(--panel-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.dm-segbar > *:last-child {
    border-right: none;
}

.dm-segbar > *:hover {
    color: var(--sub-color);
}

.dm-segbar > .selected,
.dm-segbar > .active {
    color: var(--main-color);
    background-color: color-mix(in srgb, var(--main-color) 7%, transparent);
}

.dm-segbar > .selected:hover,
.dm-segbar > .active:hover {
    color: var(--main-color);
}

/* Buttons */
.dm-button {
    font-family: "Roboto Mono", sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 14px 52px;
    background-color: var(--main-color);
    color: var(--bg-deep);
    cursor: pointer;
    border: 1px solid transparent;
    transition: filter 0.15s ease, background-color 0.3s ease, color 0.3s ease;
    width: fit-content;
    white-space: nowrap;
}

.dm-button:hover {
    filter: brightness(1.12);
}

.dm-button:active {
    filter: brightness(0.9);
}

.dm-button.locked,
.dm-button:disabled {
    background-color: var(--sub-alt-color);
    border-color: var(--panel-border);
    color: var(--text-color-disabled);
    cursor: default;
    filter: none;
}

.dm-button.solid-danger {
    background-color: var(--error-color);
    color: var(--bg-deep);
}

/* While the mobile gate covers the page, the page itself must not scroll —
   otherwise its scrollbar pokes through the fullscreen overlay */
@media (max-width: 767px) {
    body:has(.mobile-gate) main {
        overflow: hidden !important;
    }
}

/* Paste-shortcut hint next to simc inputs */
.dm-paste-hint {
    font-size: 11.5px;
    color: #3c3a44;
    white-space: nowrap;
    align-self: flex-end;
    padding-bottom: 4px;
}

/* Underlined blueprint form input (auth, account dialogs) */
.dm-line-input {
    width: 100%;
    background-color: transparent;
    border-bottom: 1px solid var(--panel-border);
    padding: 10px 2px;
    color: var(--text-color);
    font-size: 16px;
    font-family: "Roboto Mono", sans-serif;
    outline: none;
    caret-color: var(--main-color);
    transition: border-color 0.15s ease;
}

.dm-line-input::placeholder {
    color: var(--text-color-disabled);
    opacity: 1;
}

.dm-line-input:focus {
    border-bottom-color: var(--main-color);
    outline: none;
}

.dm-button.outline {
    background-color: transparent;
    border: 1px solid var(--panel-border);
    color: var(--sub-color);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: lowercase;
    font-size: 12px;
    padding: 8px 18px;
}

.dm-button.outline:hover {
    color: var(--text-color);
    border-color: var(--sub-color);
    filter: none;
}

.dm-button.danger {
    background-color: transparent;
    border: 1px solid #3a2028;
    color: #a05a6a;
    font-weight: 400;
    letter-spacing: normal;
    text-transform: lowercase;
    font-size: 12px;
    padding: 8px 18px;
}

.dm-button.danger:hover {
    border-color: var(--error-color);
    color: var(--error-color);
    filter: none;
}

/* Dialog shell */
.dm-dialog {
    position: relative;
    border: 1px solid var(--panel-border);
    background-color: var(--bg-deep);
    color: var(--text-color);
    font-family: "Roboto Mono", sans-serif;
}

.dm-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 20px;
    border-bottom: 1px solid var(--panel-border);
}

.dm-dialog-header-left {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
}

.dm-dialog-title {
    color: var(--main-color);
    font-size: 11.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.dm-dialog-subtitle {
    color: var(--label-color);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-dialog-close {
    color: var(--label-color);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    flex: none;
}

.dm-dialog-close:hover {
    color: var(--text-color);
}

.dm-dialog-body {
    max-height: calc(70dvh / var(--dm-zoom));
    overflow-y: auto;
    /* never scroll sideways: with the y-scrollbar hidden, horizontal
       overflow would clip content with no visible hint */
    overflow-x: hidden;
    scrollbar-width: none;
}

.dm-dialog-body::-webkit-scrollbar {
    display: none;
}


/*Loading Animation*/
.moon-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

.moon-animation {
    width: 120px;
    height: 120px;
    position: relative;
}

.moon-phase {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    animation: moonTransition 1.4s infinite ease-in-out;
    filter: invert(49%) sepia(59%) saturate(413%) hue-rotate(268deg) brightness(97%) contrast(93%);
    transform-origin: center;
}

@keyframes moonTransition {
    0%, 14% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
    7% {
        transform: scale(1.1) rotate(5deg);
    }
    16%, 100% {
        opacity: 0;
        transform: scale(0.95) rotate(-5deg);
    }
}

.moon-phase:nth-child(1) { animation-delay: 0s; }
.moon-phase:nth-child(2) { animation-delay: 0.2s; }
.moon-phase:nth-child(3) { animation-delay: 0.4s; }
.moon-phase:nth-child(4) { animation-delay: 0.6s; }
.moon-phase:nth-child(5) { animation-delay: 0.8s; }
.moon-phase:nth-child(6) { animation-delay: 1s; }
.moon-phase:nth-child(7) { animation-delay: 1.2s; }

.loading-text {
    text-align: center;
    color: var(--text-color);
    animation: fadeInUp 0.6s ease-out;
}

.loading-text h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
    color: var(--main-color);
    letter-spacing: 0.05em;
}

.loading-text p {
    font-size: 0.875rem;
    color: var(--sub-color);
    margin: 0 0 1rem 0;
}

.loading-bar {
    width: 200px;
    height: 3px;
    background: var(--sub-alt-color);
    border-radius: 2px;
    overflow: hidden;
    margin: 0 auto;
}

.loading-progress {
    height: 100%;
    background: linear-gradient(90deg, var(--main-color), var(--main-color) 50%, transparent 50%);
    background-size: 200% 100%;
    animation: loadingProgress 1.5s ease-in-out infinite;
}

@keyframes loadingProgress {
    0% {
        background-position: 100% 0;
    }
    100% {
        background-position: -100% 0;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/*  Media Queries for the content-max-width - should be possible to reference this instead of doing separate
    Media Queries, because for whatever reason, the wrapper width doesn't get passed down */
@media (max-width: calc(768px + 5rem)) {
    :root {
        --content-max-width: 502px;
    }

}

@media screen and (min-width: 769px) and (max-width: calc(1024px + 5rem)) {
    :root {
        --content-max-width: 768px;
    }


}

@media screen and (min-width: 1025px) and (max-width: calc(1280px + 5rem)) {
    :root {
        --content-max-width: 1024px;
    }

}

@media screen and (min-width: 1281px) and (max-width: calc(1536px + 5rem)) {
    :root {
        --content-max-width: 1280px;
    }

}