:root {
    --bg-color: #121212;
    --section-bg: #1e1e1e;
    --text-color: #e0e0e0;
    --text-color-secondary: #b0b0b0;
    --primary-color: #4caf50;
    --primary-color-dark: #388e3c;
    --input-bg: #2c2c2c;
    --input-border: #424242;
    --input-focus-border: var(--primary-color);
    --tab-bg: #2c2c2c;
    --tab-inactive-text: #a0a0a0;
    --placeholder-bg: #2a2a2a;
    --placeholder-border: #424242;
    --nav-bg: rgba(30, 30, 30, 0.7);
    --shadow-color: rgba(0, 0, 0, 0.4);
    --success-bg: #1c3b1e;
    --success-text: #a5d6a7;
    --error-bg: #4d1a1a;
    --error-text: #ffcdd2;
}

body[data-theme="light"] {
    --bg-color: linear-gradient(135deg, #4db6ac 0%, #009688 100%);
    --section-bg: #ffffff;
    --text-color: #333;
    --text-color-secondary: #6c757d;
    --primary-color: #009688;
    --primary-color-dark: #00796b;
    --input-bg: #ffffff;
    --input-border: #e1e5e9;
    --input-focus-border: var(--primary-color);
    --tab-bg: #f8f9fa;
    --tab-inactive-text: #6c757d;
    --placeholder-bg: #f8f9fa;
    --placeholder-border: #dee2e6;
    --nav-bg: rgba(255, 255, 255, 0.1);
    --shadow-color: rgba(0,0,0,0.1);
    --success-bg: #d4edda;
    --success-text: #155724;
    --error-bg: #f8d7da;
    --error-text: #dc3545;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-color); min-height: 100vh; padding-top: 80px; color: var(--text-color); transition: background 0.3s, color 0.3s; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.header { 
    text-align: center; margin-bottom: 30px; color: #fff; 
    animation: fadeInUp 0.6s ease-out forwards;
}
.header h1 { font-size: 2.2rem; margin-bottom: 10px; }
.header p { margin-bottom: 5px; }
.main-content { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; opacity: 0; animation: fadeInUp 0.6s ease-out 0.2s forwards; }
.section { background: var(--section-bg); padding: 25px; border-radius: 15px; box-shadow: 0 10px 30px var(--shadow-color); transition: background 0.3s; }

.page { display: none; }
.page.active { display: block; }
#page-generator .main-content { display: grid; } /* Re-apply grid for generator page */


.tabs { display: flex; flex-wrap: wrap; background: var(--tab-bg); border-radius: 10px; padding: 5px; margin-bottom: 20px; gap: 5px; }
.tab { flex-grow: 1; padding: 8px 12px; text-align: center; cursor: pointer; border-radius: 8px; border: none; background: transparent; color: var(--tab-inactive-text); font-size: 13px; white-space: nowrap; min-width: 70px; transition: background 0.3s, color 0.3s, transform 0.2s; }
.tab:hover:not(.active) {
    transform: translateY(-2px);
    color: var(--text-color);
}
.tab.active { background: var(--primary-color); color: white; transform: translateY(0); }

.tab-content { display: none; }
.tab-content.active { display: block; }

.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 600; color: var(--text-color); font-size: 14px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px; border: 2px solid var(--input-border); border-radius: 8px; font-size: 14px; background: var(--input-bg); color: var(--text-color); transition: border-color 0.3s, background 0.3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--input-focus-border); }

.bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bank-notice { background: rgba(76, 175, 80, 0.1); border: 1px solid var(--primary-color); border-radius: 8px; padding: 10px; margin-bottom: 15px; color: var(--primary-color); font-size: 13px; text-align: center; }

/* Bank Search Autocomplete Styles */
.bank-search-container { position: relative; }
.bank-search-input { 
    width: 100%; 
    padding: 10px 40px 10px 10px; 
    border: 2px solid var(--input-border); 
    border-radius: 8px; 
    font-size: 14px; 
    background: var(--input-bg);
}
.bank-search-input:focus { outline: none; border-color: var(--input-focus-border); }
.bank-search-input.has-selection { background: rgba(76, 175, 80, 0.1); border-color: var(--primary-color); }

.bank-search-icon { 
    position: absolute; 
    right: 12px; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--text-color-secondary); 
    pointer-events: none; 
}

.bank-suggestions { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    right: 0; 
    background: var(--section-bg); 
    border: 1px solid var(--input-border); 
    border-top: none; 
    border-radius: 0 0 8px 8px; 
    max-height: 200px; 
    overflow-y: auto; 
    z-index: 1000; 
    display: none;
    box-shadow: 0 4px 12px var(--shadow-color);
}

.bank-suggestion { 
    padding: 10px; 
    cursor: pointer; 
    border-bottom: 1px solid var(--input-border); 
    transition: background 0.2s;
}

.bank-suggestion:hover, .bank-suggestion.highlighted { 
    background: var(--input-bg); 
}

