/* ================= THEME VARIABLES (PENGATUR TEMA OTOMATIS) ================= */
:root, body[data-theme="ice-cream"] {
  --bg-body: #F5F1E6;
  --bg-main: #ffffff;
  --bg-sidebar: #fdfbf7;
  --bg-card: #ffffff;
  --bg-input: #f8f5ed;
  --accent-main: #F9A8BB;
  --accent-dark: #e88fa3;
  --accent-hover: #ffb6c9;
  --text-main: #4a4a4a;
  --text-body: #5a5a5a;
  --text-muted: #888888;
  --text-sub: #aaaaaa;
  --text-on-accent: #ffffff;
  --border-color: #e8e2d3;
  --border-focus: #F9A8BB;
  --shadow-main: rgba(249, 168, 187, 0.2);
  --success-color: #2a9d8f;
}

/* 2. Summer */
body[data-theme="summer"] {
  --bg-body: #E36887;
  --bg-main: #d45978;
  --bg-sidebar: #d95e7c;
  --bg-card: #e67592;
  --bg-input: #cc4f6e;
  --accent-main: #F3D98F;
  --accent-dark: #e3c472;
  --accent-hover: #ffe499;
  --text-main: #ffffff;
  --text-body: #ffe6eb;
  --text-muted: #f5b0c0;
  --text-sub: #e695a8;
  --text-on-accent: #873e4f;
  --border-color: rgba(255, 255, 255, 0.2);
  --border-focus: #F3D98F;
  --shadow-main: rgba(0, 0, 0, 0.15);
  --success-color: #00ffaa;
}

/* 3. Berry (Dark Mode Aesthetic) */
body[data-theme="berry"] {
  --bg-body: #3f2a47;
  --bg-main: #33213a;
  --bg-sidebar: #382540;
  --bg-card: #4a3454;
  --bg-input: #2a1b30;
  --accent-main: #F0eada;
  --accent-dark: #d6ccba;
  --accent-hover: #ffffff;
  --text-main: #ffffff;
  --text-body: #e6ddeb;
  --text-muted: #bda8c9;
  --text-sub: #9e85ad;
  --text-on-accent: #3f2a47;
  --border-color: rgba(255, 255, 255, 0.1);
  --border-focus: #F0eada;
  --shadow-main: rgba(0, 0, 0, 0.3);
  --success-color: #69f0ae;
}

/* 4. Sunset */
body[data-theme="sunset"] {
  --bg-body: #FFCEEA;
  --bg-main: #f5bee0;
  --bg-sidebar: #fab9e2;
  --bg-card: #ffffff;
  --bg-input: #f0b1da;
  --accent-main: #FE6634;
  --accent-dark: #e65222;
  --accent-hover: #ff7d52;
  --text-main: #5c3b4d;
  --text-body: #704b5f;
  --text-muted: #a87993;
  --text-sub: #bf91a9;
  --text-on-accent: #ffffff;
  --border-color: rgba(254, 102, 52, 0.2);
  --border-focus: #FE6634;
  --shadow-main: rgba(254, 102, 52, 0.2);
  --success-color: #28a745;
}

/* 5. Cherry Cola (Dark Mode Aesthetic) */
body[data-theme="cherry-cola"] {
  --bg-body: #FFD1DC;      /* Pink Pastel Lembut */
  --bg-main: #FFC0CB;      /* Pink Merona */
  --bg-sidebar: #FFB7C5;   /* Sakura Pink */
  --bg-card: #ffffff;      /* Putih bersih biar merahnya "pop out" */
  --bg-input: #fff0f3;     /* Pink sangat muda */
  --accent-main: #E30022;  /* MERAH CERI (Aksen Gahar) */
  --accent-dark: #8B0000;  /* Merah Gelap */
  --accent-hover: #ff4d4d; /* Merah Terang saat di-hover */
  --text-main: #4a0e0e;    /* Cokelat Kemerahan Gelap (biar kebaca) */
  --text-body: #5e1a1a;
  --text-muted: #a65d5d;
  --text-sub: #c98c8c;
  --text-on-accent: #ffffff;
  --border-color: #ffdae0;
  --border-focus: #E30022; /* Border merah saat diklik */
  --shadow-main: rgba(227, 0, 34, 0.2);
  --success-color: #27ae60;
}


/* 6. Macha */
body[data-theme="macha"] {
  --bg-body: #C9DAA8;
  --bg-main: #b8c997;
  --bg-sidebar: #c0d19f;
  --bg-card: #d9e8b8;
  --bg-input: #aabf84;
  --accent-main: #62202F;
  --accent-dark: #4a1521;
  --accent-hover: #802e41;
  --text-main: #3f4730;
  --text-body: #4e593d;
  --text-muted: #73825d;
  --text-sub: #8b9c73;
  --text-on-accent: #ffffff;
  --border-color: rgba(98, 32, 47, 0.15);
  --border-focus: #62202F;
  --shadow-main: rgba(98, 32, 47, 0.15);
  --success-color: #1e7040;
}

/* 7. Cocoa (Dark Mode Aesthetic) */
body[data-theme="cocoa"] {
  --bg-body: #FDF5E6;      /* Cream Lembut (Old Lace) */
  --bg-main: #FFFFFF;      /* Putih Bersih */
  --bg-sidebar: #FDF5E6;   /* Cream senada body */
  --bg-card: #FFFFFF;      /* Kotak/Card Putih */
  --bg-input: #FAF0E6;     /* Linen Cream */
  --accent-main: #5D4037;  /* COKELAT COCOA (Aksen Utama) */
  --accent-dark: #3E2723;  /* Cokelat Gelap */
  --accent-hover: #8D6E63; /* Cokelat Muda */
  --text-main: #3E2723;    /* Teks Cokelat Tua agar kontras */
  --text-body: #4E342E;
  --text-muted: #8D6E63;
  --text-sub: #A1887F;
  --text-on-accent: #FFFFFF;
  --border-color: #EEDFCC; /* Border warna biskuit */
  --border-focus: #5D4037; /* Border cokelat saat klik */
  --shadow-main: rgba(93, 64, 55, 0.1);
  --success-color: #2E7D32;
}


/* 8. Lilac Cream */
body[data-theme="lilac-cream"] {
  --bg-body: #FFFDD0;
  --bg-main: #f5f2b8;
  --bg-sidebar: #faf7c3;
  --bg-card: #ffffff;
  --bg-input: #ebe7a4;
  --accent-main: #C8A2C8;
  --accent-dark: #b08ab0;
  --accent-hover: #dfb9df;
  --text-main: #524752;
  --text-body: #665b66;
  --text-muted: #8c808c;
  --text-sub: #a69ba6;
  --text-on-accent: #ffffff;
  --border-color: rgba(200, 162, 200, 0.3);
  --border-focus: #C8A2C8;
  --shadow-main: rgba(200, 162, 200, 0.15);
  --success-color: #2a9d8f;
}

/* 9. Indigo (Dark Mode Aesthetic) */
body[data-theme="indigo"] {
  --bg-body: #3A405A;
  --bg-main: #2d3247;
  --bg-sidebar: #333852;
  --bg-card: #474e6e;
  --bg-input: #212536;
  --accent-main: #F9DEC9;
  --accent-dark: #e0bda1;
  --accent-hover: #ffebe0;
  --text-main: #ffffff;
  --text-body: #e3e5f0;
  --text-muted: #a3abc7;
  --text-sub: #828ca8;
  --text-on-accent: #2d3247;
  --border-color: rgba(249, 222, 201, 0.15);
  --border-focus: #F9DEC9;
  --shadow-main: rgba(0, 0, 0, 0.25);
  --success-color: #69f0ae;
}

/* 10. Sand (Dark Mode Aesthetic) */
body[data-theme="sand"] {
  --bg-body: #272727;
  --bg-main: #1c1c1c;
  --bg-sidebar: #222222;
  --bg-card: #333333;
  --bg-input: #121212;
  --accent-main: #D4AA7D;
  --accent-dark: #b89065;
  --accent-hover: #e8c197;
  --text-main: #ffffff;
  --text-body: #d1d1d1;
  --text-muted: #949494;
  --text-sub: #7a7a7a;
  --text-on-accent: #121212;
  --border-color: rgba(212, 170, 125, 0.2);
  --border-focus: #D4AA7D;
  --shadow-main: rgba(0, 0, 0, 0.4);
  --success-color: #00ffaa;
}

