:root {
    --primary-blue: #0056b3;
    --soft-blue: #e7f1ff;
    --white: #ffffff;
    --gray-bg: #f8f9fa;
    --text-dark: #212529;
    --accent-yellow: #fff3cd;
    --text-yellow: #856404;
}

body { font-family: 'Inter', sans-serif; margin: 0; background-color: var(--gray-bg); color: var(--text-dark); overflow-x: hidden; }

/* --- Navbar & Hero --- */
.main-nav { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; background: var(--white); border-bottom: 1px solid #eee; position: sticky; top: 0; z-index: 2000; }
.main-nav h1 { color: var(--primary-blue); margin: 0; font-size: 1.4rem; }
.btn-login-trigger { background: var(--primary-blue); color: white; padding: 8px 20px; border-radius: 20px; border: none; cursor: pointer; }
.landing-hero { padding: 60px 5%; text-align: center; background: linear-gradient(to bottom, #f0f7ff, #ffffff); }
.landing-hero h2 { font-size: 2rem; color: var(--primary-blue); }

/* --- Dashboard UI --- */
.app-header { background: var(--primary-blue); color: white; padding: 25px 20px 45px; border-radius: 0 0 25px 25px; }
.search-section { padding: 15px 20px; background: white; margin: -20px 20px 0; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: sticky; top: 10px; z-index: 100; }
.search-container { display: flex; gap: 8px; }
#search-input { flex: 2; padding: 12px; border: 1px solid #ddd; border-radius: 10px; outline: none; }

/* --- Category & Cards --- */
.category-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 5px; scrollbar-width: none; }
.cat-pill { white-space: nowrap; padding: 8px 16px; background: var(--soft-blue); color: var(--primary-blue); border-radius: 20px; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.umkm-grid { padding: 20px; display: grid; grid-template-columns: 1fr; gap: 15px; }
.umkm-card { background: white; padding: 18px; border-radius: 18px; border: 1px solid #eee; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.umkm-badge { background: var(--soft-blue); color: var(--primary-blue); padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: bold; display: inline-block; }
.origin-badge { background: var(--accent-yellow); color: var(--text-yellow); padding: 4px 10px; border-radius: 8px; font-size: 0.7rem; font-weight: bold; margin-left: 5px; }

/* --- Social Buttons --- */
.social-links { display: flex; gap: 8px; margin-top: 15px; flex-wrap: wrap; }
.btn-social { flex: 1; text-align: center; padding: 10px; border-radius: 10px; color: white; text-decoration: none; font-size: 0.75rem; font-weight: bold; min-width: 60px; }
.wa { background: #25D366; }
.ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.maps { background: #4285F4; }

/* --- Setting Page / Inputs --- */
.category-selection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 5px; background: #fdfdfd; padding: 10px; border-radius: 10px; border: 1px solid #eee; }
.check-item { font-weight: normal !important; margin: 0 !important; color: #555 !important; font-size: 0.85rem; display: flex; align-items: center; gap: 5px; }
.check-item input { accent-color: var(--primary-blue); }

.content-card { background: white; margin: 15px 20px; padding: 20px; border-radius: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); }
label { display: block; margin-top: 15px; margin-bottom: 5px; font-size: 0.85rem; font-weight: 600; color: var(--primary-blue); }
.auth-input { width: 100%; padding: 12px; margin: 8px 0; border: 1px solid #ddd; border-radius: 10px; box-sizing: border-box; font-family: inherit; font-size: 0.9rem; }
.btn-blue { width: 100%; background: var(--primary-blue); color: white; padding: 14px; border: none; border-radius: 10px; font-weight: bold; cursor: pointer; margin-top: 10px; }

/* --- PERBAIKAN FITUR EXPORT (Excel & PDF) --- */
.export-container {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 10px 20px;
}

.menu-item-small {
    background: white;
    padding: 8px 18px;
    border-radius: 10px;
    border: 1px solid #eee;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.menu-item-small:hover {
    background: var(--soft-blue);
    transform: translateY(-2px);
}

/* --- PERBAIKAN FITUR CHAT --- */
.chat-main-container {
    display: flex;
    flex-direction: column;
    height: 65vh;
    padding: 15px !important;
}

.chat-display {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 15px;
    scrollbar-width: thin;
}

.chat-msg {
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 85%;
    font-size: 0.88rem;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

.chat-msg.system {
    align-self: flex-start;
    background: #ffffff;
    color: #444;
    border: 1px solid #e0e0e0;
    border-bottom-left-radius: 2px;
}

.chat-msg.user {
    align-self: flex-end;
    background: var(--primary-blue);
    color: white;
    border-bottom-right-radius: 2px;
}

.chat-input-row {
    display: flex;
    gap: 10px;
}

#chat-input {
    flex: 1;
    padding: 12px 18px;
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
    font-size: 0.9rem;
}

.btn-send-chat {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 25px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Nav Bottom --- */
.bottom-nav { position: fixed; bottom: 0; width: 100%; background: white; display: flex; border-top: 1px solid #eee; padding: 12px 0; z-index: 1000; }
.nav-item { flex: 1; text-align: center; font-size: 0.75rem; color: #888; cursor: pointer; }
.nav-item.active { color: var(--primary-blue); font-weight: bold; }
.nav-item i { display: block; font-size: 1.4rem; margin-bottom: 2px; font-style: normal; }

/* --- Animations & New Effects --- */
.auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 3000; display: none; justify-content: center; align-items: center; backdrop-filter: blur(5px); }
.auth-card { background: white; padding: 30px; border-radius: 20px; width: 85%; max-width: 380px; }

/* Animasi Transisi Halus antar Tab */
.tab-content { display: none; animation: slideUp 0.4s ease-out; }
@keyframes slideUp { 
    from { opacity: 0; transform: translateY(15px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

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

/* --- DARK MODE THEME --- */
body.dark-theme { background-color: #121212; color: #f0f0f0; }
body.dark-theme .content-card, 
body.dark-theme .main-nav, 
body.dark-theme .bottom-nav,
body.dark-theme .auth-card { background-color: #1e1e1e; border-color: #333; color: white; }
body.dark-theme .auth-input { background: #2d2d2d; color: white; border-color: #444; }
body.dark-theme .umkm-card { background: #252525; border-color: #333; }
body.dark-theme .chat-display { background: #1a1a1a; border-color: #333; }
body.dark-theme .chat-msg.system { background: #2d2d2d; color: #ddd; border-color: #444; }

/* --- UI STATES & UTILITIES --- */
.text-untung { color: #28a745 !important; font-weight: bold; }
.text-rugi { color: #dc3545 !important; font-weight: bold; }
.empty-state { text-align: center; padding: 50px 20px; color: #888; }
.empty-state h3 { font-size: 3rem; margin-bottom: 10px; }