/* BRUTALIST CSS - MINIMAL BANGET */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: monospace;
    font-size: 16px;
}

body {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    transition: all 0.3s;
}

/* THEME DEFAULT (LIGHT) */
body.theme-light {
    color: black;
    background-color: white;
}
.theme-light .header,
.theme-light .search-box,
.theme-light .ai-selector,
.theme-light .notes,
.theme-light .quotes,
.theme-light .modal {
    border: 3px solid black;
    box-shadow: 8px 8px 0 black;
    background-color: white;
}
.theme-light input,
.theme-light select,
.theme-light textarea {
    border: 2px solid black;
    background-color: white;
    color: black;
}
.theme-light button {
    border: 2px solid black;
    background-color: white;
    color: black;
}
.theme-light button:hover {
    background-color: #f0f0f0;
}
.theme-light .engine-btn.active {
    background-color: black;
    color: white;
}
.theme-light .date,
.theme-light .quote-author,
.theme-light .footer {
    color: #666;
}
.theme-light .modal {
    border: 5px solid black;
    box-shadow: 15px 15px 0 black;
}

/* THEME DARK */
body.theme-dark {
    color: #f0f0f0;
    background-color: #121212;
}
.theme-dark .header,
.theme-dark .search-box,
.theme-dark .ai-selector,
.theme-dark .notes,
.theme-dark .quotes,
.theme-dark .modal {
    border: 3px solid #666;
    box-shadow: 8px 8px 0 #333;
    background-color: #1a1a1a;
}
.theme-dark input,
.theme-dark select,
.theme-dark textarea {
    border: 2px solid #666;
    background-color: #121212;
    color: #f0f0f0;
}
.theme-dark button {
    border: 2px solid #666;
    background-color: #1a1a1a;
    color: #f0f0f0;
}
.theme-dark button:hover {
    background-color: #333;
}
.theme-dark .engine-btn.active {
    background-color: #666;
    color: #121212;
}
.theme-dark .date,
.theme-dark .quote-author,
.theme-dark .footer {
    color: #aaa;
}
.theme-dark .modal {
    border: 5px solid #666;
    box-shadow: 15px 15px 0 #333;
}

/* THEME PINK */
body.theme-pink {
    color: #4a1a2c;
    background-color: #fff0f5;
}
.theme-pink .header,
.theme-pink .search-box,
.theme-pink .ai-selector,
.theme-pink .notes,
.theme-pink .quotes,
.theme-pink .modal {
    border: 3px solid #d81b60;
    box-shadow: 8px 8px 0 #c2185b;
    background-color: #ffeef7;
}
.theme-pink input,
.theme-pink select,
.theme-pink textarea {
    border: 2px solid #d81b60;
    background-color: #fff0f5;
    color: #4a1a2c;
}
.theme-pink button {
    border: 2px solid #d81b60;
    background-color: #ffeef7;
    color: #4a1a2c;
}
.theme-pink button:hover {
    background-color: #ffddee;
}
.theme-pink .engine-btn.active {
    background-color: #d81b60;
    color: #fff0f5;
}
.theme-pink .date,
.theme-pink .quote-author,
.theme-pink .footer {
    color: #8a2b52;
}
.theme-pink .modal {
    border: 5px solid #d81b60;
    box-shadow: 15px 15px 0 #c2185b;
}

/* THEME GREEN */
body.theme-green {
    color: #1b5e20;
    background-color: #f1f8e9;
}
.theme-green .header,
.theme-green .search-box,
.theme-green .ai-selector,
.theme-green .notes,
.theme-green .quotes,
.theme-green .modal {
    border: 3px solid #2e7d32;
    box-shadow: 8px 8px 0 #1b5e20;
    background-color: #e8f5e9;
}
.theme-green input,
.theme-green select,
.theme-green textarea {
    border: 2px solid #2e7d32;
    background-color: #f1f8e9;
    color: #1b5e20;
}
.theme-green button {
    border: 2px solid #2e7d32;
    background-color: #e8f5e9;
    color: #1b5e20;
}
.theme-green button:hover {
    background-color: #d4edda;
}
.theme-green .engine-btn.active {
    background-color: #2e7d32;
    color: #f1f8e9;
}
.theme-green .date,
.theme-green .quote-author,
.theme-green .footer {
    color: #388e3c;
}
.theme-green .modal {
    border: 5px solid #2e7d32;
    box-shadow: 15px 15px 0 #1b5e20;
}

/* THEME BLUE */
body.theme-blue {
    color: #0d47a1;
    background-color: #e3f2fd;
}
.theme-blue .header,
.theme-blue .search-box,
.theme-blue .ai-selector,
.theme-blue .notes,
.theme-blue .quotes,
.theme-blue .modal {
    border: 3px solid #1565c0;
    box-shadow: 8px 8px 0 #0d47a1;
    background-color: #e1f5fe;
}
.theme-blue input,
.theme-blue select,
.theme-blue textarea {
    border: 2px solid #1565c0;
    background-color: #e3f2fd;
    color: #0d47a1;
}
.theme-blue button {
    border: 2px solid #1565c0;
    background-color: #e1f5fe;
    color: #0d47a1;
}
.theme-blue button:hover {
    background-color: #bbdefb;
}
.theme-blue .engine-btn.active {
    background-color: #1565c0;
    color: #e3f2fd;
}
.theme-blue .date,
.theme-blue .quote-author,
.theme-blue .footer {
    color: #1976d2;
}
.theme-blue .modal {
    border: 5px solid #1565c0;
    box-shadow: 15px 15px 0 #0d47a1;
}

