* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', arial, sans-serif;
}

body {
    background-color: #ffffff;
    color: #202124;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a {
    text-decoration: none;
    color: #1a0dab;
}

a:hover {
    text-decoration: underline;
}

/* Colors for logo (deprecated, using gradient instead) */
.blue { color: #4285F4; }
.red { color: #EA4335; }
.yellow { color: #FBBC05; }
.green { color: #34A853; }

.nexus-logo {
    font-family: 'Montserrat', 'Arial Black', sans-serif;
    background: linear-gradient(to right, #D8AB4E, #D48074, #A865C9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
    letter-spacing: -2px;
}

/* Home Page */
.home-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.home-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 15px 20px;
    gap: 15px;
    font-size: 14px;
}

.home-header a {
    color: #000;
}

.profile-icon {
    width: 32px;
    height: 32px;
    background-color: #E24329;
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 500;
}

.apps-icon {
    color: #5f6368;
    cursor: pointer;
}

.home-main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 100px;
}

.logo-container {
    font-size: 90px;
    font-weight: 500;
    margin-bottom: 30px;
    letter-spacing: -2px;
}

.search-form {
    width: 100%;
    max-width: 584px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.search-bar-container {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid #dfe1e5;
    border-radius: 24px;
    padding: 10px 20px;
    box-shadow: none;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.search-bar-container:hover, .search-bar-container:focus-within {
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    border-color: rgba(223, 225, 229, 0);
}

.search-input {
    flex-grow: 1;
    border: none;
    outline: none;
    font-size: 16px;
    padding: 0 10px;
    background: transparent;
}

.suggestions-box {
    position: absolute;
    top: 44px; /* Adjust based on search bar height */
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dfe1e5;
    border-top: none;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 4px 6px rgba(32, 33, 36, 0.28);
    display: none;
    z-index: 100;
    overflow: hidden;
    padding-bottom: 10px;
}

.search-bar-container.has-suggestions {
    border-radius: 24px 24px 0 0;
    border-bottom-color: transparent;
}

.suggestion-item {
    padding: 8px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 15px;
}

.suggestion-item:hover {
    background-color: #f1f3f4;
}

.suggestion-icon {
    color: #9aa0a6;
    font-size: 14px;
}

.search-icon, .mic-icon {
    color: #9aa0a6;
    font-size: 18px;
}

.mic-icon {
    cursor: pointer;
    color: #4285f4;
}

.search-buttons {
    margin-top: 25px;
    display: flex;
    gap: 15px;
}

.btn {
    background-color: #f8f9fa;
    border: 1px solid #f8f9fa;
    border-radius: 4px;
    color: #3c4043;
    font-size: 14px;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn:hover {
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
    background-color: #f8f9fa;
    border: 1px solid #dadce0;
    color: #202124;
}

.home-footer {
    background-color: #f2f2f2;
    color: #70757a;
    font-size: 14px;
}

.footer-country {
    padding: 15px 30px;
    border-bottom: 1px solid #dadce0;
}

.footer-links {
    display: flex;
    justify-content: space-between;
    padding: 15px 30px;
}

.footer-links a {
    color: #70757a;
    margin-right: 20px;
}

.footer-right a {
    margin-right: 0;
    margin-left: 20px;
}

/* Results Page */
.results-header {
    border-bottom: 1px solid #ebebeb;
    padding-top: 20px;
}

.header-top {
    display: flex;
    align-items: center;
    padding: 0 20px 0 30px;
    margin-bottom: 20px;
}

.small-logo {
    font-size: 30px;
    font-weight: 500;
    margin-right: 40px;
    letter-spacing: -1px;
}

.results-search-form {
    flex-grow: 1;
    max-width: 690px;
}

.results-search-bar {
    padding: 8px 15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border-color: transparent;
}

.search-button-small {
    background: none;
    border: none;
    color: #4285f4;
    cursor: pointer;
    font-size: 18px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid #dfe1e5;
}

.header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 20px;
    color: #5f6368;
}

.header-nav {
    display: flex;
    padding-left: 170px;
    gap: 20px;
}

.nav-item {
    color: #5f6368;
    font-size: 14px;
    padding-bottom: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

.nav-item.active {
    color: #1a73e8;
    border-bottom: 3px solid #1a73e8;
}

.nav-item:hover {
    color: #202124;
    text-decoration: none;
}

.results-main {
    padding: 15px 30px 40px 170px;
    max-width: 850px;
}

.results-main.images-layout {
    max-width: none;
    padding-right: 30px;
}

.results-stats {
    color: #70757a;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Text Results */
.result-item {
    margin-bottom: 30px;
}

.result-url {
    color: #202124;
    font-size: 14px;
    margin-bottom: 4px;
    display: inline-block;
    padding: 2px 8px;
    background: #f1f3f4;
    border-radius: 12px;
}

.result-title {
    display: block;
    font-size: 20px;
    color: #1a0dab;
    margin-bottom: 4px;
    line-height: 1.3;
}

.result-content {
    font-size: 14px;
    color: #4d5156;
    line-height: 1.58;
}

/* Image Results */
.image-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    width: 100%;
}

.image-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s;
    display: flex;
    flex-direction: column;
}

.image-card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.image-card img {
    width: 100%;
    height: 150px;
    object-fit: contain;
    background: #f8f9fa;
    border-bottom: 1px solid #ebebeb;
}

.image-info {
    padding: 10px;
}

.image-title {
    display: block;
    font-size: 13px;
    color: #202124;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.image-title:hover {
    text-decoration: underline;
}

.image-domain {
    font-size: 11px;
    color: #70757a;
}

@media (max-width: 768px) {
    .header-nav {
        padding-left: 20px;
        overflow-x: auto;
    }
    
    .results-main {
        padding: 15px 20px;
    }
    
    .header-top {
        padding: 0 20px;
        flex-wrap: wrap;
    }
    
    .results-search-form {
        order: 3;
        width: 100%;
        margin-top: 15px;
    }
}

/* Auth and Header Styles */
.theme-toggle-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: var(--text-color, #5f6368);
    padding: 8px;
    border-radius: 50%;
}
.theme-toggle-btn:hover {
    background-color: var(--hover-bg, #f1f3f4);
}
.login-btn {
    background-color: #1a73e8;
    color: white !important;
    padding: 8px 24px;
    border-radius: 4px;
    font-weight: 500;
}
.login-btn:hover {
    background-color: #1b66c9;
    text-decoration: none;
    box-shadow: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
}
.history-link {
    color: var(--text-color, #5f6368) !important;
    margin-right: 15px;
    font-weight: 500;
}
.profile-container {
    position: relative;
    display: inline-block;
}
.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: 32px;
    background-color: var(--bg-color, white);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 101;
    border-radius: 8px;
    border: 1px solid var(--border-color, #dfe1e5);
}
.profile-container:hover .dropdown-menu {
    display: block;
}
.dropdown-menu a, .dropdown-menu .user-name {
    color: var(--text-color, black);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.dropdown-menu .user-name {
    font-weight: bold;
    border-bottom: 1px solid var(--border-color, #dfe1e5);
}
.dropdown-menu a:hover {
    background-color: var(--hover-bg, #f1f3f4);
}

/* Auth Pages */
.auth-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: var(--bg-color, #fff);
}
.auth-container {
    border: 1px solid var(--border-color, #dfe1e5);
    border-radius: 8px;
    padding: 40px;
    width: 100%;
    max-width: 450px;
    text-align: center;
    background: var(--bg-color, #fff);
}
.auth-logo {
    font-size: 30px;
    display: block;
    margin-bottom: 20px;
}
.auth-container h2 {
    font-weight: 400;
    margin-bottom: 30px;
    color: var(--text-color, #202124);
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.auth-form input {
    padding: 13px 15px;
    border: 1px solid var(--border-color, #dadce0);
    border-radius: 4px;
    font-size: 16px;
    background: transparent;
    color: var(--text-color, #202124);
}
.auth-form input:focus {
    outline: none;
    border-color: #1a73e8;
}
.auth-btn {
    background-color: #1a73e8;
    color: white;
    padding: 12px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    margin-top: 10px;
}
.auth-btn:hover {
    background-color: #1b66c9;
}
.auth-error {
    color: #d93025;
    background-color: #fce8e6;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 14px;
}
.auth-links {
    margin-top: 25px;
    font-size: 14px;
    color: var(--text-color, #5f6368);
}

/* History Page */
.history-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.history-item {
    display: flex;
    align-items: center;
    padding: 15px;
    border-bottom: 1px solid var(--border-color, #ebebeb);
}
.history-link {
    font-size: 16px;
    color: #1a0dab !important;
}

/* Video Thumbnails */
.has-video-thumbnail {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.video-thumbnail img {
    width: 160px;
    height: 90px;
    object-fit: cover;
    border-radius: 8px;
    background-color: var(--hover-bg, #f1f3f4);
}

/* Dark Theme Variables */
:root {
    --bg-color: #ffffff;
    --text-color: #202124;
    --border-color: #dfe1e5;
    --hover-bg: #f1f3f4;
    --link-color: #1a0dab;
    --url-color: #202124;
    --snippet-color: #4d5156;
}
:root[data-theme="dark"] {
    --bg-color: #202124;
    --text-color: #e8eaed;
    --border-color: #3c4043;
    --hover-bg: #303134;
    --link-color: #8ab4f8;
    --url-color: #bdc1c6;
    --snippet-color: #bdc1c6;
}

/* Apply Dark Theme Variables */
body[data-theme="dark"], :root[data-theme="dark"] body {
    background-color: var(--bg-color);
    color: var(--text-color);
}
:root[data-theme="dark"] a { color: var(--link-color); }
:root[data-theme="dark"] .result-title { color: var(--link-color); }
:root[data-theme="dark"] .result-url { color: var(--url-color); background: var(--hover-bg); }
:root[data-theme="dark"] .result-content { color: var(--snippet-color); }
:root[data-theme="dark"] .search-bar-container { border-color: var(--border-color); background: var(--hover-bg); }
:root[data-theme="dark"] .search-bar-container:hover { background: #3c4043; }
:root[data-theme="dark"] .search-input { color: var(--text-color); }
:root[data-theme="dark"] .suggestions-box { background: var(--hover-bg); border-color: var(--border-color); }
:root[data-theme="dark"] .suggestion-item:hover { background: #3c4043; }
:root[data-theme="dark"] .btn { background: var(--hover-bg); border-color: var(--hover-bg); color: var(--text-color); }
:root[data-theme="dark"] .btn:hover { border-color: var(--border-color); }
:root[data-theme="dark"] .results-header { border-color: var(--border-color); background: var(--bg-color); }
:root[data-theme="dark"] .nav-item { color: #9aa0a6; }
:root[data-theme="dark"] .nav-item:hover { color: var(--text-color); }
:root[data-theme="dark"] .nav-item.active { color: #8ab4f8; border-bottom-color: #8ab4f8; }
:root[data-theme="dark"] .results-search-bar { background: var(--hover-bg); }
:root[data-theme="dark"] .image-card { background: var(--bg-color); border: 1px solid var(--border-color); }
:root[data-theme="dark"] .image-card:hover { box-shadow: 0 4px 8px rgba(0,0,0,0.5); }
:root[data-theme="dark"] .image-title { color: var(--text-color); }
:root[data-theme="dark"] .image-domain { color: #9aa0a6; }

/* Shortcuts Row */
.shortcuts-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-top: 30px;
}
.shortcut-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    width: 100px;
    color: var(--text-color, #202124);
}
.shortcut-bg {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: var(--hover-bg, #f1f3f4);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    transition: background-color 0.2s;
}
.shortcut-icon:hover .shortcut-bg {
    background-color: var(--border-color, #e8eaed);
}
.shortcut-bg img {
    width: 24px;
    height: 24px;
}
.shortcut-bg i {
    font-size: 20px;
    color: #5f6368;
}
.shortcut-title {
    font-size: 13px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Settings Page */
.settings-main {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}
.settings-title {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color, #ebebeb);
    padding-bottom: 10px;
}
.settings-section {
    margin-bottom: 40px;
}
.settings-section h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 15px;
    color: var(--text-color, #202124);
}
.theme-options {
    display: flex;
    gap: 15px;
}
.theme-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
}
.settings-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 400px;
}
.settings-form input {
    padding: 10px 15px;
    border: 1px solid var(--border-color, #dadce0);
    border-radius: 4px;
    background: transparent;
    color: var(--text-color, #202124);
}
.settings-form input:focus {
    outline: none;
    border-color: #1a73e8;
}
.shortcut-form {
    flex-direction: row;
    max-width: none;
    flex-wrap: wrap;
}
.shortcuts-list {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
}
.shortcut-item-settings {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    background: var(--hover-bg, #f1f3f4);
    border-radius: 8px;
    gap: 15px;
}
.shortcut-icon-settings {
    width: 24px;
    height: 24px;
}
.delete-btn {
    background: transparent;
    border: none;
    color: #d93025;
    cursor: pointer;
    padding: 8px;
}
.delete-btn:hover {
    background: rgba(217, 48, 37, 0.1);
    color: #d93025;
    border-color: transparent;
}