:root {
    /* Palette Modern Dark Mode */
    --bg-body: #050505;
    --bg-card: #121212;
    --bg-input: #1E1E1E;
    --primary: #2563EB; /* Royal Blue */
    --primary-gradient: linear-gradient(135deg, #2563EB, #1D4ED8);
    --accent: #7C3AED;
    --text-main: #FFFFFF;
    --text-muted: #A3A3A3;
    --border: #2A2A2A;
    --success: #10B981;
    --error: #EF4444;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Hapus highlight biru di Android */
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Ubah ke start untuk scrolling di mobile */
    padding: 20px;
    overflow-x: hidden;
}

/* Container dipusatkan dan dibatasi lebarnya agar rapi di desktop & full di mobile */
.container {
    width: 100%;
    max-width: 500px; /* Lebar optimal seperti aplikasi mobile */
    margin-top: 20px;
    margin-bottom: 40px;
    position: relative;
}

/* Header Minimalis */
header {
    text-align: left;
    margin-bottom: 30px;
    padding: 0 10px;
}

h1 {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
    background: linear-gradient(to right, #fff, #aaa);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
}

h1 i {
    color: var(--primary);
    font-size: 1.5rem;
    background: none;
    -webkit-text-fill-color: var(--primary);
}

.subtitle {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
    font-weight: 300;
}

/* Card Utama - Style Aplikasi */
.app-container {
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    padding: 25px;
    border: 1px solid var(--border);
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    position: relative;
    overflow: hidden;
}

/* Upload Area yang lebih rapi */
.upload-area {
    background-color: var(--bg-input);
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 25px;
}

.upload-area:active, .upload-area:hover {
    border-color: var(--primary);
    background-color: rgba(37, 99, 235, 0.05);
}

.upload-area i {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    transition: color 0.3s;
}

.upload-area:hover i { color: var(--primary); }

.upload-area h3 {
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 500;
}

.upload-area p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 15px;
}

/* Tombol Utama (Pilih File) */
#browseBtn {
    width: 100%; /* Full width di mobile */
    background-color: rgba(255,255,255,0.05);
    color: var(--text-main);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 0.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

/* File Info Card - Compact */
.file-info {
    background-color: rgba(37, 99, 235, 0.08); /* Tint biru sangat tipis */
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 25px;
    display: none; /* JS control */
    animation: slideUp 0.3s ease-out;
}

.file-details {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.file-icon {
    font-size: 2rem;
    color: var(--primary);
    background: var(--bg-card);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.file-details-text h4 {
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px; /* Mencegah nama file panjang merusak layout */
}

.file-details-text p { font-size: 0.8rem; color: var(--text-muted); }

/* Input Password Modern */
.password-section h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 600;
}

.password-input {
    position: relative;
    display: flex;
    margin-bottom: 8px;
}

.password-input input {
    width: 100%;
    background-color: var(--bg-card);
    border: 1px solid var(--border);
    padding: 14px 45px 14px 15px; /* Padding kanan besar untuk tombol mata */
    border-radius: var(--radius-sm);
    color: var(--text-main);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s;
}

.password-input input:focus { border-color: var(--primary); }

#togglePassword {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    width: 45px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Strength Meter - Slim */
.password-strength {
    height: 3px;
    background: #333;
    border-radius: 2px;
    margin-top: 8px;
    overflow: hidden;
}

.password-strength-bar { height: 100%; transition: width 0.3s, background 0.3s; }

#passwordStrengthText {
    font-size: 0.75rem;
    margin-top: 5px;
    text-align: right;
    color: var(--text-muted);
}

/* Tombol Aksi - Ergonomis Mobile */
.action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 25px;
}

.btn {
    border: none;
    padding: 14px;
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: transform 0.1s;
}

.btn:active { transform: scale(0.98); }

#encryptBtn {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
}

#decryptBtn {
    background-color: #2A2A2A;
    color: white;
    border: 1px solid #3A3A3A;
}

#resetBtn {
    grid-column: span 2;
    background: transparent;
    color: var(--text-muted);
    padding: 10px;
    font-size: 0.85rem;
}

/* Status Messages - Integrated */
.status-message {
    margin-top: 15px;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    text-align: center;
    display: none;
}

.status-success { background: rgba(16, 185, 129, 0.2); color: #6EE7B7; border: 1px solid rgba(16, 185, 129, 0.3); }
.status-error { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; border: 1px solid rgba(239, 68, 68, 0.3); }

/* Fitur Grid (Info Section) */
.info-section {
    margin-top: 30px;
}

.info-section h3 {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 15px;
    padding-left: 10px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 15px 10px;
    text-align: center;
}

.feature-card i {
    font-size: 1.2rem;
    color: var(--primary);
    margin-bottom: 8px;
    display: block;
}

.feature-card span {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    line-height: 1.2;
}

footer {
    margin-top: 40px;
    text-align: center;
    color: #444;
    font-size: 0.75rem;
}

/* Utilities */
.warning { display: none; } /* Menyembunyikan text warning default agar lebih bersih */

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

/* Responsive Specifics */
@media (max-width: 480px) {
    .container { margin-top: 0; }
    .app-container { border: none; background: transparent; box-shadow: none; padding: 10px 0; }
    .upload-area { padding: 30px 15px; }
    h1 { font-size: 1.5rem; }
    .file-details-text h4 { max-width: 180px; }
}

/* Penyesuaian Style Inline yang dipindahkan ke CSS */
.password-strength-bar { 
    background-color: rgb(220, 53, 69);
}

#passwordStrengthText {
    color: rgb(220, 53, 69);
}

/* Style inline footer yang perlu dipertahankan atau dipindahkan */
.footer-created-by {
    margin-bottom: 15px;
}
.footer-created-by-muted {
    margin-bottom: 5px; 
    color: var(--text-muted);
}
.footer-created-by-main {
    color: var(--text-main); 
    font-weight: 600; 
    font-size: 0.9rem;
}

.whatsapp-link {
    text-decoration: none; 
    display: inline-flex; 
    align-items: center; 
    gap: 8px; 
    background-color: rgba(37, 211, 102, 0.1); 
    color: #25D366; 
    padding: 10px 20px; 
    border-radius: 50px; 
    border: 1px solid rgba(37, 211, 102, 0.2); 
    transition: all 0.3s;
}

.whatsapp-icon {
    font-size: 1.2rem;
}

.footer-copyright {
    margin-top: 20px; 
    opacity: 0.4;
}

/* Catatan: Untuk meniru style inline footer secara persis, Anda mungkin perlu menambahkan class pada elemen footer di HTML dan memindahkan style ini kembali. Namun, untuk kepraktisan, style ini dipertahankan secara inline di HTML karena merupakan style non-struktural. */