/* 11. Espresso Oak (Dark Mode Aesthetic) */
body[data-theme="espresso-oak"] {
  --bg-body: #363031;
  --bg-main: #292425;
  --bg-sidebar: #2e292a;
  --bg-card: #423b3c;
  --bg-input: #1f1b1c;
  --accent-main: #cbc1b3;
  --accent-dark: #ad9f8c;
  --accent-hover: #e3ddd5;
  --text-main: #ffffff;
  --text-body: #d6d1d2;
  --text-muted: #9c9294;
  --text-sub: #807779;
  --text-on-accent: #1f1b1c;
  --border-color: rgba(203, 193, 179, 0.15);
  --border-focus: #cbc1b3;
  --shadow-main: rgba(0, 0, 0, 0.3);
  --success-color: #69f0ae;
}

/* 12. Orange Jus */
body[data-theme="orange-jus"] {
  --bg-body: #d7efff;
  --bg-main: #bde4ff;
  --bg-sidebar: #c7ebff;
  --bg-card: #ffffff;
  --bg-input: #a3d9ff;
  --accent-main: #df7500;
  --accent-dark: #b35e00;
  --accent-hover: #ff8c1a;
  --text-main: #1a3345;
  --text-body: #2b4b63;
  --text-muted: #5e84a1;
  --text-sub: #7b9eb8;
  --text-on-accent: #ffffff;
  --border-color: rgba(223, 117, 0, 0.2);
  --border-focus: #df7500;
  --shadow-main: rgba(223, 117, 0, 0.15);
  --success-color: #28a745;
}

/* 13. Matcha Latte */
body[data-theme="matcha-latte"] {
  --bg-body: #F0F4E1;
  --bg-main: #ffffff;
  --bg-sidebar: #F0F4E1;
  --bg-card: #ffffff;
  --bg-input: #E8EDD1;
  --accent-main: #8FB996;
  --accent-dark: #6B8E70;
  --accent-hover: #A5C9AB;
  --text-main: #3E4E3E;
  --text-body: #4E5E4E;
  --text-muted: #7A9B7A;
  --text-sub: #A3BBA3;
  --text-on-accent: #ffffff;
  --border-color: #DDE5B6;
  --border-focus: #8FB996;
  --shadow-main: rgba(143, 185, 150, 0.2);
  --success-color: #4E7E4E;
}

/* 14. Midnight Rose (Dark) */
body[data-theme="midnight-rose"] {
  --bg-body: #1A1216;
  --bg-main: #120B0E;
  --bg-sidebar: #1F151B;
  --bg-card: #2A1D24;
  --bg-input: #0F090C;
  --accent-main: #E91E63;
  --accent-dark: #AD1457;
  --accent-hover: #F06292;
  --text-main: #ffffff;
  --text-body: #FCE4EC;
  --text-muted: #F06292;
  --text-sub: #880E4F;
  --text-on-accent: #ffffff;
  --border-color: rgba(233, 30, 99, 0.2);
  --border-focus: #E91E63;
  --shadow-main: rgba(233, 30, 99, 0.4);
  --success-color: #00E676;
}

/* 15. Blue Velvet */
body[data-theme="blue-velvet"] {
  --bg-body: #E3F2FD;
  --bg-main: #ffffff;
  --bg-sidebar: #E3F2FD;
  --bg-card: #ffffff;
  --bg-input: #BBDEFB;
  --accent-main: #5C6BC0;
  --accent-dark: #3949AB;
  --accent-hover: #7986CB;
  --text-main: #1A237E;
  --text-body: #283593;
  --text-muted: #7986CB;
  --text-sub: #9FA8DA;
  --text-on-accent: #ffffff;
  --border-color: #C5CAE9;
  --border-focus: #5C6BC0;
  --shadow-main: rgba(92, 107, 192, 0.2);
  --success-color: #43A047;
}

/* 16. Honey Lemon */
body[data-theme="honey-lemon"] {
  --bg-body: #FFFDE7;
  --bg-main: #ffffff;
  --bg-sidebar: #FFFDE7;
  --bg-card: #ffffff;
  --bg-input: #FFF9C4;
  --accent-main: #FBC02D;
  --accent-dark: #F9A825;
  --accent-hover: #FDD835;
  --text-main: #5D4037;
  --text-body: #795548;
  --text-muted: #AFB42B;
  --text-sub: #C0CA33;
  --text-on-accent: #ffffff;
  --border-color: #FFF59D;
  --border-focus: #FBC02D;
  --shadow-main: rgba(251, 192, 45, 0.2);
  --success-color: #2E7D32;
}

/* 17. Taro Milk */
body[data-theme="taro-milk"] {
  --bg-body: #F3E5F5;
  --bg-main: #ffffff;
  --bg-sidebar: #F3E5F5;
  --bg-card: #ffffff;
  --bg-input: #E1BEE7;
  --accent-main: #9C27B0;
  --accent-dark: #7B1FA2;
  --accent-hover: #BA68C8;
  --text-main: #4A148C;
  --text-body: #6A1B9A;
  --text-muted: #BA68C8;
  --text-sub: #D1C4E9;
  --text-on-accent: #ffffff;
  --border-color: #E1BEE7;
  --border-focus: #9C27B0;
  --shadow-main: rgba(156, 39, 176, 0.2);
  --success-color: #4CAF50;
}


/* ================= RESET & BASE ================= */
*{ margin:0; padding:0; box-sizing:border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; 
}
body{
  font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-body);
  color: var(--text-body);
  line-height:1.6;
  overflow-x:hidden; 
  width:100%;
  transition: background 0.4s ease, color 0.4s ease;
}
/* Container utama dibuat dinamis maksimal 1200px */
.container{ width: 90%; max-width: 1200px; margin: auto; }

/* ================= SCROLLBAR ================= */
::-webkit-scrollbar{ width:5px; }
::-webkit-scrollbar-track{ background: var(--bg-body); }
::-webkit-scrollbar-thumb{ background: var(--accent-dark); border-radius:10px; }

/* ================= GOOGLE TRANSLATE ================= */
.g-translate-wrapper {
    display: inline-block;
    background: linear-gradient(145deg, var(--accent-dark), var(--bg-sidebar)); 
    border-radius: 6px;
    padding: 2px 8px;
    border: 1px solid var(--border-focus);
    box-shadow: 0 4px 6px var(--shadow-main);
}
.goog-te-gadget {
    color: transparent !important;
    font-size: 0 !important;
}
.goog-te-combo {
    background-color: transparent !important;
    color: var(--text-main) !important;
    border: none !important;
    padding: 5px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    outline: none !important;
    cursor: pointer !important;
}
.goog-te-combo option {
    background-color: var(--bg-input) !important;
    color: var(--text-main) !important;
}
/* Menyembunyikan elemen bawaan Google yang merusak UI */
.goog-logo-link { display: none !important; }
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate { display: none !important; }
#goog-gt-tt { display: none !important; }
body { top: 0px !important; }

/* ================= NAVBAR ================= */
header{ background: var(--bg-sidebar); border-bottom:1px solid var(--border-color); padding: 15px 0; position:sticky; top:0; z-index:100; transition: background 0.4s ease; }
.nav{ display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 15px; }
.logo{ font-size: clamp(20px, 4vw, 26px); font-weight:700; color: var(--text-main); letter-spacing:4px; }
nav a{ margin:0 10px; text-decoration:none; color: var(--text-muted); font-size:14px; letter-spacing:1px; transition:color 0.2s; }
nav a:hover{ color: var(--text-main); }

/* ================= BUTTONS ================= */
.btn{ background:linear-gradient(45deg, var(--accent-dark), var(--accent-main)); border:none; padding:10px 24px; border-radius:6px; color: var(--text-on-accent); cursor:pointer; font-size:14px; font-weight:500; transition:all 0.3s; white-space: nowrap; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px var(--shadow-main); }
.btn-outline{ border:1px solid var(--border-focus); background:transparent; padding:10px 24px; border-radius:6px; color: var(--text-muted); cursor:pointer; font-size:14px; transition:all 0.2s; }
.btn-outline:hover{ border-color: var(--accent-main); color: var(--text-main); background: var(--border-color); }
.btn-back { display: block; text-align: center; margin-top: 20px; color: var(--text-muted) !important; text-decoration: none !important; font-size: 13px; font-weight: 500; transition: all 0.3s ease; cursor: pointer; }
.btn-back:hover { color: var(--accent-main) !important; transform: translateY(-2px); }

