/* =========================
   RESET
========================= */

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

:root {

    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card: #ffffff;

    --text-primary: #202124;
    --text-secondary: #5f6368;

    --border-color: #dadce0;

    --accent: #1a73e8;
    --accent-hover: #1765cc;

    --shadow:
        0 2px 10px rgba(0,0,0,.08);

    --radius: 16px;

    --transition:
        0.25s ease;

}

/* =========================
   DARK MODE
========================= */

body.dark {

    --bg-primary: #202124;
    --bg-secondary: #292a2d;
    --bg-card: #2d2f34;

    --text-primary: #ffffff;
    --text-secondary: #b0b3b8;

    --border-color: #444746;

    --shadow:
        0 4px 20px rgba(0,0,0,.35);

}

html,
body {
    width: 100%;
    min-height: 100%;
}

body {

    font-family:
        "Inter",
        sans-serif;

    background:
        var(--bg-primary);

    color:
        var(--text-primary);

    overflow-x: hidden;

    transition:
        background var(--transition),
        color var(--transition);

}

/* =========================
   BACKGROUND
========================= */

.background-gradient {

    position: fixed;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at top left,
            rgba(26,115,232,.15),
            transparent 45%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(99,102,241,.12),
            transparent 40%
        );

    z-index: -1;

}

/* =========================
   APP CONTAINER
========================= */

.app-container {

    width: 100%;
    max-width: 1500px;

    margin: auto;

    padding:
        24px;

}

/* =========================
   HEADER
========================= */

.header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;

}

.logo-section {

    display: flex;
    align-items: center;
    gap: 12px;

}

.logo-icon {

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            #1a73e8,
            #4285f4
        );

    color: white;

    font-size: 22px;

}

.logo-text {

    font-size: 24px;
    font-weight: 700;

}

/* =========================
   BUTTONS
========================= */

.icon-btn {

    border: none;

    width: 42px;
    height: 42px;

    border-radius: 12px;

    cursor: pointer;

    background:
        var(--bg-card);

    color:
        var(--text-primary);

    box-shadow:
        var(--shadow);

    transition:
        var(--transition);

}

.icon-btn:hover {

    transform:
        translateY(-2px);

}

/* =========================
   LANGUAGE BAR
========================= */

.language-bar {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 16px;

    margin-bottom: 28px;

    flex-wrap: wrap;

}

.language-select-wrapper {

    position: relative;

}

.language-search-btn {

    min-width: 220px;

    height: 48px;

    border: 1px solid var(--border-color);

    border-radius: 14px;

    background:
        var(--bg-card);

    color:
        var(--text-primary);

    cursor: pointer;

    padding:
        0 16px;

    text-align: left;

    transition:
        var(--transition);

}

.language-search-btn:hover {

    border-color:
        var(--accent);

}

.swap-btn {

    width: 50px;
    height: 50px;

    border: none;

    border-radius: 50%;

    cursor: pointer;

    background:
        var(--accent);

    color: white;

    font-size: 20px;

    transition:
        var(--transition);

}

.swap-btn:hover {

    transform:
        rotate(180deg);

}

/* =========================
   LANGUAGE DROPDOWN
========================= */

.language-dropdown {

    position: absolute;

    top: calc(100% + 10px);
    left: 0;

    width: 320px;

    background: var(--bg-card);

    border: 1px solid var(--border-color);

    border-radius: 18px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);

    overflow: hidden;

    display: none;

    z-index: 999;

}

.language-dropdown.active {
    display: block;
}

.language-search {

    width: 100%;

    border: none;
    outline: none;

    padding: 14px 16px;

    background: transparent;

    color: var(--text-primary);

    border-bottom:
        1px solid var(--border-color);

    font-size: 15px;

}

.language-list {

    max-height: 300px;

    overflow-y: auto;

}

.language-list::-webkit-scrollbar {
    width: 8px;
}