/* THEME YELLOW */
body.theme-yellow {
    color: #5d4037;
    background-color: #fffde7;
}
.theme-yellow .header,
.theme-yellow .search-box,
.theme-yellow .ai-selector,
.theme-yellow .notes,
.theme-yellow .quotes,
.theme-yellow .modal {
    border: 3px solid #ff8f00;
    box-shadow: 8px 8px 0 #f57c00;
    background-color: #fff8e1;
}
.theme-yellow input,
.theme-yellow select,
.theme-yellow textarea {
    border: 2px solid #ff8f00;
    background-color: #fffde7;
    color: #5d4037;
}
.theme-yellow button {
    border: 2px solid #ff8f00;
    background-color: #fff8e1;
    color: #5d4037;
}
.theme-yellow button:hover {
    background-color: #ffecb3;
}
.theme-yellow .engine-btn.active {
    background-color: #ff8f00;
    color: #5d4037;
}
.theme-yellow .date,
.theme-yellow .quote-author,
.theme-yellow .footer {
    color: #8d6e63;
}
.theme-yellow .modal {
    border: 5px solid #ff8f00;
    box-shadow: 15px 15px 0 #f57c00;
}

/* THEME BROWN */
body.theme-brown {
    color: #3e2723;
    background-color: #efebe9;
}
.theme-brown .header,
.theme-brown .search-box,
.theme-brown .ai-selector,
.theme-brown .notes,
.theme-brown .quotes,
.theme-brown .modal {
    border: 3px solid #5d4037;
    box-shadow: 8px 8px 0 #4e342e;
    background-color: #f5f0ed;
}
.theme-brown input,
.theme-brown select,
.theme-brown textarea {
    border: 2px solid #5d4037;
    background-color: #efebe9;
    color: #3e2723;
}
.theme-brown button {
    border: 2px solid #5d4037;
    background-color: #f5f0ed;
    color: #3e2723;
}
.theme-brown button:hover {
    background-color: #d7ccc8;
}
.theme-brown .engine-btn.active {
    background-color: #5d4037;
    color: #efebe9;
}
.theme-brown .date,
.theme-brown .quote-author,
.theme-brown .footer {
    color: #795548;
}
.theme-brown .modal {
    border: 5px solid #5d4037;
    box-shadow: 15px 15px 0 #4e342e;
}

/* HEADER - WAKTU */
.header {
    padding: 20px;
    margin-bottom: 30px;
    text-align: center;
}

.time {
    font-size: 3em;
    font-weight: bold;
    margin-bottom: 5px;
}

.date {
    font-size: 1.2em;
}

/* GRID UTAMA */
.grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 30px;
}

/* KOLOM KIRI */
.search-box {
    padding: 15px;
    margin-bottom: 20px;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    font-size: 1.2em;
    margin-bottom: 10px;
}

input[type="text"]:focus {
    outline: none;
}

.search-engines {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}

.engine-btn {
    padding: 8px 12px;
    cursor: pointer;
}

/* AI SELECTOR */
.ai-selector {
    padding: 15px;
}

select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

select:focus {
    outline: none;
}

button {
    padding: 12px;
    cursor: pointer;
    width: 100%;
    font-weight: bold;
}

/* KOLOM KANAN - NOTES */
.notes {
    padding: 15px;
    height: 100%;
}

.notes-header {
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notes-controls {
    display: flex;
    gap: 10px;
}

.notes-controls button {
    width: auto;
    padding: 6px 10px;
    font-size: 0.9em;
}

textarea {
    width: 100%;
    height: 300px;
    padding: 15px;
    resize: vertical;
    line-height: 1.4;
    font-family: monospace;
}

textarea:focus {
    outline: none;
}

/* QUOTES */
.quotes {
    padding: 20px;
    text-align: center;
    margin-bottom: 30px;
}

.quote-text {
    font-style: italic;
    margin-bottom: 10px;
    line-height: 1.4;
}

.quote-author {
    font-size: 0.9em;
}

/* SETTINGS MODAL */
.modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    z-index: 1000;
    width: 90%;
    max-width: 500px;
}

.modal-header {
    margin-bottom: 20px;
    text-align: center;
}

.settings-group {
    margin-bottom: 20px;
}

.settings-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

/* FOOTER */
.footer {
    text-align: center;
    margin-top: 30px;
    font-size: 0.9em;
    span {
        margin: 0 5px;
        background-color: #72727256;
        padding: 2px 9px;
    }
}

/* THEME INDICATOR */
.theme-indicator {
    display: inline-block;
    padding: 4px 12px;
    margin-left: 10px;
    font-weight: bold;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .grid {
        grid-template-columns: 1fr;
    }
    
    .time {
        font-size: 2em;
    }
    
    input[type="text"], select, button {
        font-size: 1em;
    }
}

/* UTILITY */
.mt-10 { margin-top: 10px; }
.mb-10 { margin-bottom: 10px; }
.text-center { text-align: center; }