/* ================= HERO ================= */
.hero{ min-height:100vh; display:flex; align-items:center; background:linear-gradient(180deg, var(--bg-body), var(--bg-sidebar), var(--bg-body)); padding: 80px 0; }
.hero-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items:center; gap:50px; }
.hero-text h1{ font-size: clamp(32px, 5vw, 52px); font-weight:700; line-height:1.1; margin-bottom:20px; letter-spacing:2px; color: var(--text-main); }
.hero-text h1 span{ color: var(--accent-main); text-shadow:0 0 30px var(--shadow-main); }
.hero-text p{ color: var(--text-muted); margin-bottom:30px; font-size: clamp(14px, 2vw, 15px); max-width:420px; line-height:1.8; }
.circle{ width: clamp(250px, 30vw, 340px); height: clamp(250px, 30vw, 340px); background:radial-gradient(circle, var(--accent-main), var(--bg-sidebar)); border-radius:50%; margin:auto; box-shadow:0 0 60px var(--shadow-main); }

/* ================= WORKFLOW & FEATURES & CONTACT ================= */
.workflow, .features, .contact { min-height: 100vh; display: flex; align-items: center; padding: 80px 0; }
.workflow { background:linear-gradient(180deg, var(--bg-sidebar), var(--bg-body)); }
.features { background:linear-gradient(180deg, var(--bg-body), var(--bg-sidebar)); text-align:center; }
.contact { background:linear-gradient(180deg, var(--bg-sidebar), var(--bg-main)); text-align:center; border-top:1px solid var(--border-color); }
.workflow .container, .features .container, .contact .container { width: 100%; }

.workflow-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap:50px; align-items:center; }
.workflow-text h2{ font-size: clamp(28px, 4vw, 34px); font-weight:600; margin-bottom:15px; color: var(--text-main); }
.workflow-text p{ color: var(--text-muted); font-size:15px; }
.workflow-box{ width:280px; height:280px; border-radius:50%; margin:auto; position:relative; display:flex; align-items:center; justify-content:center; transform: scale(0.8); }
.workflow-box::before{ content:''; position:absolute; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle, var(--accent-main), var(--bg-sidebar)); box-shadow:0 0 60px var(--shadow-main); animation:pulse 2.5s ease-in-out infinite; }
.workflow-box::after{ content:'T'; position:absolute; font-size:80px; font-weight:700; color: var(--text-main); opacity: 0.15; z-index:1; }
.workflow-box .ring1{ position:absolute; width:240px; height:240px; border-radius:50%; border:1px solid var(--border-focus); animation:rotate 8s linear infinite; }
.workflow-box .ring2{ position:absolute; width:280px; height:280px; border-radius:50%; border:1px dashed var(--border-color); animation:rotate 14s linear infinite reverse; }
.workflow-box .ring1::after{ content:''; position:absolute; top:-4px; left:50%; width:8px; height:8px; border-radius:50%; background: var(--accent-main); box-shadow:0 0 10px var(--accent-main); transform:translateX(-50%); }

.features h2{ font-size: clamp(28px, 4vw, 36px); font-weight:600; letter-spacing:2px; margin-bottom:30px; color: var(--text-main); }
.feature-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap:25px; }
.card{ background: var(--bg-card); padding:30px; border-radius:14px; transition:0.35s; box-shadow:0 10px 25px var(--shadow-main); border:1px solid var(--border-color); }
.card:hover{ transform:translateY(-8px); box-shadow: 0 15px 35px var(--shadow-main); background: var(--bg-card); border-color: var(--border-focus); }
.card h3{ font-size:18px; margin-bottom:10px; color: var(--accent-main); }
.card p{ color: var(--text-sub); font-size:14px; line-height:1.7; }

.contact-title{ font-size: clamp(28px, 4vw, 34px); font-weight:600; letter-spacing:2px; margin-bottom:12px; color: var(--text-main); }
.contact-desc{ max-width:500px; margin:0 auto 30px; color: var(--text-muted); font-size:15px; }
.contact-info{ display:flex; gap:20px; flex-wrap:wrap; justify-content:center; }
.contact-item{ background: var(--bg-card); padding:20px; border-radius:10px; flex: 1; min-width: 250px; text-align:left; font-size:14px; color: var(--text-sub); border: 1px solid var(--border-color); }
.contact-item strong{ color: var(--accent-main); display:block; margin-bottom:6px; font-size:13px; letter-spacing:2px; }

/* ================= FOOTER ================= */
footer{ padding:30px; text-align:center; background: var(--bg-sidebar); color: var(--text-sub); font-size:13px; letter-spacing:1px; transition: background 0.4s ease; }

/* ================= LOGIN & REGISTER PAGE ================= */
.login-page, .register-page{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg, var(--bg-body), var(--bg-sidebar), var(--bg-body)); padding: 40px 15px; }
.login-box, .register-box { width: 100%; max-width: 450px; background: var(--bg-card); border:1px solid var(--border-color); border-radius:16px; padding: clamp(25px, 5vw, 40px); box-shadow: 0 10px 30px var(--shadow-main); }
.register-box { max-width: 550px; }
.login-box h2, .register-box h2{ font-size: clamp(24px, 5vw, 28px); font-weight:700; letter-spacing:4px; text-align:center; color: var(--text-main); margin-bottom:8px; }
.login-box .sub{ text-align:center; color: var(--accent-main); font-size:13px; margin-bottom:28px; opacity:0.8; }
.login-box input, .register-form input{ width:100%; padding:14px; border-radius:8px; border:1px solid var(--border-color); margin-bottom:15px; background: var(--bg-input); color: var(--text-main); outline:none; font-size:14px; box-sizing:border-box; transition: 0.3s; }
.login-box input:focus, .register-form input:focus{ box-shadow:0 0 12px var(--border-focus); border-color: var(--accent-main); }
.login-box .btn-login, .register-buttons .btn{ width:100%; padding:13px; margin-bottom:12px; border-radius:8px; background:linear-gradient(45deg, var(--accent-dark), var(--accent-main)); border:none; color: var(--text-on-accent); cursor:pointer; font-weight:600; font-size:16px; letter-spacing:2px; transition:all 0.3s; }
.login-box .btn-login:hover, .register-buttons .btn:hover{ transform:translateY(-2px); box-shadow:0 8px 20px var(--shadow-main); }
.login-box .btn-google{ width:100%; padding:13px; border-radius:8px; background:transparent; border:1px solid var(--border-focus); color: var(--text-main); cursor:pointer; font-size:14px; margin-bottom:20px; transition:0.3s; }
.login-box .btn-google:hover{ background: var(--border-color); }
.switch-link{ text-align:center; font-size:13px; color: var(--text-sub); }
.switch-link a{ color: var(--accent-main); text-decoration:none; font-weight: bold; }
.error-msg{ background: var(--border-color); border:1px solid var(--border-focus); color: var(--accent-main); padding:10px 14px; border-radius:8px; font-size:13px; margin-bottom:15px; text-align:center; }

/* INI BAGIAN YANG DIPERBAIKI BIAR NGGAK DEMPETAN */
.register-row{ display:flex; flex-wrap: wrap; gap:15px; margin-bottom:15px; } 
.register-row input{ flex: 1; min-width: 150px; margin-bottom: 0; }

.register-terms{ display:flex; align-items:center; gap:10px; margin:15px 0 20px; font-size:13px; color: var(--text-muted); }
.register-terms input{ width:auto; margin:0; }
.register-buttons{ display:flex; flex-wrap: wrap; gap:15px; }
.register-buttons .btn, .register-buttons a { flex:1; min-width: 150px; }
.register-buttons .btn-outline { width: 100%; }

/* ================= DASHBOARD & SIDEBAR ================= */
.dashboard{ display:flex; min-height:100vh; background: var(--bg-main); transition: background 0.4s ease; }
.sidebar{ background: var(--bg-sidebar); border-right:1px solid var(--border-color); display:flex; flex-direction:column; padding:24px 12px; position:fixed; top:0; left:0; width:240px; height:100vh; overflow-y:auto; overflow-x:hidden; z-index:100; transition: transform 0.3s ease, background 0.4s ease; }
.sidebar h2{ font-size:20px; font-weight:700; letter-spacing:4px; color: var(--text-main); margin-bottom:32px; padding:4px 14px; }
.sidebar-menu{ list-style:none; display:flex; flex-direction:column; gap:4px; }
.sidebar-menu a{ display:block; padding:10px 14px; text-decoration:none; color: var(--text-muted); font-size:14px; border-radius:8px; transition:all 0.3s; }
.sidebar-menu li.active a, .sidebar-menu li a:hover { color: var(--text-main); background-color: var(--border-color); text-shadow: 0 0 10px var(--accent-main); box-shadow: inset 5px 0 15px var(--border-focus); border-radius: 4px; border-left: 4px solid var(--accent-main); }
.sidebar hr{ border:none; border-top:1px solid var(--border-color); margin:16px 4px; }
.bottom-menu{ display:flex; flex-direction:column; gap:4px; margin-top:auto; padding-bottom: 20px; }
.bottom-menu a{ padding:10px 14px; text-decoration:none; color: var(--text-muted); border-radius:8px; transition:all 0.2s; font-size:14px; }
.bottom-menu a:hover{ background: var(--border-color); color: var(--text-main); box-shadow:0 0 10px var(--shadow-main); }
.bottom-menu .logout{ color: var(--accent-main); font-weight: bold; }
.bottom-menu .logout:hover{ color: var(--text-on-accent); background: var(--accent-main); }