.language-list::-webkit-scrollbar-thumb {

    background:
        rgba(0,0,0,.15);

    border-radius: 999px;

}

.language-item {

    padding: 12px 16px;

    cursor: pointer;

    transition:
        var(--transition);

}

.language-item:hover {

    background:
        rgba(26,115,232,.08);

}

.language-item.active {

    color:
        var(--accent);

    font-weight: 600;

}

/* =========================
   TRANSLATOR LAYOUT
========================= */

.translator-layout {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 24px;

    margin-bottom: 24px;

}

/* =========================
   PANEL
========================= */

.translator-panel {

    display: flex;
    flex-direction: column;

    min-height: 450px;

    background:
        var(--bg-card);

    border:
        1px solid var(--border-color);

    border-radius:
        24px;

    box-shadow:
        var(--shadow);

    overflow: hidden;

    transition:
        var(--transition);

}

.translator-panel:hover {

    transform:
        translateY(-2px);

}

/* =========================
   PANEL HEADER
========================= */

.panel-header {

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        16px 20px;

    border-bottom:
        1px solid var(--border-color);

}

.panel-title {

    font-size: 15px;
    font-weight: 600;

}

.detected-language {

    color:
        var(--accent);

    font-size: 13px;

    font-weight: 500;

}

.translation-status {

    color:
        var(--text-secondary);

    font-size: 13px;

}

/* =========================
   TEXTAREA
========================= */

.translate-textarea {

    flex: 1;

    width: 100%;

    resize: none;

    border: none;
    outline: none;

    background:
        transparent;

    color:
        var(--text-primary);

    font-size: 18px;

    line-height: 1.7;

    padding:
        24px;

    font-family:
        inherit;

}

.translate-textarea::placeholder {

    color:
        var(--text-secondary);

}

.translate-textarea[readonly] {

    cursor:
        default;

}

/* =========================
   PANEL FOOTER
========================= */

.panel-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        14px 18px;

    border-top:
        1px solid var(--border-color);

}

/* =========================
   COUNTERS
========================= */

.counter-group {

    display: flex;
    gap: 14px;

    flex-wrap: wrap;

}

.counter-group span {

    color:
        var(--text-secondary);

    font-size: 13px;

}

/* =========================
   ACTION BUTTONS
========================= */

.action-group {

    display: flex;
    align-items: center;
    gap: 10px;

}

.action-group .icon-btn {

    width: 38px;
    height: 38px;

    font-size: 15px;

}

/* =========================
   TRANSLATE BUTTON
========================= */

.translate-button-wrapper {

    display: flex;
    justify-content: center;

    margin-bottom: 24px;

}

.translate-btn {

    min-width: 220px;

    height: 52px;

    border: none;

    border-radius: 16px;

    cursor: pointer;

    background:
        linear-gradient(
            135deg,
            #1a73e8,
            #4285f4
        );

    color: white;

    font-size: 16px;
    font-weight: 600;

    box-shadow:
        0 8px 20px rgba(26,115,232,.3);

    transition:
        var(--transition);

}

.translate-btn:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 25px rgba(26,115,232,.4);

}

.translate-btn:active {

    transform:
        scale(.98);

}

/* =========================
   HISTORY SIDEBAR
========================= */

.history-sidebar {

    background:
        var(--bg-card);

    border:
        1px solid var(--border-color);

    border-radius:
        24px;

    padding:
        20px;

    box-shadow:
        var(--shadow);

}

.history-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    margin-bottom: 16px;

}

.history-header h3 {

    font-size: 18px;
    font-weight: 600;

}

.clear-history-btn {

    border: none;

    background: transparent;

    color:
        #ef4444;

    cursor: pointer;

    font-weight: 600;

}

.clear-history-btn:hover {

    opacity: .8;

}

.history-list {

    display: flex;
    flex-direction: column;
    gap: 12px;

}

