/* ───────────  DESIGN TOKENS  ─────────── */
:root {
    /* New, darker ocean blue */
    --g-blue: #012a4a; /* ocean midnight */
    --g-chrome: rgba(7, 22, 122, 0.51); /* chrome-ish blue/silver */
    --g-orange: rgba(201, 115, 5, 0.51);

    --card-bg: #ffffffee;
    --text: #1f2937;
    --text-muted: #64748b;

    --radius: 14px;
    --shadow: 0 10px 28px rgba(0, 0, 0, .10);
    --gap: 1.2rem; /* roomier */
    --font: 'Inter', system-ui, Segoe UI, Roboto, sans-serif;
}

.app-title {
    font: 900 clamp(3rem, 9vw + .5rem, 7rem)/1 var(--font);
    letter-spacing: -.03em;
    margin: 0;
    position: relative;
    isolation: isolate;

    /* rainbow core */
    background: linear-gradient(
            135deg,
            var(--g-orange) 0%,
            #ffae40 25%,
            var(--g-chrome) 55%,
            #8fb9ff 75%,
            var(--g-blue) 100%);
    background-size: 250% 250%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .35)) drop-shadow(0 0 18px rgba(76, 138, 244, .25));
    text-shadow: 0 0 3px rgba(255, 255, 255, 0), 0 0 10px rgba(76, 138, 244, 0);

    transition: filter .18s ease, text-shadow .18s ease;
}

.app-title:hover {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, .40)) drop-shadow(0 0 24px rgba(76, 138, 244, .30));
    text-shadow: 0 0 3px rgba(255, 255, 255, .3), 0 0 10px rgba(76, 138, 244, .2);
}

/* thin chrome-edge highlight */
.app-title::before {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    -webkit-text-stroke: 2px rgba(255, 255, 255, .35);
    color: transparent;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* animated gradient sweep */
@keyframes shine {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* optional small-screen tweak */
@media (max-width: 420px) {
    .app-title {
        font-size: 2.75rem;
    }
}

/* ───────────  GLOBAL  ─────────── */
html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font);
    color: var(--text);
}

body {
    background: linear-gradient(135deg, var(--g-blue) 0%, var(--g-chrome) 65%, var(--g-orange) 100%);
}

body::before { /* glass blur */
    content: "";
    position: fixed;
    inset: 0;
    backdrop-filter: blur(70px) brightness(1.05);
    -webkit-backdrop-filter: blur(70px) brightness(1.05);
    z-index: -1;
}

/* ───────────  WRAPPER & BRAND  ─────────── */
.container-body {
    /*display: flex;*/
    width: 90%;
    margin: auto;
    padding: 3rem 0 4rem;
    /*flex-direction: column;*/
    align-items: center;
}


.container-body > h1 {
    font-size: clamp(2.6rem, 4.8vw, 3.4rem);
    font-weight: 800;
    margin: 0 0 2.2rem;
    letter-spacing: .5px;
    background: linear-gradient(90deg, #46c6ff 0%, #ffffff 50%, #46c6ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    text-align: center;
}

/* ───────────  GRID LAYOUT  ─────────── */

/* 1.  Keep the grid only as wide as it needs to be
   2.  Center that shrunken grid with auto margins   */
.translator-body {
    display: inline-grid; /* shrink-wrap */
    grid-template-columns: repeat(auto-fit, minmax(500px, 1fr)); /* your tracks */
    gap: var(--gap);
    margin: 0 auto; /* center it */
}


@media (min-width: 1100px) {
    /* anything above the mobile break-point */
    .translator-body {
        column-gap: 2.2rem; /* optional spacing tweak */
        grid-template-columns:repeat(2, minmax(600px, 1fr)); /* 600px minimum */
    }
}

/* Source & target grid inside .panels */
.panels {
    display: grid;
    gap: var(--gap);
    grid-template-columns:repeat(auto-fit, minmax(500px, 1fr)); /* wider cards */
}

@media (max-width: 500px) {
    .panels {
        grid-template-columns:1fr;
    }
}

/* ───────────  CARD  ─────────── */
.panel {
    background: var(--card-bg);
    border-radius: var(--radius);
    padding: 1.6rem 1.8rem;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
}

/* ───────────  LABELS  ─────────── */
.panel label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: .45rem;
}

/* ───────────  FIELDS  ─────────── */
textarea,
input[type="text"],
select,
input[type="file"] {
    width: 100%;
    font-size: .95rem;
    padding: .75rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: var(--radius);
    background: #f8fafc;
}

textarea {
    min-height: 180px;
    resize: vertical;
}

textarea[readonly] {
    background: #f1f5f9;
}

/* ───────────  BUTTONS  ─────────── */
.btn, .btn-orange {
    background: var(--g-blue);
    color: #fff;
    border: none;
    padding: .65rem 1.4rem;
    font-size: .95rem;
    font-weight: 600;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s, transform .15s, box-shadow .15s;
}

.btn:hover, .btn-orange:hover {
    background: #C27529AF;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(194, 117, 41, 0.69);
}

.btn:active, .btn-orange:active {
    transform: none;
    box-shadow: none;
}

.block {
    width: 100%;
}

/* ───────────  CONTROL ROWS  ─────────── */
.buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-top: 1.3rem;
}

.lang-detect, .lang-selector {
    display: flex;
    align-items: flex-end;
    gap: .7rem;
}

.lang-detect input {
    flex: 1 1 140px;
}

.lang-selector select {
    flex: 1 1 180px;
}

/* stop the card from being stretched to full row height */
.upload-card {
    align-self: start; /* hug the content – no more 600-px stripe   */
    width: 400px; /* any width you prefer                      */
    max-width: 100%;
}

/* ─────────── UPLOAD CARD ─────────── */
.translator-body > .panel:last-child { /* the file-upload card */
    grid-column: 1 / -1; /* start in the first column, span to the last */
    width: 100%; /* let it breathe */
    max-width: 480px; /* optional – keeps it from becoming too wide */
    justify-self: start; /* use “center” if you prefer it centred */
}


/* ─────────── SMALL SCREENS ─────────── */
@media (max-width: 850px) {
    .translator-body {
        grid-template-columns:1fr; /* stack everything on phones */
    }
}

/* normal state */
.btn-orange {
    background: #ff7f24; /* or whatever orange you like */
    color: #fff;
    border: none;
    transition: .15s;
}

.btn-orange:hover {
    background: #ff9950;
}

/* disabled state – keep the text readable */
.btn-orange:disabled {
    background: #f5f5f5;
    color: #9a9a9a;
    cursor: not-allowed;
}