*,:before,:after{box-sizing:border-box}body{color:#333;background-color:#fff;flex-direction:column;min-height:100vh;margin:0;padding:20px;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex}#app{background:#f8f9fa;border:1px solid #e0e0e0;border-radius:16px;flex:1;width:100%;max-width:650px;margin:0 auto;padding:24px}header{text-align:center;border-bottom:1px solid #eee;margin-bottom:10px;padding-bottom:6px}header h1,header h2{color:#212529;font-family:Segoe UI,sans-serif;font-weight:600}.content-box{background:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-bottom:20px;padding:24px;box-shadow:0 2px 4px #00000005}.form-section h3,.list-section h3{color:#212529;border-bottom:1px solid #e0e0e0;margin-top:0;margin-bottom:16px;padding-bottom:10px;font-family:Segoe UI,sans-serif;font-weight:600}.form-group{margin-bottom:14px}.form-group input[type=text],.form-group input[type=date],.form-group select,.form-group label{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:.95rem}.form-group input[type=text],.form-group input[type=date],.form-group select{box-sizing:border-box;color:#333;border:1px solid #ccc;border-radius:6px;width:100%;min-height:42px;padding:10px;transition:border-color .15s ease-in-out}.form-group input:focus,.form-group select:focus{border-color:#0d6efd;outline:none}.checkbox-group label{color:#495057;cursor:pointer;align-items:center;gap:8px;display:inline-flex}.task-card{background:#fff;border:1px solid #eee;border-left:5px solid #ffc107;border-radius:6px;justify-content:space-between;align-items:center;margin-bottom:12px;padding:16px;display:flex}.task-card.completed{opacity:.75;border-left-color:#28a745}.task-card h4{color:#212529;margin:0 0 6px;font-family:Segoe UI,sans-serif;font-weight:600}.task-card.completed h4{color:#888}.task-meta div,.task-meta span{color:#666;margin-bottom:4px;font-family:Segoe UI,sans-serif;font-size:.9rem}.badge{border-radius:4px;margin-top:8px;padding:4px 8px;font-size:.75rem;font-weight:600;display:inline-block}.badge-warning{color:#856404;background:#fff3cd}.badge-success{color:#155724;background:#d4edda}.empty-msg{text-align:center;color:#888;font-size:.95rem}.btn{text-align:center;white-space:nowrap;vertical-align:middle;cursor:pointer;border:1px solid #0000;padding:8px 20px;font-family:Segoe UI,sans-serif;font-size:.9rem;font-weight:500;line-height:1.5;text-decoration:none;transition:all .15s ease-in-out;display:inline-block}.btn-sm{margin-left:4px;padding:4px 12px;font-size:.8rem}.rounded-4{border-radius:50rem!important}.btn-outline-primary{color:#0d6efd;background-color:#0000;border-color:#0d6efd}.btn-outline-primary:hover{color:#fff;background-color:#0d6efd}.btn-secondary{color:#6c757d;background-color:#0000;border-color:#6c757d}.btn-secondary:hover{color:#fff;background-color:#6c757d}.btn-success{color:#28a745;background-color:#0000;border-color:#28a745}.btn-success:hover{color:#fff;background-color:#28a745}.btn-warning{color:#ffc107;background-color:#0000;border-color:#ffc107}.btn-warning:hover{color:#212529;background-color:#ffc107}.btn-danger{color:#dc3545;background-color:#0000;border-color:#dc3545}.btn-danger:hover{color:#fff;background-color:#dc3545}.btn-info{color:#17a2b8;background-color:#0000;border-color:#17a2b8}.btn-info:hover{color:#fff;background-color:#17a2b8}footer{text-align:center;clear:both;width:100%;margin-top:20px;padding:10px 0}.version-text{color:#777;margin:0;font-family:Segoe UI,sans-serif;font-size:.85rem}@media (width<=600px){body{padding:12px}#app{border-radius:12px;padding:16px}.content-box{padding:16px}.task-card{flex-direction:column;align-items:flex-start;gap:14px}.task-card>div:last-child{border-top:1px solid #f0f0f0;flex-wrap:wrap;gap:8px;width:100%;padding-top:12px;display:flex}.btn-sm{margin-left:0}}input[type=date]:not(:focus):invalid:before{content:"Pilih Tanggal Tenggat";color:#757575;margin-right:8px}