.bank-suggestion:last-child { border-bottom: none; }

.bank-suggestion-main { 
    font-weight: 600; 
    color: var(--text-color); 
    margin-bottom: 2px; 
}

.bank-suggestion-details { 
    font-size: 12px; 
    color: var(--text-color-secondary); 
}

.bank-suggestion-match { 
    background: rgba(76, 175, 80, 0.4); 
    font-weight: bold; 
    color: #fff;
}

.no-suggestions { 
    padding: 10px; 
    text-align: center; 
    color: #999; 
    font-style: italic; 
}

.clear-search { 
    position: absolute; 
    right: 35px; 
    top: 50%; 
    transform: translateY(-50%); 
    background: #dc3545; 
    color: white; 
    border: none; 
    border-radius: 50%; 
    width: 18px; 
    height: 18px; 
    cursor: pointer; 
    font-size: 10px; 
    display: none;
}

.qr-type-selector { display: flex; gap: 10px; margin-bottom: 15px; }
.qr-type-option { flex: 1; padding: 8px; border: 2px solid var(--input-border); border-radius: 8px; cursor: pointer; text-align: center; font-size: 12px; transition: all 0.2s; }
.qr-type-option.active { border-color: var(--primary-color); background: rgba(76, 175, 80, 0.1); color: var(--primary-color); }

.template-selector { margin-bottom: 15px; }
.template-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.template-option { padding: 6px; border: 2px solid var(--input-border); border-radius: 6px; cursor: pointer; text-align: center; font-size: 11px; transition: all 0.2s; }
.template-option.active { border-color: var(--primary-color); background: rgba(76, 175, 80, 0.1); color: var(--primary-color); }

.qr-display { text-align: center; margin-bottom: 20px; }
.qr-container-no-frame > div {
    max-width: 100%;
}

.qr-placeholder { width: 280px; height: 280px; background: var(--placeholder-bg); border: 2px dashed var(--placeholder-border); display: flex; align-items: center; justify-content: center; margin: 0 auto; border-radius: 10px; color: var(--text-color-secondary); flex-direction: column; gap: 10px; }
#qrcode { display: flex; justify-content: center; align-items: center; position: relative; }

.controls { display: grid; gap: 10px; }
.size-control { display: flex; align-items: center; gap: 10px; }
.size-slider { flex: 1; height: 6px; background: var(--input-border); border-radius: 3px; outline: none; -webkit-appearance: none; }
.size-display { background: var(--tab-bg); padding: 5px 10px; border-radius: 5px; font-weight: 600; color: var(--primary-color); min-width: 60px; text-align: center; font-size: 12px; }

.format-options { display: flex; gap: 5px; margin-bottom: 10px; }
.format-option { flex: 1; padding: 8px; border: 2px solid var(--input-border); border-radius: 6px; cursor: pointer; text-align: center; font-size: 12px; transition: all 0.2s; }
.format-option.active { border-color: var(--primary-color); background: rgba(76, 175, 80, 0.1); color: var(--primary-color); }
.format-option:hover, .qr-type-option:hover, .template-option:hover {
    transform: translateY(-2px);
}