/* ================= MAIN CONTENT ================= */
.main{ padding: clamp(20px, 4vw, 40px); margin-left: 240px; width: calc(100% - 240px); min-height:100vh; background: var(--bg-main); overflow-x:hidden; display:flex; flex-direction:column; gap: 20px; box-sizing:border-box; transition: background 0.4s ease; }

/* ================= TOPBAR ================= */
.topbar{ display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap: 15px; flex-shrink:0; background: var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:12px 20px; box-shadow: 0 4px 15px var(--shadow-main); }
.topbar h1{ font-size: clamp(16px, 3vw, 20px); font-weight:600; color: var(--text-main); }
.topinfo{ display:flex; align-items:center; flex-wrap: wrap; gap:10px; }
.date,.notif-btn,.profile-circle{ background: var(--bg-input); border:1px solid var(--border-focus); padding:6px 12px; border-radius:8px; font-size:12px; display:flex; align-items:center; gap:6px; color: var(--text-main); }
.notif-btn{ cursor:pointer; }
.notification-wrapper{ position:relative; }
.notif-box{ position:absolute; right:0; top:42px; background: var(--bg-sidebar); border:1px solid var(--border-focus); border-radius:10px; padding:15px; width:200px; display:none; z-index:999; font-size:13px; color: var(--text-muted); box-shadow: 0 5px 15px var(--shadow-main); }
.notif-box.show{ display:block; }
.online-text{ color: var(--success-color); font-weight:600; }
.online-glow { color: var(--accent-main); text-shadow: 0 0 10px var(--border-focus); animation: pulse 2s infinite; }

/* MEMATIKAN KLIK PADA PROFIL DI TOPBAR (HANYA PAJANGAN) */
a[href="index.php?page=profile"] { pointer-events: none; cursor: default; text-decoration: none; }

/* ================= STAT CARDS ================= */
.stat-cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; flex-shrink:0; }
.stat-card{ background: var(--bg-card); border:1px solid var(--border-color); border-radius:10px; padding:16px; box-shadow: 0 4px 15px var(--shadow-main); }
.stat-card-label{ font-size:10px; letter-spacing:2px; color: var(--accent-main); text-transform:uppercase; margin-bottom:8px; font-weight: bold; }
.stat-card-value{ font-size:20px; font-weight:700; color: var(--text-main); margin-bottom:4px; }
.stat-card-sub{ font-size:11px; color: var(--text-sub); }
.stat-card-bar{ margin-top:10px; height:3px; background: var(--border-color); border-radius:3px; overflow:hidden; }
.stat-card-bar-fill{ height:100%; background:linear-gradient(90deg, var(--accent-dark), var(--accent-main)); border-radius:3px; }

/* ================= AI BOX & PROFILE CARD DI DASHBOARD ================= */
.ai-box{ background: var(--bg-card); padding:16px 20px; border-radius:10px; border:1px solid var(--border-focus); flex: 1; min-width: 250px; box-shadow: 0 4px 15px var(--shadow-main); }
.ai-box h3{ font-size:11px; font-weight:600; letter-spacing:3px; color: var(--text-muted); margin-bottom:5px; }
.ai-box p{ color: var(--text-sub); font-size:12px; margin-bottom:10px; }
.ai-box input{ width:100%; padding:10px 14px; background: var(--bg-input); border:1px solid var(--border-color); border-radius:8px; color: var(--text-main); font-size:13px; outline:none; box-sizing:border-box; transition: 0.3s; }
.ai-box input:focus{ box-shadow:0 0 8px var(--border-focus); border-color: var(--accent-main); }

/* KOTAK PROFIL DASHBOARD (SEKARANG HANYA PAJANGAN, TIDAK BISA DIKLIK) */
.profile-card-link { flex: 1; min-width: 250px; text-decoration: none !important; display: block; pointer-events: none; cursor: default; }
.profile-card-clickable { height: 100%; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 15px var(--shadow-main); transition: none; cursor: default; }
.profile-card-clickable:hover { border-color: var(--border-color) !important; transform: none; box-shadow: 0 4px 15px var(--shadow-main); }
.pc-avatar { width: 50px; height: 50px; border-radius: 50%; background: var(--accent-dark); border: 2px solid var(--accent-main); display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; color: var(--text-on-accent); box-shadow: 0 0 10px var(--border-focus); flex-shrink: 0; }

/* ================= PROFILE PAGE ================= */
.profile-content-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    width: 100%;
    max-width: 800px; 
    margin: 10px auto; 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 16px; 
    padding: clamp(20px, 4vw, 45px); 
    box-shadow: 0 15px 35px var(--shadow-main); 
    animation: fadeIn 0.4s ease; 
}
.profile-header-new { display: flex; align-items: center; gap: 15px; border-bottom: 1px dashed var(--border-focus); padding-bottom: 15px; flex-wrap: wrap; }
.profile-avatar-giant { width: 75px; height: 75px; border-radius: 50%; border: 2px solid var(--accent-main); display: flex; align-items: center; justify-content: center; font-size: 28px; color: var(--text-on-accent); background: var(--accent-dark); box-shadow: 0 0 10px var(--border-focus); flex-shrink: 0; }
.profile-name-section h2 { color: var(--text-main); font-size: clamp(18px, 3vw, 20px); letter-spacing: 1px; margin-bottom: 2px; }
.profile-name-section p { color: var(--accent-main); font-size: 10px; font-weight: 600; letter-spacing: 0.5px; opacity: 0.9; }
.form-section { margin-bottom: 5px; }
.form-section h3 { font-size: 12px; color: var(--accent-main); letter-spacing: 1px; margin-bottom: 15px; text-transform: uppercase; }
.section-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; }
.input-group-new { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.input-group-new label { font-size: 9px; color: var(--text-muted); letter-spacing: 1px; font-weight: 600; }
.input-group-new input { background: var(--bg-input); border: 1px solid var(--border-color); padding: 10px 14px; color: var(--text-main); border-radius: 6px; outline: none; font-size: 13px; transition: 0.3s; width: 100%; box-sizing: border-box; }
.input-group-new input:focus { border-color: var(--accent-main); background: var(--bg-input); box-shadow: 0 0 8px var(--border-focus); }
.full-width { grid-column: 1 / -1; }
.verified-badge { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--success-color); font-size: 10px; font-weight: 600;}
.profile-action-buttons { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 12px; margin-top: 15px; }
.btn-save { background: var(--accent-main); color: var(--text-on-accent); padding: 10px 24px; border: none; border-radius: 6px; cursor: pointer; transition: 0.3s; font-size: 13px; font-weight: 600;}
.btn-save:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 4px 15px var(--shadow-main); }
.btn-discard { background: transparent; color: var(--text-muted); border: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: 0.3s; padding: 10px; }
.btn-discard:hover { color: var(--text-main); }

