:root {
 --bg-color: #f4f7f6;
 --card-bg-color: rgba(255, 255, 255, 0.75);
 --text-color: #333;
 --header-bg-color: rgba(255, 255, 255, 0.85);
 --title-color: #2c3e50;
 --btn-bg-color: #f0f0f0;
 --btn-text-color: #555;
 --shadow-color: rgba(0, 0, 0, 0.08);
 --border-color: rgba(255, 255, 255, 0.3);
 --link-color: #3498db;
 --btn-primary-bg: #3498db;
 --btn-primary-text: #ffffff;
 --btn-primary-hover: #2980b9;
 --saved-color: #e67e22;
 --skeleton-bg: #e0e0e0;
}

body.dark-mode {
 --bg-color: #1a1a2e;
 --card-bg-color: rgba(30, 30, 60, 0.75);
 --text-color: #e0e0e0;
 --header-bg-color: rgba(25, 25, 50, 0.85);
 --title-color: #ffffff;
 --btn-bg-color: #3a3a5a;
 --btn-text-color: #e0e0e0;
 --shadow-color: rgba(0, 0, 0, 0.2);
 --border-color: rgba(255, 255, 255, 0.1);
 --link-color: #58affa;
 --btn-primary-bg: #58affa;
 --btn-primary-text: #1a1a2e;
 --btn-primary-hover: #7fc4ff;
 --saved-color: #f39c12;
 --skeleton-bg: #3a3a5a;
}

@keyframes ticker {
 0% { transform: translateX(100%); }
 100% { transform: translateX(-100%); }
}

@keyframes spin {
 0% { transform: rotate(0deg); }
 100% { transform: rotate(360deg); }
}

@keyframes shimmer {
 0% { background-position: -468px 0; }
 100% { background-position: 468px 0; }
}

* {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
 transition: background-color 0.2s linear, color 0.2s linear;
}

body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 color: var(--text-color);
 line-height: 1.6;
 background-image: url('https://i.redd.it/o3csl98vumfy.jpg'); 
 background-size: cover;
 background-position: center;
 background-attachment: fixed;
 background-color: var(--bg-color); 
}

::-webkit-scrollbar {
 width: 12px;
}
::-webkit-scrollbar-track {
 background: var(--bg-color);
}
::-webkit-scrollbar-thumb {
 background-color: var(--btn-bg-color);
 border-radius: 20px;
 border: 3px solid var(--bg-color);
}
::-webkit-scrollbar-thumb:hover {
 background-color: var(--link-color);
}

.ticker-wrap {
 width: 100%;
 overflow: hidden;
 background-color: rgba(0,0,0,0.6);
 color: #ffffff;
 padding: 10px 0;
 white-space: nowrap;
}
.ticker-move {
 display: inline-block;
 animation: ticker 40s linear infinite;
}
.ticker-item {
 display: inline-block;
 padding: 0 2rem;
 font-weight: 500;
}
.ticker-item span {
 opacity: 0.7;
 margin-right: 10px;
}

main {
 max-width: 1200px;
 margin: 20px auto;
 padding: 0 20px;
}

header {
 background-color: var(--header-bg-color);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--border-color);
 padding: 20px;
 box-shadow: 0 2px 5px var(--shadow-color);
 margin-bottom: 30px;
 display: grid;
 grid-template-areas:
 "title widgets"
 "search search";
 align-items: center;
 gap: 20px;
}
header h1 {
 grid-area: title;
 text-align: left;
 color: var(--title-color);
 margin: 0;
}
.header-widgets {
 grid-area: widgets;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 gap: 20px;
}
#weather-widget {
 font-weight: 500;
 color: var(--text-color);
 display: flex;
 align-items: center;
 gap: 8px;
}
#weather-widget img {
 width: 40px;
 height: 40px;
}
#search-form {
 grid-area: search;
 display: flex;
 max-width: 100%;
 gap: 10px;
}

@media (min-width: 768px) {
 header {
 grid-template-areas: "title search widgets";
 grid-template-columns: auto 1fr auto;
 }
 header h1 { text-align: left; }
}