.btn { width: 100%; padding: 10px; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 13px; margin-bottom: 8px; transition: transform 0.2s ease, background-color 0.3s; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:hover:not(:disabled) {
    transform: translateY(-2px);
}
.btn:active:not(:disabled) {
    transform: translateY(0);
}
.copy-btn { background: var(--primary-color); color: white; }
.download-btn { background: var(--primary-color-dark); color: white; }
.save-btn { background: #17a2b8; color: white; } /* Kept as is, or can be changed */

.error, .success { padding: 8px; border-radius: 6px; margin: 8px 0; display: none; font-size: 13px; }
.error { color: var(--error-text); background: var(--error-bg); }
.success { color: var(--success-text); background: var(--success-bg); }

.loading { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--input-border); border-top: 2px solid var(--primary-color); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.bank-info { font-size: 12px; color: var(--text-color-secondary); margin-top: 5px; padding: 8px; background: var(--input-bg); border-radius: 6px; }

.footer { 
    background: var(--nav-bg); 
    backdrop-filter: blur(10px); 
    border-radius: 15px; 
    padding: 20px; 
    text-align: center; 
    color: #fff; 
    margin-top: 40px; 
}

.footer .powered-by { 
    font-size: 14px; 
    margin-bottom: 8px; 
    opacity: 0.9; 
}

.footer .copyright { 
    font-size: 13px; 
    opacity: 0.8; 
}

@media (max-width: 480px) {
    .header h1 { font-size: 1.8rem; }
    .section { padding: 20px; }
    .main-content { gap: 15px; }
    .qr-type-selector, .template-grid { flex-wrap: wrap; }
    .controls { grid-template-columns: 1fr 1fr; }
    .size-control, .format-options { grid-column: 1 / -1; }
    .advanced-options { grid-template-columns: 1fr; }
}

@media (max-width: 992px) {
    .main-content { grid-template-columns: 1fr; gap: 20px; }
    .bank-grid { grid-template-columns: 1fr; }
    .qr-placeholder { width: 250px; height: 250px; }
    .template-grid { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .advanced-options { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .footer { padding: 15px; }
}

/* Advanced Options */
.advanced-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.advanced-options .form-group {
    margin-bottom: 5px;
}
.advanced-options input[type="color"] {
    padding: 2px;
    height: 38px;
}
.gradient-controls {
    display: flex;
    gap: 5px;
    align-items: center;
}
.gradient-controls input[type="color"] {
    flex: 1;
    height: 30px;
}
.gradient-controls select {
    flex: 2;
    padding: 6px;
    height: 30px;
}
.gradient-controls button {
    padding: 4px 6px;
    font-size: 11px;
    height: 30px;
    border-radius: 5px;
    border: 1px solid #ccc;
    cursor: pointer;
}
.full-width {
    grid-column: 1 / -1;
}
.frame-controls {
    margin-bottom: 5px;
}

/* Frame Style */
#qrFrame {
    padding: 15px; 
    border: 1px solid #ccc;
    border-radius: 10px;
    display: none; /* Hidden by default */
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}
#frameText {
    font-weight: 600;
    font-size: 16px;
}


/* Collapsible Section */
.collapsible-section {
    border-top: 1px solid var(--input-border);
    margin-top: 20px;
}
.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5px 10px 5px;
    cursor: pointer;
}
.collapsible-header h4 {
    margin: 0;
    font-size: 1rem;
}
.collapsible-header .fas {
    transition: transform 0.3s ease;
}
.collapsible-section.active .collapsible-header .fas {
    transform: rotate(180deg);
}
.collapsible-content {
    display: none;
}

/* Navigation */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: var(--nav-bg);
    backdrop-filter: blur(10px);
    z-index: 1001;
    padding: 0 20px;
}
.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
}
.nav-logo {
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    text-decoration: none;
}
.nav-menu {
    display: flex;
    gap: 20px;
    align-items: center;
}
.nav-link {
    color: white;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.3s;
    font-weight: 500;
}
.nav-link:hover, .nav-link.active {
    background: rgba(255, 255, 255, 0.2);
}
.hamburger-menu {
    display: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

#theme-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 8px;
}
#theme-toggle .fa-sun { display: none; }
body[data-theme="light"] #theme-toggle .fa-sun { display: inline-block; }
body[data-theme="light"] #theme-toggle .fa-moon { display: none; }


/* History Page */
#history-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
.history-item {
    background: var(--section-bg);
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.history-item-qr {
    text-align: center;
    background: var(--input-bg);
    padding: 10px;
    border-radius: 8px;
}
.history-item-qr img {
    max-width: 100px;
    height: auto;
    cursor: pointer;
    border-radius: 5px;
}
.history-item-info {
    font-size: 13px;
    color: var(--text-color-secondary);
    word-break: break-all;
}
.history-item-info strong { color: var(--text-color); }
.history-item-actions {
    display: flex;
    gap: 10px;
    margin-top: auto;
}
#no-history {
    text-align: center;
    padding: 40px;
    color: var(--text-color-secondary);
}

@media (max-width: 768px) {
    body { padding-top: 60px; padding-left: 10px; padding-right: 10px; }
    .nav-menu {
        position: fixed;
        top: 60px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 60px); 
        background: var(--bg-color);
        flex-direction: column;
        align-items: center;
        padding-top: 40px;
        transition: left 0.3s ease-in-out;
    }
    .nav-menu.active {
        left: 0;
    }
    .hamburger-menu {
        display: block;
    }
}

/* History Tooltip */
#history-tooltip {
    background: var(--section-bg);
    color: var(--text-color);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 5px 20px var(--shadow-color);
    z-index: 1002;
    max-width: 320px;
    word-wrap: break-word;
    font-size: 13px;
    border: 1px solid var(--input-border);
}
#history-tooltip a {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Scanner Page */
.scanner-controls {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

#camera-view {
    position: relative;
    max-width: 500px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

#camera-feed {
    width: 100%;
    height: auto;
    display: block;
}

.camera-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.camera-frame {
    width: 70%;
    height: 0;
    padding-bottom: 70%;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
}

.scan-result-box {
    background: var(--input-bg);
    padding: 15px;
    border-radius: 8px;
    margin-top: 10px;
    word-wrap: break-word;
    font-size: 14px;
    border: 1px solid var(--input-border);
}
.scan-result-box a {
    color: var(--primary-color);
}

.vietqr-result h4 {
    color: var(--primary-color);
    margin-bottom: 10px;
    border-bottom: 1px solid var(--input-border);
    padding-bottom: 8px;
}
.vietqr-result p {
    margin: 5px 0;
    line-height: 1.6;
}
.vietqr-result strong {
    color: var(--text-color);
}