/* ================= PLANNING PAGE ================= */
.planning-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    width: 100%;
    max-width: 900px; 
    margin: 0 auto; 
    animation: fadeIn 0.4s ease; 
}
.add-task-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    padding: 20px; 
    display: flex; 
    gap: 15px; 
    align-items: center; 
    box-shadow: 0 10px 25px var(--shadow-main); 
    flex-wrap: wrap; 
}
.add-task-card input { 
    flex: 1; 
    min-width: 250px; 
    background: var(--bg-input); 
    border: 1px solid var(--border-color); 
    padding: 14px 18px; 
    color: var(--text-main); 
    border-radius: 8px; 
    outline: none; 
    font-size: 14px; 
    transition: 0.3s; 
}
.add-task-card input:focus { border-color: var(--accent-main); box-shadow: 0 0 10px var(--border-focus); }
.add-task-card select { 
    background: var(--bg-input); 
    border: 1px solid var(--border-color); 
    padding: 14px; 
    color: var(--text-main); 
    border-radius: 8px; 
    outline: none; 
    font-size: 14px; 
    cursor: pointer; 
}
.btn-add-task { 
    background: var(--accent-main); 
    color: var(--text-on-accent); 
    border: none; 
    padding: 14px 28px; 
    border-radius: 8px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.3s; 
    letter-spacing: 1px;
}
.btn-add-task:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-main); }
.task-section-title { 
    font-size: 12px; 
    color: var(--accent-main); 
    letter-spacing: 2px; 
    font-weight: 600;
    margin-top: 15px; 
    border-bottom: 1px dashed var(--border-focus); 
    padding-bottom: 8px; 
}
.task-list { display: flex; flex-direction: column; gap: 10px; }
.task-item { 
    background: var(--bg-sidebar); 
    border: 1px solid var(--border-color); 
    border-radius: 10px; 
    padding: 16px 20px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    transition: 0.3s; 
}
.task-item:hover { border-color: var(--border-focus); transform: translateX(5px); background: var(--bg-input); }
.task-item.completed { opacity: 0.5; border-color: transparent; }
.task-item.completed:hover { transform: none; background: var(--bg-sidebar); border-color: var(--border-color); }
.task-item.completed .task-text { text-decoration: line-through; color: var(--text-sub); }
.task-info { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.task-cat-badge { 
    font-size: 10px; 
    padding: 4px 10px; 
    background: var(--border-color); 
    color: var(--accent-main); 
    border-radius: 20px; 
    border: 1px solid var(--border-focus); 
    font-weight: 600; 
    letter-spacing: 1px; 
}
.task-text { color: var(--text-main); font-size: 14px; font-weight: 500; }
.task-actions { display: flex; gap: 8px; }
.btn-icon { 
    width: 34px; 
    height: 34px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    transition: 0.3s; 
    font-size: 14px; 
    text-decoration: none; 
}
.btn-check { background: rgba(0, 255, 106, 0.1); color: var(--success-color); border: 1px solid rgba(0, 255, 106, 0.2); }
.btn-check:hover { background: rgba(0, 255, 106, 0.2); transform: scale(1.1); box-shadow: 0 0 10px rgba(0,255,106,0.3); }
.btn-delete { background: var(--border-color); color: var(--accent-main); border: 1px solid var(--border-focus); }
.btn-delete:hover { background: var(--border-focus); transform: scale(1.1); box-shadow: 0 0 10px var(--shadow-main); }
.empty-task { text-align: center; color: var(--text-muted); font-size: 13px; padding: 30px; background: var(--bg-main); border: 1px dashed var(--border-color); border-radius: 10px; font-weight: 500;}

/* ================= SCHEDULE PAGE ================= */
.schedule-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    width: 100%;
    max-width: 900px; 
    margin: 0 auto; 
    animation: fadeIn 0.4s ease; 
}
.add-schedule-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    box-shadow: 0 10px 25px var(--shadow-main); 
}
.schedule-inputs { display: flex; flex-direction: column; gap: 10px; }
.schedule-inputs input, .schedule-inputs textarea { 
    background: var(--bg-input); 
    border: 1px solid var(--border-color); 
    padding: 14px 18px; 
    color: var(--text-main); 
    border-radius: 8px; 
    outline: none; 
    font-size: 14px; 
    transition: 0.3s; 
    width: 100%;
    box-sizing: border-box;
}
.schedule-inputs input:focus, .schedule-inputs textarea:focus { border-color: var(--accent-main); box-shadow: 0 0 10px var(--border-focus); }
.datetime-wrapper { 
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    background: var(--bg-body); 
    padding: 12px 18px; 
    border-radius: 8px; 
    border: 1px dashed var(--border-color); 
}
.dt-group { display: flex; flex-direction: column; gap: 8px; }
.dt-group label { font-size: 11px; color: var(--accent-main); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.schedule-inputs .row { display: flex; gap: 10px; flex-wrap: wrap; }
.schedule-inputs .row input { flex: 1; min-width: 150px; }
.schedule-inputs textarea { min-height: 80px; resize: vertical; font-family: inherit; }
.btn-add-schedule { 
    background: var(--accent-main); 
    color: var(--text-on-accent); 
    border: none; 
    padding: 14px 28px; 
    border-radius: 8px; 
    font-weight: 600; 
    cursor: pointer; 
    transition: 0.3s; 
    letter-spacing: 1px;
    align-self: flex-start;
}
.btn-add-schedule:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-main); }
.schedule-grid-list { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: 15px; 
}
.schedule-card { 
    background: var(--bg-card); 
    border: 1px solid var(--border-color); 
    border-radius: 12px; 
    padding: 20px; 
    transition: 0.3s; 
    position: relative; 
}
.schedule-card:hover { border-color: var(--border-focus); transform: translateY(-4px); box-shadow: 0 10px 25px var(--shadow-main); }
.sc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.sc-time { font-size: 20px; font-weight: 700; color: var(--accent-main); letter-spacing: 1px; }
.sc-del { text-decoration: none; color: var(--text-sub); font-size: 24px; line-height: 1; transition: 0.2s; }
.sc-del:hover { color: var(--accent-main); transform: scale(1.1); }
.sc-title { color: var(--text-main); font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.sc-date { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; display: flex; align-items: center; gap: 5px; }
.sc-desc { font-size: 13px; color: var(--text-sub); line-height: 1.5; border-top: 1px dashed var(--border-color); padding-top: 12px; }

/* ================= FINANCE PAGE ================= */
.finance-wrapper { display: flex; flex-direction: column; gap: 15px; width: 100%; max-width: 900px; margin: 0 auto; animation: fadeIn 0.4s ease; }
.finance-header-card { background: var(--bg-card); border: 1px solid var(--border-focus); border-radius: 12px; padding: 25px; text-align: center; box-shadow: 0 10px 25px var(--shadow-main); }
.fh-title { font-size: 11px; letter-spacing: 3px; color: var(--accent-main); margin-bottom: 8px; font-weight: 600; }
.fh-amount { font-size: 32px; font-weight: 700; color: var(--text-main); letter-spacing: 1px; text-shadow: 0 0 15px var(--border-color); }
.add-finance-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 15px; box-shadow: 0 10px 25px var(--shadow-main); }
.finance-inputs { display: flex; flex-direction: column; gap: 10px; }
.finance-inputs .row { display: flex; gap: 10px; flex-wrap: wrap; }
.finance-inputs .row > * { flex: 1; min-width: 150px; }
.finance-inputs input, .finance-inputs select { background: var(--bg-input); border: 1px solid var(--border-color); padding: 14px 18px; color: var(--text-main); border-radius: 8px; outline: none; font-size: 14px; transition: 0.3s; box-sizing: border-box; }
.finance-inputs input:focus, .finance-inputs select:focus { border-color: var(--accent-main); box-shadow: 0 0 10px var(--border-focus); }
.select-jenis option { background: var(--bg-input); color: var(--text-main); }
.btn-add-finance { background: var(--accent-main); color: var(--text-on-accent); border: none; padding: 14px 28px; border-radius: 8px; font-weight: 600; cursor: pointer; transition: 0.3s; letter-spacing: 1px; align-self: flex-start; }
.btn-add-finance:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-main); }
.transaction-list { display: flex; flex-direction: column; gap: 10px; }
.trans-item { background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; flex-wrap: wrap; gap: 15px; }
.trans-item:hover { border-color: var(--border-focus); transform: translateX(5px); background: var(--bg-input); }
.trans-left { display: flex; align-items: center; gap: 15px; }
.trans-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.trans-icon.income { background: rgba(0, 255, 106, 0.1); color: var(--success-color); border: 1px solid rgba(0, 255, 106, 0.2); }
.trans-icon.expense { background: var(--border-color); color: var(--accent-main); border: 1px solid var(--border-focus); }
.trans-title { color: var(--text-main); font-size: 14px; font-weight: 500; margin-bottom: 2px; }
.trans-date { font-size: 11px; color: var(--text-sub); }
.trans-right { display: flex; align-items: center; gap: 15px; }
.trans-amount { font-size: 16px; font-weight: 600; letter-spacing: 0.5px; }
.trans-amount.income { color: var(--success-color); }
.trans-amount.expense { color: var(--accent-main); }
.btn-del-trans { color: var(--text-sub); text-decoration: none; font-size: 16px; transition: 0.3s; }
.btn-del-trans:hover { color: var(--accent-main); transform: scale(1.1); }