.search-wrapper {
 position: relative;
 flex-grow: 1;
}

#search-input {
 width: 100%;
 padding: 12px 15px;
 font-size: 16px;
 border: 1px solid var(--border-color);
 border-radius: 5px;
 outline: none;
 background-color: var(--card-bg-color);
 color: var(--text-color);
}
#search-input:focus {
 border-color: var(--link-color);
}

#search-form button[type="submit"] {
 padding: 0 20px;
 font-size: 16px;
 font-weight: bold;
 color: var(--btn-primary-text);
 background-color: var(--btn-primary-bg);
 border: none;
 border-radius: 5px;
 cursor: pointer;
 transition: background-color 0.2s;
}
#search-form button[type="submit"]:hover {
 background-color: var(--btn-primary-hover);
}

.theme-switch-wrapper {
 display: flex;
 justify-content: flex-end;
}
.theme-switch {
 position: relative;
 display: inline-block;
 width: 60px;
 height: 34px;
}
.theme-switch input { opacity: 0; width: 0; height: 0; }
.slider {
 position: absolute;
 cursor: pointer;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background-color: #ccc;
 transition: .4s;
 border-radius: 34px;
}
.slider:before {
 position: absolute;
 content: "";
 height: 26px;
 width: 26px;
 left: 4px;
 bottom: 4px;
 background-color: white;
 transition: .4s;
 border-radius: 50%;
}

.slider .fa-sun, .slider .fa-moon {
 position: absolute;
 font-size: 16px;
 top: 50%;
 transform: translateY(-50%);
 transition: 0.4s;
}
.slider .fa-sun {
 left: 9px;
 color: #f39c12;
 opacity: 1;
}
.slider .fa-moon {
 right: 9px;
 color: #1f1f3a;
 opacity: 1;
}
input:not(:checked) + .slider .fa-moon {
 opacity: 0;
}
input:checked + .slider .fa-sun {
 opacity: 0;
}
input:checked + .slider { background-color: #58affa; }
input:checked + .slider:before { transform: translateX(26px); }

.category-nav {
 background-color: var(--header-bg-color);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--border-color);
 padding: 0 20px;
 border-bottom: 1px solid var(--border-color);
 overflow-x: auto;
 white-space: nowrap;
 position: sticky;
 top: 0;
 z-index: 10;
}
#category-filters {
 max-width: 1200px;
 margin: 0 auto;
 padding: 15px 0;
 display: flex;
 gap: 10px;
}
.category-btn {
 padding: 8px 16px;
 font-size: 15px;
 font-weight: 600;
 color: var(--btn-text-color);
 background-color: var(--btn-bg-color);
 border: none;
 border-radius: 20px;
 cursor: pointer;
}
.category-btn:hover { background-color: var(--border-color); }
.category-btn.active {
 background-color: var(--btn-primary-bg);
 color: var(--btn-primary-text);
}
.category-btn[data-category="saved"].active {
    background-color: var(--saved-color);
    color: var(--btn-primary-text);
}

#status-message {
 text-align: center;
 font-size: 1.2rem;
 color: var(--text-color);
 margin: 40px 0;
}
.loader {
 border: 5px solid var(--btn-bg-color);
 border-top: 5px solid var(--link-color);
 border-radius: 50%;
 width: 50px;
 height: 50px;
 animation: spin 1s linear infinite;
 margin: 0 auto;
}

