@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: #000000;
    color: #FFFFFF;
}

/* Instagram CSS Variables */
:root {
    --ig-secondary-background: 18, 18, 18;
    --ig-stroke: 54, 54, 54;
    --ig-primary-text: 245, 245, 245;
    --ig-primary-background: 0, 0, 0;
    --ig-link: 69, 183, 255;
    --system-14-font-size: 14px;
    --system-14-line-height: 18px;
    --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --base-line-clamp-line-height: 18px;
}

/* Instagram Input Container Classes */
.xnz67gz {
    background-color: rgb(var(--ig-secondary-background));
}

.x19gtwsn {
    border-top-color: rgb(var(--ig-stroke));
}

.x178xt8z {
    border-top-width: 1px;
}

.x13fuv20 {
    border-top-style: solid;
}

.xhpglom {
    border-inline-end-color: rgb(var(--ig-stroke));
}

.x1xp9za0 {
    border-bottom-color: rgb(var(--ig-stroke));
}

.x1q0q8m5 {
    border-bottom-style: solid;
}

.xso031l {
    border-bottom-width: 1px;
}

.x1fqc88y {
    border-inline-start-color: rgb(var(--ig-stroke));
}

.x1fqc64z {
    border-start-start-radius: 3px;
}

.x1ru8ea5 {
    border-end-start-radius: 3px;
}

.xs83zq4 {
    border-start-end-radius: 3px;
}

.xt6ovg4 {
    border-end-end-radius: 3px;
}

.xpilrb4 {
    border-inline-start-width: 1px;
}

.x1lun4ml {
    border-inline-end-width: 1px;
}

.x1t7ytsu {
    border-inline-start-style: solid;
}

.x18b5jzi {
    border-inline-end-style: solid;
}

.x5n08af {
    color: rgb(var(--ig-primary-text));
}

.xh8yej3 {
    width: 100%;
}

.xvs91rp {
    font-size: var(--system-14-font-size);
}

.xln7xf2 {
    font: inherit;
}

/* Instagram Label */
._aa48 {
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    padding: 0;
}

._aa4a {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    color: #8E8E8E;
    font-size: 12px;
    pointer-events: none;
    transition: all 0.1s ease-out;
    line-height: 12px;
    background-color: transparent;
    padding: 0;
    z-index: 1;
}

/* Instagram Input */
._aa4b {
    background-color: transparent;
    border: 0;
    color: rgb(var(--ig-primary-text));
    font-size: 12px;
    padding: 14px 0 2px 8px;
    width: 100%;
    outline: none;
    position: relative;
    z-index: 2;
}

._add6 {
    flex: 1 0 auto;
}

._ac4d {
    margin: 0;
}

._ap35 {
    min-width: 0;
}

/* Label animation when input is focused or filled */
._aa4b:focus + ._aa4a,
._aa4b:not(:placeholder-shown) + ._aa4a {
    top: 6px;
    font-size: 10px;
    transform: translateY(0) scale(1);
}