/* ================= ANIMASI ================= */
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@keyframes rotate{ from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ================= RESPONSIVE UTAMA ================= */
@media(max-width: 900px){
  .sidebar{ transform: translateX(-100%); display: none; }
  .main { margin-left: 0; width: 100%; padding: 20px 15px; } 
  .main > div[style*="display:grid"] { grid-template-columns: 1fr !important; }
  .feature-grid { grid-template-columns: 1fr 1fr; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
  .section-row { grid-template-columns: 1fr 1fr; }
  .schedule-grid-list { grid-template-columns: 1fr 1fr; }
  /* Responsive untuk form upload vault */
  .add-task-card, .add-finance-card, .vault-upload-form { flex-direction: column; align-items: stretch; }
  .btn-add-task, .btn-add-finance, .btn-upload-vault { width: 100%; }
}

@media(max-width: 600px){
  .feature-grid { grid-template-columns: 1fr; }
  .stat-cards { grid-template-columns: 1fr; }
  .section-row { grid-template-columns: 1fr; }
  .schedule-grid-list { grid-template-columns: 1fr; }
  .finance-inputs .row > * { min-width: 100%; }
}

/* ================= TAMBAHAN CSS VAULT MODAL (VERSI HALAMAN KHUSUS) ================= */
/* KHUSUS VAULT: Diubah menjadi super minimalis dan bersih terintegrasi dengan tema utama */

/* Desain Pop-up PIN saat Brankas Terkunci */
.vault-modal-backdrop {
    display: none; 
    position: fixed; 
    z-index: 9999; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    background: rgba(0, 0, 0, 0.7); 
    backdrop-filter: blur(4px);
    align-items: center; 
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.vault-modal-box {
    background: var(--bg-card);
    padding: 35px 30px; 
    border-radius: 16px; 
    border: 1px solid var(--border-color); 
    width: 100%;
    max-width: 360px; 
    text-align: center;
    box-shadow: 0 15px 40px var(--shadow-main);
}

/* Typography untuk Modal agar lebih rapi dan minimalis */
.vault-modal-box h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 3px;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.vault-modal-box p {
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.vault-modal-box form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.vault-pin-input {
    width: 100%; 
    padding: 10px; 
    background: var(--bg-input); 
    border: 1px solid var(--border-color); 
    color: var(--text-main); 
    text-align: center; 
    font-size: 14px; 
    font-weight: 600;
    letter-spacing: 5px;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
}

.vault-pin-input::placeholder {
    font-size: 13px;
    letter-spacing: 2px;
    color: var(--text-sub);
    font-weight: 400;
}

.vault-pin-input:focus { 
    border-color: var(--accent-main); 
    box-shadow: 0 0 0 3px var(--border-focus); 
    transform: translateY(-2px);
}

.vault-modal-box .btn {
    width: 100%;
    padding: 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-top: 10px;
    border-radius: 8px;
}

.vault-modal-box .cancel-link {
    display: inline-block;
    margin-top: 15px;
    font-size: 11px;
    color: var(--text-muted);
    text-decoration: none;
    letter-spacing: 1px;
    transition: 0.3s;
}

.vault-modal-box .cancel-link:hover {
    color: var(--accent-main);
}

/* Tampilan Penuh Dedicated Page (Setelah Terbuka) */
.vault-page-wrapper {
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    width: 100%; 
    max-width: 900px; 
    margin: 0 auto; 
    animation: fadeIn 0.4s ease;
}
.vault-header-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 25px var(--shadow-main);
}
.vh-icon { font-size: 40px; color: var(--accent-main); }
.vh-text-area { flex: 1; }
.vh-title { font-size: 18px; font-weight: 700; color: var(--text-main); letter-spacing: 1px; }
.vh-sub { font-size: 12px; color: var(--text-sub); margin-top: 4px; }
.btn-lock-vault { 
    background: transparent; border: 1px solid var(--border-color); color: var(--text-muted); padding: 10px 20px; 
    border-radius: 6px; text-decoration: none; font-size: 13px; transition: 0.3s; font-weight: 600;
}
.btn-lock-vault:hover { border-color: var(--accent-main); color: var(--accent-main); background: var(--border-focus); }

/* Area Drag & Drop Upload File (Vault) */
.vault-upload-form {
    background: var(--bg-card);
    padding: 20px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}
.file-drop-area {
    position: relative; 
    flex: 1; 
    min-width: 250px; 
    display: flex; 
    align-items: center; 
    gap: 15px;
    padding: 15px 20px; 
    background: var(--bg-input); 
    border: 1px dashed var(--border-color); 
    border-radius: 8px; 
    transition: 0.3s;
}
.file-drop-area:hover { border-color: var(--accent-main); background: var(--bg-sidebar); }
.drop-icon { font-size: 24px; color: var(--accent-main); }
.drop-msg { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.vault-file-input {
    position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer;
}
.btn-upload-vault {
    background: var(--accent-main); color: var(--text-on-accent); border: none; padding: 15px 30px; border-radius: 8px;
    font-weight: 600; cursor: pointer; transition: 0.3s; letter-spacing: 1px;
}
.btn-upload-vault:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-main); }

/* List Dokumen Terlindungi (Vault) */
.vault-file-list { display: flex; flex-direction: column; gap: 10px; }
.vault-file-item {
    background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 10px;
    padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; transition: 0.3s;
}
.vault-file-item:hover { background: var(--bg-input); border-color: var(--border-focus); transform: translateX(5px); }
.vfi-left { display: flex; align-items: center; gap: 15px; }
.vfi-icon { font-size: 24px; color: var(--accent-main); }
.vfi-name { color: var(--text-main); font-size: 14px; font-weight: 500; }
.vfi-date { font-size: 11px; color: var(--text-sub); margin-top: 2px; }
.vfi-actions { display: flex; gap: 10px; }
.vfi-btn-download {
    color: var(--accent-main); text-decoration: none; font-size: 12px; border: 1px solid var(--border-focus); 
    padding: 6px 14px; border-radius: 6px; background: transparent; transition: 0.3s;
}
.vfi-btn-download:hover { background: var(--border-color); }
.vfi-btn-delete {
    color: var(--accent-main); text-decoration: none; font-size: 12px; border: 1px solid var(--border-color); 
    padding: 6px 14px; border-radius: 6px; background: transparent; transition: 0.3s;
}
.vfi-btn-delete:hover { background: var(--border-color); color: var(--text-main); }


/* ================= SANGAR VAULT CYBER ITEMS (GABUNGAN DARI PHP) ================= */
.vault-cyber-item { background: var(--bg-sidebar); border: 1px solid var(--border-color); border-left: 4px solid var(--accent-main); border-radius: 8px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 10px var(--shadow-main); }
.vault-cyber-item:hover { border-color: var(--border-focus); box-shadow: 0 5px 15px var(--shadow-main); transform: translateX(6px); background: var(--bg-input); }
.vci-icon { width: 42px; height: 42px; border-radius: 8px; background: var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 20px; margin-right: 14px; color: var(--accent-main);}
.vci-name { color: var(--text-main); font-weight: 600; font-size: 14px; margin-bottom: 3px; letter-spacing: 0.5px; }
.vci-meta { color: var(--text-sub); font-size: 10px; letter-spacing: 1px; }
.vci-actions { display: flex; gap: 8px; }
.vci-btn-dl, .vci-btn-del { background: transparent; color: var(--text-muted); text-decoration: none; padding: 6px 14px; border-radius: 4px; font-size: 11px; font-weight: 600; transition: 0.2s; border: 1px solid var(--border-color); letter-spacing: 1px; display: inline-block;}
.vci-btn-dl:hover, .vci-btn-del:hover { background: var(--border-color); color: var(--text-main); border-color: var(--border-focus); }

/* ================= GOOGLE-STYLE SETTINGS PAGE ================= */
.settings-wrapper { display: flex; flex-direction: column; gap: 25px; width: 100%; max-width: 950px; margin: 0 auto; animation: fadeIn 0.4s ease; }

.settings-profile-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; padding: 25px; display: flex; align-items: center; gap: 20px; box-shadow: 0 10px 30px var(--shadow-main); flex-wrap: wrap; }
.sp-avatar { width: 70px; height: 70px; border-radius: 50%; background: var(--accent-dark); border: 2px solid var(--accent-main); display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; color: var(--text-on-accent); box-shadow: 0 0 15px var(--border-focus); flex-shrink: 0; }
.sp-info { flex: 1; min-width: 200px; }
.sp-info h2 { color: var(--text-main); font-size: 22px; font-weight: 700; margin-bottom: 4px; letter-spacing: 0.5px; }
.sp-info p { color: var(--text-muted); font-size: 13px; margin-bottom: 8px; }
.sp-badge { font-size: 10px; color: var(--accent-main); background: var(--border-color); padding: 4px 10px; border-radius: 20px; border: 1px solid var(--border-focus); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.sp-status { font-size: 14px; font-weight: 600; color: var(--success-color); text-shadow: 0 0 10px rgba(0,255,106,0.3); }

.settings-group-title { font-size: 16px; color: var(--text-main); margin-bottom: 15px; font-weight: 600; letter-spacing: 0.5px; padding-left: 5px; border-left: 4px solid var(--accent-main); border-radius: 2px; }
.settings-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 0 5px 20px var(--shadow-main); }

/* Layout Grid 2 Kolom untuk section besar */
.settings-card.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.settings-card.grid-2 .settings-item { border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); }
/* Hilangkan border kanan di kolom genap (desktop) */
@media(min-width: 650px) { .settings-card.grid-2 .settings-item:nth-child(even) { border-right: none; } .settings-card.grid-2 .settings-item:nth-last-child(-n+2) { border-bottom: none; } }
@media(max-width: 649px) { .settings-card.grid-2 .settings-item { border-right: none; } .settings-card.grid-2 .settings-item:last-child { border-bottom: none; } }