#news-container {
 display: grid;
 grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
 gap: 25px;
}
.news-article {
 background-color: var(--card-bg-color);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--border-color);
 border-radius: 8px;
 box-shadow: 0 4px 12px var(--shadow-color);
 overflow: hidden;
 display: flex;
 flex-direction: column;
 transition: transform 0.2s, box-shadow 0.2s;
}
.news-article:hover {
 transform: translateY(-5px);
 box-shadow: 0 6px 16px var(--shadow-color);
}
.news-article img {
 width: 100%;
 height: 200px;
 object-fit: cover;
}
.article-content {
 padding: 20px;
 display: flex;
 flex-direction: column;
 flex-grow: 1;
}
.article-content h2 {
 font-size: 1.25rem;
 margin-bottom: 10px;
 color: var(--title-color);
}
.article-source {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    opacity: 0.7;
    margin-bottom: 10px;
}
.article-content p {
 font-size: 0.95rem;
 color: var(--text-color);
 flex-grow: 1;
 margin-bottom: 15px;
}
.article-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
    margin-top: auto;
}
.article-time {
    font-size: 0.85rem;
    font-style: italic;
    opacity: 0.8;
}
.share-buttons {
    display: flex;
    gap: 10px;
}
.share-btn {
    font-size: 1.1rem;
    color: var(--btn-text-color);
    text-decoration: none;
    transition: color 0.2s;
}
.share-btn.twitter:hover { color: #1DA1F2; }
.share-btn.facebook:hover { color: #1877F2; }
.share-btn.copy:hover { color: var(--link-color); }
.bookmark-btn {
    font-size: 1.5rem;
    color: var(--btn-text-color);
    cursor: pointer;
    transition: color 0.2s;
}
.bookmark-btn:hover {
    color: var(--saved-color);
}
.bookmark-btn.saved {
    color: var(--saved-color);
}

.pagination-controls {
 text-align: center;
 margin: 40px 0;
 display: flex;
 justify-content: center;
 align-items: center;
 gap: 15px;
}
.pagination-controls button {
 padding: 10px 20px;
 font-size: 16px;
 font-weight: bold;
 color: var(--btn-primary-text);
 background-color: var(--btn-primary-bg);
 border: none;
 border-radius: 5px;
 cursor: pointer;
}
.pagination-controls button:hover {
 background-color: var(--btn-primary-hover);
}
.pagination-controls button:disabled {
 background-color: var(--btn-bg-color);
 color: var(--btn-text-color);
 cursor: not-allowed;
 opacity: 0.7;
}
.pagination-controls span {
 font-size: 1.1rem;
 font-weight: 600;
 color: var(--text-color);
 background-color: var(--card-bg-color);
 padding: 5px 10px;
 border-radius: 5px;
}

footer {
 background-color: var(--header-bg-color);
 backdrop-filter: blur(10px);
 -webkit-backdrop-filter: blur(10px);
 border: 1px solid var(--border-color);
 color: var(--text-color);
 text-align: center;
 padding: 20px;
 margin-top: 40px;
 box-shadow: 0 -2px 5px var(--shadow-color);
}

#scroll-to-top {
 display: none;
 position: fixed;
 bottom: 20px;
 right: 30px;
 z-index: 99;
 border: none;
 outline: none;
 background-color: var(--btn-primary-bg);
 color: var(--btn-primary-text);
 cursor: pointer;
 padding: 12px 15px;
 border-radius: 10px;
 font-size: 18px;
 box-shadow: 0 4px 10px var(--shadow-color);
}
#scroll-to-top:hover {
 background-color: var(--btn-primary-hover);
}

.skeleton-card {
    background-color: var(--card-bg-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-color);
    overflow: hidden;
}
.skeleton-image {
    width: 100%;
    height: 200px;
    background-color: var(--skeleton-bg);
}
.skeleton-content {
    padding: 20px;
}
.skeleton-line {
    height: 16px;
    margin-bottom: 12px;
    border-radius: 4px;
    background-color: var(--skeleton-bg);
}
.skeleton-title {
    width: 70%;
    height: 20px;
}
.skeleton-source {
    width: 40%;
}
.skeleton-text {
    width: 100%;
}
.skeleton-text:last-child {
    width: 80%;
}
.skeleton-footer {
    width: 60%;
    margin-top: 20px;
}
.skeleton-card .skeleton-image,
.skeleton-card .skeleton-line {
    background-image: linear-gradient(90deg, var(--skeleton-bg) 25%, #f9f9f9 50%, var(--skeleton-bg) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
}

body.dark-mode .skeleton-card .skeleton-image,
body.dark-mode .skeleton-card .skeleton-line {
    background-image: linear-gradient(90deg, var(--skeleton-bg) 25%, #4a4a6a 50%, var(--skeleton-bg) 75%);
}