:root {
    --clr-bg: #030325;
    --clr-surface: #ffe3ff;
    --clr-primary: #04aa6d;
    --clr-primary-dark: #018354;
    --clr-primary-border: #015837;
    --clr-accent: chocolate;
    --clr-accent-alt: burlywood;
    --clr-text: #d1d1d1;
    --clr-heading: #fff;
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --radius: .5rem;
    --shadow: 0 0 .75rem rgba(0,0,0,.5);
}

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

body {
    margin: 0;
    font-family: var(--font-sans);
    background: var(--clr-bg);
    color: var(--clr-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    line-height: 1.4;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: clamp(.25rem, .9vw, .55rem) 1rem;
}

/* -------------------- Tab Navigation -------------------- */
.tab-container {
    margin-top: 1.8rem;
    width: 100%;
    max-width: 30rem;
}

.tab-nav {
    display: flex;
    gap: 0;
    margin-bottom: 0;
}

.tab-btn {
    flex: 1;
    padding: .8rem 1rem;
    border: 2px solid var(--clr-accent);
    border-bottom: none;
    background: #333;
    color: var(--clr-text);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s;
    border-radius: var(--radius) var(--radius) 0 0;
}

.tab-btn:first-child {
    border-right: 1px solid var(--clr-accent);
}

.tab-btn:last-child {
    border-left: 1px solid var(--clr-accent);
}

.tab-btn:hover {
    background: #444;
}

.tab-btn.active {
    background: var(--clr-surface);
    color: indigo;
    border-bottom: 2px solid var(--clr-surface);
    margin-bottom: -2px;
    position: relative;
    z-index: 1;
}

.tab-btn:focus-visible,
.btn:focus-visible,
input:focus-visible {
    outline: 2px solid #7fd8ff;
    outline-offset: 2px;
}

/* -------------------- Form Card -------------------- */
.form-card {
    background: var(--clr-surface);
    border: 2px solid var(--clr-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    width: 100%;
    padding: clamp(.35rem, .9vw, .75rem);
    display: none;
    flex-direction: column;
    gap: .5rem;
}

.form-card.active {
    display: flex;
}

fieldset {
    border: 2px solid chocolate;
    border-radius: var(--radius);
    padding: .4rem .8rem .7rem;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

legend {
    font-size: 1.15rem;
    font-weight: 700;
    color: indigo;
    text-align: center;
    margin: 0 auto;
    padding: 0 .5rem;
}

.legend-info {
    color: #c00;
    font-size: 1.15rem;
    margin-bottom: -.4rem;
}

label {
    font-weight: 510;
    color: indigo;
    font-size: 1.2rem;
    margin: 0 0 .05rem .3rem;
    margin-bottom: 0;
}

#embedForm label[for="embedImage"],
#embedForm label[for="embedData"],
#extractForm label[for="extractImage"],
#extractForm label[for="maskedPin"] {
    font-size: 1.08rem;
    font-weight: 700;
}

.intent-label {
    display: flex;
    justify-content: center;
    margin-top: .2rem;
    font-size: 1.1rem;
    color: indigo;
    font-weight: 500;
}

#embedForm .intent-label {
    font-weight: 700;
}

.inline-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin: .1rem 0;
    flex-wrap: wrap;
}

.inline-item label {
    font-size: 1.07rem;
    font-weight: 500;
}

#embedForm .inline-item label {
    font-weight: 700;
}

#embedForm .inline-item label.is-disabled {
    color: #8a8a8a;
    opacity: 0.72;
}

#embedForm .inline-item label.is-disabled .platform-name--mastodon,
#embedForm .inline-item label.is-disabled .platform-name--reddit {
    color: inherit;
}

input[type="checkbox"] {
    cursor: pointer;
    accent-color: var(--clr-primary);
    margin: 0 0 .2rem .1rem;
}

input[type="text"],
input[type="file"] {
    width: 100%;
    border: 1px solid #222;
    background: #16222f;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 700;
    color: #ffd99b;
    font-family: inherit;
}

input[type="text"] {
    padding: 1rem;
    margin-bottom: .6rem;
}

input[type="file"] {
    padding: .8rem 1rem;
    margin-bottom: .55rem;
}

input[type="file"]::file-selector-button {
    background: #444;
    color: var(--clr-surface);
    padding: .4rem 1rem;
    border: 0;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .2s;
}

input[type="file"]::file-selector-button:hover {
    background: #666;
}

input::placeholder {
    color: #989;
    font-style: italic;
}

.actions {
    display: flex;
    justify-content: center;
    margin-block: .5rem 0;
}

.btn {
    background: var(--clr-primary-dark);
    border: 2px solid var(--clr-primary-border);
    padding: .7rem 1rem;
    border-radius: var(--radius);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
    min-width: 7rem;
}

.btn:hover {
    background: #016043;
}

.btn:disabled {
    background: #666;
    color: darkgray;
    border-color: darkslategray;
    cursor: not-allowed;
}

.error-msg {
    color: red;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

.error-msg--strong {
    font-weight: 700;
}

.info p {
    margin: .3rem .4rem;
    font-size: 1.14rem;
    color: darkmagenta;
    font-weight: 540;
    line-height: 1.44;
}

#embedForm .info p {
    color: #5a005a;
    font-weight: 700;
}

.info p span {
    color: darkblue;
    font-weight: 700;
}

.info a {
    color: mediumblue;
}

.platform-name--mastodon {
    color: blue;
}