/* Layout List untuk bagian Preferensi dll */
.settings-card.list-view { display: flex; flex-direction: column; }
.settings-card.list-view .settings-item:not(:last-child) { border-bottom: 1px solid var(--border-color); }

.settings-item { display: flex; align-items: center; gap: 18px; padding: 20px 25px; text-decoration: none; transition: background 0.2s ease; cursor: pointer; }
.settings-item:hover { background: var(--border-color); }

.settings-icon { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-input); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--accent-main); flex-shrink: 0; box-shadow: inset 0 0 10px var(--border-focus); }
.settings-text { flex: 1; }
.st-title { font-size: 15px; font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
.st-desc { font-size: 12px; color: var(--text-sub); }
.settings-value { font-size: 13px; color: var(--text-muted); margin-right: 15px; font-weight: 500; }
.settings-arrow { font-size: 24px; color: var(--text-sub); line-height: 1; }
.settings-item:hover .settings-arrow { color: var(--accent-main); }

.settings-select { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-main); padding: 10px 12px; border-radius: 6px; outline: none; font-size: 13px; width: 100%; margin-top: 6px; transition: 0.3s; cursor: pointer; }
.settings-select:focus { border-color: var(--accent-main); box-shadow: 0 0 8px var(--border-focus); }
.settings-select option { background: var(--bg-sidebar); color: var(--text-main); }

/* Kolom Split (Lanjutan & Keamanan) */
.settings-section.columns-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; }

/* ================= REVISI: AI CHAT INTERFACE (GEMINI STYLE) ================= */
.ai-chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 160px); 
    background: var(--bg-card);
    border-radius: 15px;
    border: 1px solid var(--border-color);
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px var(--shadow-main);
}

.chat-header {
    padding: 15px 20px;
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.chat-bubble {
    max-width: 85%;
    padding: 14px 18px;
    font-size: 14px;
    line-height: 1.6;
    position: relative;
    animation: fadeIn 0.3s ease;
}

.bubble-user {
    align-self: flex-end;
    background: var(--accent-dark);
    color: var(--text-on-accent);
    border-radius: 18px 18px 2px 18px;
    border: 1px solid var(--border-focus);
    box-shadow: 0 4px 12px var(--shadow-main);
}

.bubble-ai {
    align-self: flex-start;
    background: var(--bg-input);
    color: var(--text-main);
    border-radius: 18px 18px 18px 2px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px var(--shadow-main);
}

.chat-input-area {
    padding: 20px;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 12px;
    align-items: center;
}

.input-wrapper {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 25px;
    padding: 2px 15px;
    transition: 0.3s;
}

.input-wrapper:focus-within {
    border-color: var(--accent-main);
    box-shadow: 0 0 10px var(--border-focus);
}

.input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 10px;
    color: var(--text-main);
    outline: none;
    font-size: 14px;
}

.btn-chat-icon {
    background: transparent;
    border: none;
    color: var(--accent-main);
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    border-radius: 50%;
}

.btn-chat-icon:hover {
    color: var(--text-main);
    background: var(--border-color);
}

.btn-send-chat {
    background: var(--accent-dark);
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: var(--text-on-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    box-shadow: 0 4px 10px var(--shadow-main);
}

.btn-send-chat:hover {
    background: var(--accent-main);
    transform: scale(1.05);
    box-shadow: 0 0 15px var(--border-focus);
}

/* ================= SUPER CYBER VAULT ================= */
/* Diubah ke tampilan minimalis, mengikuti variabel tema otomatis agar rapi dan biasa saja */
.cyber-modal-box {
    background: var(--bg-card); 
    padding: 35px; 
    border-radius: 12px;
    border: 1px solid var(--border-color); 
    width: 100%; 
    max-width: 400px; 
    text-align: center;
    box-shadow: 0 10px 30px var(--shadow-main);
    position: relative; 
    overflow: hidden; 
}

.cyber-pin-input {
    width: 100%; 
    padding: 12px; 
    margin-bottom: 20px;
    background: var(--bg-input); 
    border: 1px solid var(--border-color);
    color: var(--text-main); 
    text-align: center; 
    font-size: 16px; 
    letter-spacing: 8px;
    outline: none; 
    transition: 0.3s; 
    border-radius: 8px;
}
.cyber-pin-input:focus { border-color: var(--accent-main); box-shadow: 0 0 10px var(--border-focus); }

.cyber-page-wrapper { width: 100%; max-width: 900px; margin: 0 auto; animation: fadeIn 0.4s ease; }
.cyber-header { background: var(--bg-card); border: 1px solid var(--border-color); padding: 25px; border-radius: 12px; display: flex; align-items: center; gap: 20px; box-shadow: 0 10px 25px var(--shadow-main); }
.cyber-title { font-size: 20px; font-weight: 700; color: var(--text-main); letter-spacing: 1px; }
.cyber-drop { border: 1px dashed var(--border-color); background: var(--bg-input); border-radius: 12px; transition: 0.3s; padding: 20px; text-align: center; position: relative; }
.cyber-drop:hover { background: var(--bg-sidebar); border-color: var(--accent-main); }
.cyber-btn { background: var(--accent-main); color: var(--text-on-accent); font-weight: 600; border: none; border-radius: 8px; padding: 12px 25px; cursor: pointer; transition: 0.3s; }
.cyber-btn:hover { background: var(--accent-dark); transform: translateY(-2px); box-shadow: 0 5px 15px var(--shadow-main); }
.cyber-file-item { background: var(--bg-sidebar); border: 1px solid var(--border-color); border-radius: 10px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; transition: 0.3s; margin-bottom: 12px; }
.cyber-file-item:hover { border-color: var(--border-focus); background: var(--bg-input); transform: translateX(5px); }

/* ========================================================================== */
/* CSS TAMBAHAN DARI FILE PHP (VAULT MINIMALIS & FACE SCANNER)                */
/* REVISI UKURAN AGAR PROPORSIONAL, TIDAK ADA STRUKTUR YANG DIHAPUS           */
/* ========================================================================== */

/* CSS UNTUK PIN MODAL MINIMALIS */
.vault-modal-minimal {
    background: var(--bg-card);
    padding: 35px 30px;
    border-radius: 12px;
    width: 100%;
    max-width: 340px;
    text-align: center;
    box-shadow: 0 10px 30px var(--shadow-main);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    border: none;
}
.vault-modal-minimal h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 1px;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.vault-modal-minimal p {
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-bottom: 25px;
    text-transform: uppercase;
}
.vault-input-minimal {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    text-align: center;
    font-size: 14px;
    letter-spacing: 4px;
    border-radius: 8px;
    outline: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.vault-input-minimal:focus {
    border-color: var(--accent-main);
    box-shadow: 0 0 0 2px var(--border-focus);
}
.vault-btn-minimal {
    width: 100%;
    padding: 14px;
    background: #0066cc; 
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    letter-spacing: 1px;
    margin-top: 5px;
}
.vault-btn-minimal:hover {
    background: #005bb5;
    transform: translateY(-2px);
}
.vault-cancel-minimal {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    letter-spacing: 1px;
    display: inline-block;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.vault-cancel-minimal:hover {
    color: var(--text-main);
    border-color: var(--accent-main);
    box-shadow: 0 0 0 2px var(--border-focus);
}

/* ANIMASI SCANNER WAJAH */
.face-scanner-box {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    /* Border default transparan/netral, akan diatur oleh JS */
    border: 4px solid var(--border-focus);
    box-shadow: 0 0 15px transparent;
    background: #000;
    transition: all 0.4s ease-in-out; /* Efek smooth saat ganti warna */
}

/* State saat sedang memindai (Warna Aksen Tema) */
.face-scanner-box.scanning {
    border-color: var(--accent-main);
    box-shadow: 0 0 20px var(--border-focus);
}

/* State saat BERHASIL (Hijau Menyala) */
.face-scanner-box.success {
    border-color: #00ff6a; 
    box-shadow: 0 0 25px rgba(0, 255, 106, 0.6);
}

/* State saat GAGAL/TIDAK COCOK (Merah Menyala) */
.face-scanner-box.error {
    border-color: #ff4d4d; 
    box-shadow: 0 0 25px rgba(255, 77, 77, 0.6);
}

.face-scanner-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* Efek Cermin */
}

.scan-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: rgba(0, 255, 106, 0.8);
    box-shadow: 0 0 10px rgba(0, 255, 106, 1);
    animation: scanAnimation 2s infinite linear;
    z-index: 2;
    display: none !important; /* DITAMBAHKAN !important AGAR GARIS TENGAH HILANG PERMANEN */
}
@keyframes scanAnimation {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

/* =============================================
   ALICE MULTILANGUAGE SELECTOR — CUSTOM DESIGN
   Terintegrasi penuh dengan CSS variable tema
   ============================================= */

/* Container selector bahasa */
.alice-lang-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    z-index: 9999;
}

/* Tombol trigger selector */
.alice-lang-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-input, rgba(255,255,255,0.05));
    border: 1px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 8px;
    color: var(--text-main, #fff);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    letter-spacing: 0.3px;
    user-select: none;
    min-width: 90px;
    justify-content: space-between;
}
.alice-lang-btn:hover {
    border-color: var(--accent-main, #c0392b);
    background: var(--bg-card, rgba(255,255,255,0.08));
    box-shadow: 0 2px 12px var(--shadow-main, rgba(0,0,0,0.3));
}
.alice-lang-btn .lang-flag {
    font-size: 16px;
    line-height: 1;
}
.alice-lang-btn .lang-name {
    flex: 1;
    text-align: left;
}
.alice-lang-btn .lang-chevron {
    font-size: 10px;
    opacity: 0.6;
    transition: transform 0.2s ease;
    margin-left: 2px;
}
.alice-lang-wrapper.open .lang-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.alice-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border-color, rgba(255,255,255,0.12));
    border-radius: 10px;
    box-shadow: 0 8px 30px var(--shadow-main, rgba(0,0,0,0.4));
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    backdrop-filter: blur(12px);
}
.alice-lang-wrapper.open .alice-lang-dropdown {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}