.history-item {

    padding:
        14px;

    border:
        1px solid var(--border-color);

    border-radius:
        14px;

    cursor: pointer;

    transition:
        var(--transition);

}

.history-item:hover {

    background:
        rgba(26,115,232,.08);

    transform:
        translateX(4px);

}

.history-source {

    font-size: 14px;

    margin-bottom: 6px;

    font-weight: 500;

}

.history-target {

    color:
        var(--text-secondary);

    font-size: 13px;

}

/* =========================
   LOADING
========================= */

.loading-container {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-bottom: 20px;

}

.hidden {
    display: none !important;
}

.loading-spinner {

    width: 28px;
    height: 28px;

    border:
        3px solid rgba(26,115,232,.15);

    border-top:
        3px solid var(--accent);

    border-radius:
        50%;

    animation:
        spin 1s linear infinite;

}

@keyframes spin {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}

/* =========================
   TOAST SYSTEM
========================= */

#toast-container {

    position: fixed;

    top: 24px;
    right: 24px;

    z-index: 9999;

    display: flex;
    flex-direction: column;

    gap: 10px;

}

.toast {

    min-width: 250px;

    background:
        var(--bg-card);

    color:
        var(--text-primary);

    border:
        1px solid var(--border-color);

    border-radius:
        14px;

    padding:
        14px 18px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.15);

    animation:
        toastIn .3s ease;

}

.toast.success {

    border-left:
        4px solid #22c55e;

}

.toast.error {

    border-left:
        4px solid #ef4444;

}

.toast.info {

    border-left:
        4px solid #3b82f6;

}

@keyframes toastIn {

    from {

        opacity: 0;

        transform:
            translateX(20px);

    }

    to {

        opacity: 1;

        transform:
            translateX(0);

    }

}

/* =========================
   SKELETON LOADER
========================= */

.skeleton {

    position: relative;

    overflow: hidden;

    background:
        rgba(0,0,0,.05);

}

.skeleton::after {

    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.4),
            transparent
        );

    animation:
        shimmer 1.5s infinite;

}

@keyframes shimmer {

    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(100%);
    }

}

/* =========================
   CUSTOM SCROLLBAR
========================= */

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background:
        transparent;

}

::-webkit-scrollbar-thumb {

    background:
        rgba(120,120,120,.25);

    border-radius:
        999px;

}

::-webkit-scrollbar-thumb:hover {

    background:
        rgba(120,120,120,.45);

}

/* =========================
   ANIMATIONS
========================= */

.fade-in {

    animation:
        fadeIn .3s ease;

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

.slide-up {

    animation:
        slideUp .35s ease;

}

@keyframes slideUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}

.pulse {

    animation:
        pulse 1.5s infinite;

}

@keyframes pulse {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }

}

/* =========================
   GLASS EFFECT
========================= */

.glass {

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    background:
        rgba(255,255,255,.7);

}

body.dark .glass {

    background:
        rgba(40,40,40,.45);

}

/* =========================
   MOBILE
========================= */

@media (max-width: 1024px) {

    .translator-layout {

        grid-template-columns:
            1fr;

    }

}

@media (max-width: 768px) {

    .app-container {

        padding:
            16px;

    }

    .language-bar {

        flex-direction:
            column;

    }

    .language-search-btn {

        width: 100%;

    }

    .translator-panel {

        min-height: 350px;

    }

    .translate-textarea {

        font-size: 16px;

        padding: 18px;

    }

    .panel-footer {

        flex-direction:
            column;

        align-items:
            flex-start;

    }

    .action-group {

        width: 100%;

        justify-content:
            flex-end;

    }

}

@media (max-width: 480px) {

    .logo-text {

        font-size: 20px;

    }

    .translate-btn {

        width: 100%;

    }

    .toast {

        min-width: unset;

        width: 100%;

    }

    #toast-container {

        left: 12px;
        right: 12px;

    }

}