.platform-name--reddit {
    color: red;
}

hr {
    border: 0;
    height: 1px;
    background: purple;
    margin: .65rem 0;
}

/* -------------------- Footer -------------------- */
.ftr-ln {
    height: 0.56px;
    background-color: purple;
    width: 100%;
    margin: 0;
}

footer {
    text-align: center;
    width: 100%;
    background: linear-gradient(to left, #162226 0%, #16222F 100%);
    margin-top: auto;
}

.ftr-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 0;
}

footer a {
    display: inline-block;
    margin: 0;
    font-weight: bold;
    font-size: clamp(1.05rem, 2.3vw, 1.18rem);
    color: lightsteelblue;
    text-decoration: none;
    transition: color 0.3s ease;
}

footer a:hover {
    color: mistyrose;
}

/* -------------------- Image Preview -------------------- */
#imagePreviewContainer {
    display: grid;
    place-items: center;
    gap: .5rem;
    width: 100%;
    max-width: 30rem;
    margin-top: 1.75rem;
}

.preview-title {
    font-size: 1.1rem;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

#imagePreviewContainer img {
    max-width: 14rem;
    border: 2px solid #ccc;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* -------------------- Smaller Desktop (≤1400px) -------------------- */
@media (max-width: 1400px) and (min-width: 481px) {
    main .tab-container {
        max-width: 24rem;
        margin-top: 1.1rem;
    }

    .tab-btn {
        font-size: .85rem;
        padding: .6rem .8rem;
    }

    .form-card {
        padding: .54rem .6rem;
        gap: .1rem;
    }

    legend {
        font-size: .87rem;
    }

    .legend-info {
        font-size: 0.92rem;
        margin-bottom: -.3rem;
    }

    label {
        font-size: .85rem;
        margin-left: .2rem;
    }

    #embedForm label[for="embedImage"],
    #embedForm label[for="embedData"],
    #extractForm label[for="extractImage"],
    #extractForm label[for="maskedPin"] {
        font-size: .85rem;
    }

    .intent-label {
        font-size: .84rem;
    }

    .inline-item label {
        font-size: 0.83rem;
    }

    input[type="text"] {
        padding: .7rem;
        font-size: .9rem;
        margin-bottom: .45rem;
    }

    input[type="file"] {
        padding: .55rem .8rem;
        font-size: .84rem;
        margin-bottom: .35rem;
    }

    input[type="file"]::file-selector-button {
        padding: .3rem .8rem;
        font-size: .85rem;
    }

    input[type="checkbox"] {
        margin: 0 0 0 0;
    }

    .btn {
        font-size: .9rem;
        padding: .55rem .8rem;
        min-width: 5.5rem;
    }

    .preview-title {
        font-size: .9rem;
    }

    #imagePreviewContainer img {
        max-width: 9rem;
    }

    .info p {
        font-size: .84rem;
        margin: 0 0.2rem .2rem;
        font-weight: 540;
        line-height: 1.4;
    }

    .ftr-content {
        padding: 0.55rem 0;
    }

    .ftr-ln {
        height: 0.41px;
    }

    footer a {
        font-size: clamp(1.02rem, 2.2vw, 1.12rem);
    }
}

/* -------------------- Desktop Breakpoints -------------------- */
@media (min-width: 48rem) {
    .tab-container {
        max-width: 28rem;
    }

    #imagePreviewContainer {
        max-width: 28rem;
    }
}

@media (min-width: 64rem) {
    .tab-container {
        max-width: 30rem;
    }

    #imagePreviewContainer {
        max-width: 30rem;
    }
}

/* -------------------- Mobile phones (≤480px) -------------------- */
@media (max-width: 480px) {
    main {
        padding: 1rem .6rem;
    }

    .tab-container {
        max-width: 95vw;
        margin-top: .7rem;
    }

    .tab-btn {
        font-size: .75rem;
        padding: .5rem .6rem;
    }

    .form-card {
        max-width: 100%;
        padding: .5rem .7rem;
        gap: .35rem;
    }

    legend {
        font-size: .8rem;
    }

    .legend-info {
        font-size: 1rem;
    }

    label {
        font-size: .8rem;
        margin-left: .15rem;
    }

    #embedForm label[for="embedImage"],
    #embedForm label[for="embedData"],
    #extractForm label[for="extractImage"],
    #extractForm label[for="maskedPin"] {
        font-size: .8rem;
    }

    .intent-label {
        font-size: .83rem;
    }

    .inline-item label {
        font-size: .82rem;
        font-weight: 500;
    }

    #embedForm .inline-item label {
        font-weight: 700;
    }

    input[type="text"] {
        padding: .55rem;
        font-size: .8rem;
        margin-bottom: .35rem;
    }

    input[type="file"] {
        padding: .45rem;
        font-size: .8rem;
        margin-bottom: .25rem;
    }

    input[type="file"]::file-selector-button {
        padding: .2rem .6rem;
        font-size: .75rem;
    }

    .btn {
        font-size: .8rem;
        padding: .45rem .6rem;
        min-width: 5rem;
    }

    .preview-title {
        font-size: .8rem;
    }

    #imagePreviewContainer img {
        max-width: 55%;
        display: block;
        margin: auto;
    }

    .info p {
        font-size: .86rem;
    }

    .ftr-content {
        padding: 0.41rem 0;
    }

    .ftr-ln {
        height: 0.31px;
    }

    footer a {
        font-size: clamp(1.1rem, 2.5vw, 1.22rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}