/* Login Button */
.instagram-login-btn {
    background: #4a5df9;
    border-radius: 8px;
    font-weight: 600;
    padding: 8px 16px;
    width: 100%;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.instagram-login-btn:hover:not(:disabled) {
    background: #3b4de0;
}

.instagram-login-btn:disabled {
    background: #3846b5;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Facebook Login Button Classes */
._aswp {
    cursor: pointer;
}

._aswq {
    background-color: transparent;
}

._aswu {
    border: 0;
}

._asw_ {
    font-size: 100%;
}

._asx2 {
    width: 100%;
}

.x1xmf6yo {
    margin-top: 8px;
}

.x1e56ztr {
    margin-bottom: 8px;
}

.xqjyukv {
    align-content: stretch;
}

.xjbqb8w {
    background-color: transparent;
}

.x1plvlek {
    overflow-x: visible;
}

.xryxfnj {
    overflow-y: visible;
}

.x1nhvcw1 {
    justify-content: flex-start;
}

.x1oa3qoh {
    align-self: auto;
}

.x14z9mp {
    display: inline;
}

.xat24cr {
    max-height: none;
}

.x1lziwak {
    min-height: 0;
}

.x135b78x {
    border: 0;
}

.x11lfxj5 {
    border-radius: 0;
}

.x2fvf9 {
    margin: 0;
}

.xl56j7k {
    justify-content: center;
}

.x1lliihq {
    display: block;
}

.x173jzuc {
    fill: rgb(var(--ig-link));
}

.xwhw2v2 {
    color: rgb(var(--ig-link));
}

/* Show/Hide Password Button Classes */
._aa49 {
    position: relative;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 1px solid #363636;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
    display: none;
}

.password-toggle-btn.visible {
    display: block;
}

.password-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #5B5B5B;
}

/* Instagram Landing Image Classes */
.x4pkz1m {
    height: 450px;
}

.x14m272y {
    margin-left: -55px;
}

.x14atkfc {
    width: auto;
}

.xz74otr {
    object-fit: fill;
}

.xbiv7yw {
    border-end-start-radius: 0;
}

.x1ga7v0g {
    border-start-end-radius: 0;
}

.x16uus16 {
    border-end-end-radius: 0;
}

.x15mokao {
    border-start-start-radius: 0;
}

img {
    border: 0px;
    overflow-clip-margin: content-box;
    overflow: clip;
}

.xt7dq6l {
    height: auto;
}

.xdt5ytf {
    flex-direction: column;
}

.x78zum5 {
    display: flex;
}

.x6s0dn4 {
    align-items: center;
}

.x1iyjqo2 {
    flex-grow: 1;
}

.xk390pu {
    font-size: 100%;
}

.xm5kwj2 {
    --x-height: 100%;
}

/* Instagram OR Divider Classes */
.x1hmvnq2 {
    margin-top: 14px;
}

.x11gldyt {
    margin-inline-end: 40px;
}

.x91k8ka {
    margin-bottom: 22px;
}

.x11hdunq {
    margin-inline-start: 40px;
}

.xs83m0k {
    flex-shrink: 1;
}

.xjm9jq1 {
    height: 1px;
}

.xwtuau4 {
    background-color: rgb(var(--ig-stroke));
}

.x11mr3az {
    align-self: center;
}

.x1qjc9v5 {
    font-weight: 600;
}

.x972fbf {
    overflow-x: hidden;
}

.x10w94by {
    overflow-y: hidden;
}

.x1qhh985 {
    text-overflow: ellipsis;
}

.x14e42zd {
    white-space: nowrap;
}

.x1roi4f4 {
    margin: 0 18px;
}

.x1c4vz4f {
    flex-shrink: 0;
}

.x2lah0s {
    line-height: var(--base-line-clamp-line-height);
}

.x1nxh6w3 {
    max-width: 100%;
}

.x1s688f {
    text-align: center;
}

.x1ly1vsg {
    text-transform: uppercase;
}

.xdj266r {
    font-size: 13px;
}

.x14iifvp {
    font-weight: 600;
}

.xnkmj2t {
    color: #8E8E8E;
}

.xexx8yu {
    appearance: none;
}

.xyri2b {
    background: none;
}

.x18d9i69 {
    border: 0;
}

.x1c1uobl {
    cursor: pointer;
}

.xtvhhri {
    padding: 0;
}

.x11njtxf {
    box-sizing: border-box;
}

._ar45 {
    background: rgb(var(--ig-primary-background));
    color: rgb(var(--ig-primary-text));
    font-family: var(--font-family-system);
    font-size: var(--system-14-font-size);
    line-height: var(--system-14-line-height);
    margin: 0;
}

.x1q0g3np {
    flex-direction: row;
}

.x1n2onr6 {
    position: relative;
}

.x9f619 {
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .mobile-only {
        display: none !important;
    }
}