:root {
    --bg1: #23262a;
    --bg2: #181a1c;
    --card: #222428;
    --border: #393c41;
    --accent: #ea6a4b;
    --font1: #fff;
    --font2: #ccc;
    --font3: #aaa;
    --badge-good: #e6fcbe;
    --badge-bad: #f6d4d4;
}

body {
    background: var(--bg1);
    color: var(--font1);
    font-family: 'Segoe UI', Arial, sans-serif;
    margin: 0;
    min-height: 100vh;
}

.main-container {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 10px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0 18px 0;
    border-bottom: 1px solid var(--border);
}

.header h2 {
    font-size: 2.1rem;
    font-weight: 700;
}

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

#city-input {
    background: var(--bg2);
    border: none;
    border-radius: 20px;
    color: #fff;
    padding: 12px 22px;
    font-size: 1.1rem;
    outline: none;
    width: 180px;
}

#search-btn {
    background: #fff;
    color: #111;
    border: none;
    border-radius: 20px;
    padding: 12px 18px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 500;
    transition: background .2s;
}

#search-btn:hover {
    background: #e9e9e9;
}

#location-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 12px 20px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: 500;
    transition: background .2s;
}

#location-btn:hover {
    background: #cc4625;
}

.content {
    display: flex;
    gap: 28px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.left-panel {
    flex: 1.1;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.right-panel {
    flex: 2;
    min-width: 420px;
    display: flex;
    flex-direction: column;
}

.card {
    background: var(--card);
    border-radius: 17px;
    box-shadow: 0 2px 14px #0002;
    padding: 20px 24px;
    margin-bottom: 10px;
}

.current-weather-card .label {
    color: var(--font3);
    font-size: 1.06rem;
    margin-bottom: 6px;
}

.current-weather-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 2.8rem;
}

.big-temp {
    font-size: 2.7rem;
    font-weight: 600;
    letter-spacing: -1px;
}

.current-weather-details {
    margin-top: 13px;
}

.current-weather-details .row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
    color: var(--font3);
    font-size: 0.97rem;
}

.forecast-card h3 {
    margin: 0 0 13px 0;
    font-size: 1.3rem;
}

.forecast-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: unset;
    margin-top: 8px;
}

.forecast-item {
    background: var(--bg2);
    border-radius: 11px;
    min-width: unset;
    text-align: center;
    padding: 10px 5px 10px 5px;
    font-size: 1rem;
}

.forecast-item .icon {
    margin-bottom: 4px;
}

.forecast-item img {
    width: 37px;
    height: 37px;
}

.forecast-item .temp {
    font-size: 1.13rem;
    font-weight: 500;
    color: #fff;
}

.right-panel h3 {
    font-size: 1.37rem;
    font-weight: 600;
    margin-bottom: 17px;
    margin-top: 0;
}

.highlights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 18px;
}

.air-quality-card .top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 9px;
}

.air-quality-card .badge {
    padding: 4px 13px;
    border-radius: 14px;
    font-size: 0.93rem;
    font-weight: 600;
    background: var(--badge-good);
    color: #444;
}

.air-quality-card .badge.bad {
    background: var(--badge-bad);
    color: #a10000;
}

.air-quality-table {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    font-size: 0.99rem;
}

.air-quality-table>div {
    min-width: 65px;
    margin-bottom: 5px;
    color: var(--font3);
}

.sunrise-sunset-card .highlight-title {
    font-size: 1.05rem;
    margin-bottom: 10px;
    color: var(--font3);
}

.sunrise-sunset-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 35px;
}

.sunrise-sunset-row .icon {
    font-size: 1.6rem;
    margin-bottom: 3px;
    color: #ffd670;
}

.sunrise-sunset-row div {
    text-align: center;
}

.highlight-small {
    text-align: center;
    padding-top: 15px;
    padding-bottom: 12px;
}

.highlight-value {
    font-size: 1.15rem;
    font-weight: 500;
    margin-top: 7px;
    color: #fff;
}

@media (max-width: 1050px) {
    .content {
        flex-direction: column;
    }

    .right-panel {
        min-width: unset;
    }
}