:root {
    --bg       : linear-gradient(180deg, #0f172a 0%, #071024 100%);
    --card     : rgba(255, 255, 255, 0.04);
    --glass    : rgba(255, 255, 255, 0.06);
    --accent   : #7dd3fc;
    --accent-2 : #60a5fa;
    --text     : #e6eef8;
    --muted    : #9fb3c8;
    --radius   : 12px;
    --max-width: 720px;
    --gap      : 16px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

* {
    box-sizing: border-box
}

html,
body,
#app {
    height: 100%
}

body {
    margin                : 0;
    background            : var(--bg);
    color                 : var(--text);
    display               : flex;
    align-items           : center;
    justify-content       : center;
    padding               : 24px;
    -webkit-font-smoothing: antialiased;
}

.container {
    width          : 100%;
    max-width      : var(--max-width);
    background     : linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-radius  : var(--radius);
    padding        : 24px;
    box-shadow     : 0 6px 30px rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(6px);
}

/* Header */
.header {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : var(--gap);
    margin-bottom  : 16px;
}

.brand {
    display    : flex;
    align-items: center;
    gap        : 12px;
}

.logo {
    width          : 48px;
    height         : 48px;
    border-radius  : 10px;
    background     : linear-gradient(135deg, var(--accent), var(--accent-2));
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-weight    : 700;
    color          : #04263b;
    box-shadow     : 0 4px 12px rgba(96, 165, 250, 0.14);
}

.title {
    font-size  : 1.125rem;
    font-weight: 600;
}

.subtitle {
    color    : var(--muted);
    font-size: 0.875rem;
}

/* Card */
.card {
    background    : linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01));
    border-radius : 10px;
    padding       : 16px;
    margin        : 8px 0;
    display       : flex;
    gap           : 12px;
    flex-direction: column;
    border        : 1px solid rgba(255, 255, 255, 0.03);
}

/* controls */
.controls {
    display  : flex;
    gap      : 12px;
    flex-wrap: wrap;
}

.select,
.btn {
    padding      : 10px 14px;
    border-radius: 8px;
    background   : var(--glass);
    border       : 1px solid rgba(255, 255, 255, 0.03);
    color        : var(--text);
}

.btn {
    cursor    : pointer;
    transition: transform .12s ease, box-shadow .12s;
}

.btn:hover {
    transform : translateY(-2px);
    box-shadow: 0 8px 18px rgba(12, 20, 30, 0.4)
}

/* result */
.result {
    display        : flex;
    gap            : 12px;
    align-items    : center;
    justify-content: space-between;
}

.result .status {
    font-weight: 700;
}

.small {
    color    : var(--muted);
    font-size: 0.875rem;
}

.footer {
    margin-top     : 14px;
    display        : flex;
    justify-content: space-between;
    color          : var(--muted);
    font-size      : 0.85rem;
}

@media (max-width:520px) {
    .header {
        flex-direction: column;
        align-items   : flex-start
    }

    .result {
        flex-direction: column;
        align-items   : flex-start;
        gap           : 6px
    }
}

/*# sourceMappingURL=styles.3b9c60ee86bad577cb7a.css.map*/