/* Header dropdown */
.alice-lang-dropdown-header {
    padding: 10px 14px 8px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: var(--accent-main, #c0392b);
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,0.08));
    text-transform: uppercase;
}

/* Item bahasa */
.alice-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
    font-size: 12px;
    color: var(--text-main, #fff);
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.alice-lang-item:hover {
    background: var(--bg-input, rgba(255,255,255,0.06));
    color: var(--accent-main, #c0392b);
}
.alice-lang-item.active {
    background: var(--bg-input, rgba(255,255,255,0.08));
    color: var(--accent-main, #c0392b);
    font-weight: 700;
}
.alice-lang-item .item-flag {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}
.alice-lang-item .item-info {
    flex: 1;
}
.alice-lang-item .item-native {
    font-size: 12px;
    font-weight: 600;
}
.alice-lang-item .item-english {
    font-size: 10px;
    opacity: 0.55;
    margin-top: 1px;
}
.alice-lang-item .item-check {
    font-size: 12px;
    color: var(--accent-main, #c0392b);
    opacity: 0;
}
.alice-lang-item.active .item-check {
    opacity: 1;
}

/* Loading overlay saat sedang translate */
.alice-translate-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.alice-translate-overlay.visible {
    opacity: 1;
    pointer-events: all;
}
.alice-translate-card {
    background: var(--bg-card, #1a1a1a);
    border: 1px solid var(--border-focus, rgba(255,255,255,0.2));
    border-radius: 16px;
    padding: 28px 36px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    max-width: 280px;
    width: 90%;
}
.alice-translate-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid var(--border-color, rgba(255,255,255,0.1));
    border-top-color: var(--accent-main, #c0392b);
    border-radius: 50%;
    animation: aliceSpin 0.7s linear infinite;
    margin: 0 auto 16px;
}
@keyframes aliceSpin {
    to { transform: rotate(360deg); }
}
.alice-translate-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main, #fff);
    margin-bottom: 4px;
    letter-spacing: 0.3px;
}
.alice-translate-sublabel {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,0.4));
}

/* Badge kecil di topbar jika sedang tidak dalam bahasa default */
.alice-lang-active-badge {
    font-size: 9px;
    background: var(--accent-main);
    color: white;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 2px;
    vertical-align: middle;
}

/* Fix z-index untuk topbar */
.topbar { position: relative; z-index: 100; }

/* Auto-fix styling lama google translate */
.g-translate-wrapper { display: none !important; }

/* Fix layout btn di header home page */
#nav-lang-wrapper { flex-shrink: 0; }

/* Animasi teks saat di-translate */
@keyframes aliceFadeIn {
    from { opacity: 0.3; }
    to   { opacity: 1; }
}
.alice-translated {
    animation: aliceFadeIn 0.4s ease;
}

.crypto-widget {
    background-color: rgba(11, 20, 35, 0.8);
    border: 1px solid #1a3c61;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    width: 100%;
}

/* Membatasi tinggi kontainer agar bisa di-scroll */
#crypto-data-container {
    max-height: 200px; /* Sesuaikan angka ini dengan tinggi yang kamu mau */
    overflow-y: auto;
    padding-right: 10px; /* Jarak antara teks dan scrollbar */
}

/* Kustomisasi bentuk Scrollbar untuk browser Webkit (Chrome/Safari) */
#crypto-data-container::-webkit-scrollbar {
    width: 6px;
}
#crypto-data-container::-webkit-scrollbar-track {
    background: rgba(11, 20, 35, 0.5); 
    border-radius: 4px;
}
#crypto-data-container::-webkit-scrollbar-thumb {
    background: #1a3c61; 
    border-radius: 4px;
}
#crypto-data-container::-webkit-scrollbar-thumb:hover {
    background: #00d2ff; /* Warna neon saat di-hover */
}

.crypto-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #112640;
    font-size: 13px;
}

.crypto-item:last-child {
    border-bottom: none;
}

.crypto-name { color: #ffffff; font-weight: 500; width: 33%; }
.crypto-price { color: #ffffff; width: 33%; text-align: right; }
.crypto-change { width: 33%; text-align: right; font-weight: bold; }
.crypto-change.positive { color: #00ff88; }
.crypto-change.negative { color: #ff4d4d; }

/* ================= NEW PLANNING GRID (ESTETIK & RESPONSIVE) ================= */
.plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 10px;
}

.plan-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px var(--shadow-main);
}

.plan-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-focus);
    box-shadow: 0 10px 25px var(--shadow-main);
}

/* Header Kartu (Ikon & Tanggal) */
.pc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pc-category {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--accent-main);
    background: var(--border-color);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
}

.pc-date {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
}

/* Tipografi Kartu */
.plan-card h3 {
    color: var(--text-main);
    font-size: 18px;
    margin: 5px 0 0 0;
    line-height: 1.3;
}

.pc-desc {
    font-size: 13px;
    color: var(--text-sub);
    margin-bottom: 10px;
    line-height: 1.5;
}

/* PROGRESS BAR (Sesuai Desain ALICE) */
.pc-progress-wrapper {
    margin-top: auto;
}

.pc-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 6px;
    color: var(--text-main);
}

.pc-progress-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.pc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-dark), var(--accent-main));
    border-radius: 10px;
    transition: width 1s ease-in-out;
}

/* Langkah Kecil (Milestones) */
.pc-milestones {
    list-style: none;
    margin: 10px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pc-milestones li {
    font-size: 12px;
    color: var(--text-body);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pc-milestones li::before {
    content: "•";
    color: var(--accent-main);
    font-weight: bold;
}

/* Tombol Aksi Kartu */
.pc-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    border-top: 1px solid var(--border-color);
    padding-top: 15px;
}

.btn-card-action {
    flex: 1;
    padding: 8px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

.btn-card-complete {
    background: rgba(0, 255, 106, 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.btn-card-delete {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-color);
}

.btn-card-complete:hover { background: var(--success-color); color: #000; }
.btn-card-delete:hover { border-color: var(--accent-main); color: var(--accent-main); }

/* --- DARK MODE SYSTEM --- */
body.dark-mode {
    filter: invert(1) hue-rotate(180deg);
    background-color: #000 !important;
}

/* Kembalikan warna elemen yang gak boleh kebalik (Foto, Grafik, Ikon) */
body.dark-mode img, 
body.dark-mode .pc-avatar, 
body.dark-mode canvas,
body.dark-mode .lang-flag,
body.dark-mode i {
    filter: invert(1) hue-rotate(180deg);
}